@charset "UTF-8";
:root,
[data-theme=light] {
  color-scheme: light;
  --sys-color-bg: #EAE4D7;
  --sys-color-surface: rgba(255, 255, 255, 0.8);
  --sys-color-surface-solid: #FBFAF7;
  --surface-current: #FBFAF7;
  --sys-surface-grouped: #F7F4ED;
  --sys-surface-elevated: #F2EBDC;
  --sys-surface-secondary-tint: #D4C9AF;
  --sys-surface-primary-tint: #E3F2FD;
  --sys-surface-textured: #F2EBDC;
  --sys-surface-homeplate: #FFFFFF;
  --sys-surface-texture-ink: rgba(93, 80, 50, 0.14);
  --sys-tier-promotion-bg: #DCF2DE;
  --sys-tier-promotion-edge: #3D8B40;
  --sys-tier-playoff-bg: #FBEECD;
  --sys-tier-playoff-edge: #A66F00;
  --sys-tier-relegation-bg: #F8DFDF;
  --sys-tier-relegation-edge: #C0392B;
  --sys-result-win: #005F8F;
  --sys-result-loss: #8A3F00;
  --sys-result-tie: #5F5A50;
  --sys-featured-gotd-bg: #F8EDD2;
  --sys-featured-gotd-edge: #9A6A00;
  --sys-featured-rivalry-bg: #D8F1F2;
  --sys-featured-rivalry-edge: #087C82;
  --sys-marker-new-bg: #E1EBD8;
  --sys-marker-new-text: #2E5F18;
  --sys-marker-update-bg: #F6DFE1;
  --sys-marker-update-text: #7D2933;
  --sys-marker-vintage-bg: #D9CBEB;
  --sys-marker-vintage-text: #4B188B;
  --sys-marker-archive-bg: #E1E6EC;
  --sys-marker-archive-text: #4B5F78;
  --sys-marker-future-bg: #D8EAEC;
  --sys-marker-future-text: #005F68;
  --sys-marker-throwback-bg: #E9DFF0;
  --sys-marker-throwback-text: #5F2785;
  --sys-marker-nsfw-bg: #F2DEDC;
  --sys-marker-nsfw-text: #862B23;
  --sys-marker-neutral-bg: #CABC9B;
  --sys-marker-neutral-text: #343844;
  --sys-marker-rated-bg: #B5DE8C;
  --sys-marker-rated-text: #294908;
  --sys-marker-dfa-bg: #ECCC93;
  --sys-marker-dfa-text: #573A05;
  --sys-level-majors: #0077B8;
  --sys-level-majors-ink: #FFFFFF;
  --sys-level-minors: #2EB2AC;
  --sys-level-minors-ink: #0F1418;
  --sys-level-injured: #82204A;
  --sys-level-injured-ink: #FFFFFF;
  --sys-level-freeagent: #02182B;
  --sys-level-freeagent-ink: #FFFFFF;
  --sys-level-dead: #111111;
  --sys-level-dead-ink: #FFFFFF;
  --sys-level-dead-edge: rgba(255, 255, 255, 0.28);
  --sys-marker-kind-bg: #A3D9E0;
  --sys-marker-kind-text: #0B4850;
  --sys-league-independent: #1F702F;
  --sys-vintage-bg: #ECEBED;
  --sys-vintage-active-bg: #DFDDE3;
  --sys-vintage-accent: #006397;
  --chart-1-ink: #6D4C91;
  --chart-2-ink: #00796B;
  --chart-3-ink: #8A5A00;
  --chart-4-ink: #B6426B;
  --chart-5-ink: #4D6F24;
  --chart-6-ink: #5B5BD6;
  --chart-7-ink: #8B4A3C;
  --chart-8-ink: #3F6F7E;
  --sys-color-primary: #006397;
  --sys-color-on-primary: #FFFFFF;
  --sys-color-secondary: #D4C9AF;
  --sys-color-tertiary: #5D5032;
  --sys-color-text-primary: #222222;
  --sys-color-text-secondary: #444444;
  --sys-color-text-muted: #6C6659;
  --sys-color-link: #006397;
  --sys-color-border: #D4C9AF;
  --sys-color-border-strong: #A68F59;
  --sys-color-success: #2E7D32;
  --sys-color-success-text: #2B742E;
  --sys-color-warning: #967000;
  --sys-color-warning-text: #816100;
  --sys-color-error: #C62828;
  --sys-color-error-text: #C42828;
  --sys-color-info: #007CBF;
  --sys-color-info-text: #006BA5;
  --sys-color-on-status: #FFFFFF;
  --sys-color-info-subtle: #e2edf1;
  --sys-color-success-subtle: #e7eee3;
  --sys-color-warning-subtle: #f1ecde;
  --sys-color-error-subtle: #f6e5e2;
  --sys-color-skeleton: #e6dfcf;
  --sys-color-hover: rgba(34, 34, 34, 0.06);
  --sys-color-press: rgba(34, 34, 34, 0.1);
  --sys-color-highlight: rgba(0, 99, 151, 0.12);
  --sys-color-selected: #e8e2d3;
  --sys-color-scrim: rgba(34, 34, 34, 0.4);
  --sys-color-input-bg: #FFFFFF;
  --sys-color-disabled-surface: #F2EEE6;
  --sys-color-disabled-border: #E0D8C6;
  --sys-color-disabled-text: #A9A290;
  --sys-color-disabled-button: transparent;
  --sys-color-switch-track: #D4C9AF;
  --sys-color-switch-knob: #FFFFFF;
  --sys-color-switch-knob-on: #FFFFFF;
  --table-head-bg: rgba(255, 255, 255, 0.5);
  --table-head-text: #6C6659;
  --table-rule-top: #2A2D34;
  --table-rule-head: #2A2D34;
  --table-rule-row: #e8e2d3;
  --table-total-bg: #efebe1;
  --table-vintage-bg: #ebf0e7;
  --table-vintage-active-bg: #dae6d7;
  --focus-color: #006397;
  --shell-bar1-bg: #006397;
  --shell-bar1-text: #FFFFFF;
  --shell-bar1-hover: rgba(255, 255, 255, 0.14);
  --shell-bar1-badge-bg: #FFFFFF;
  --shell-bar1-badge-text: #006397;
  --shell-bar2-bg: #D4C9AF;
  --shell-bar2-text: #444444;
  --shell-bar2-hover: rgba(34, 34, 34, 0.08);
  --shell-thumb-bg: rgba(255, 255, 255, 0.9);
}

[data-theme=dark] {
  color-scheme: dark;
  --sys-color-bg: #0F1418;
  --sys-color-surface: rgba(24, 33, 42, 0.8);
  --sys-color-surface-solid: #161E26;
  --surface-current: #161E26;
  --sys-surface-grouped: #18212A;
  --sys-surface-elevated: #1C2530;
  --sys-surface-secondary-tint: #1A2329;
  --sys-surface-primary-tint: #0A1E2E;
  --sys-surface-textured: #1C2530;
  --sys-surface-homeplate: #2F3438;
  --sys-surface-texture-ink: rgba(255, 255, 255, 0.10);
  --sys-tier-promotion-bg: #1E3524;
  --sys-tier-promotion-edge: #4FA855;
  --sys-tier-playoff-bg: #382E17;
  --sys-tier-playoff-edge: #D9A227;
  --sys-tier-relegation-bg: #3A2021;
  --sys-tier-relegation-edge: #D2564B;
  --sys-result-win: #70C7F4;
  --sys-result-loss: #FFB56B;
  --sys-result-tie: #B8C0C7;
  --sys-featured-gotd-bg: #332A17;
  --sys-featured-gotd-edge: #E1B34A;
  --sys-featured-rivalry-bg: #173238;
  --sys-featured-rivalry-edge: #36C2C7;
  --sys-marker-new-bg: #243321;
  --sys-marker-new-text: #A8D787;
  --sys-marker-update-bg: #39242A;
  --sys-marker-update-text: #F2A4AD;
  --sys-marker-vintage-bg: #382650;
  --sys-marker-vintage-text: #C8A8F0;
  --sys-marker-archive-bg: #29323D;
  --sys-marker-archive-text: #B8C5D3;
  --sys-marker-future-bg: #173238;
  --sys-marker-future-text: #73D1D6;
  --sys-marker-throwback-bg: #2D2038;
  --sys-marker-throwback-text: #CDA6E8;
  --sys-marker-nsfw-bg: #382322;
  --sys-marker-nsfw-text: #F0A49E;
  --sys-marker-neutral-bg: #33404E;
  --sys-marker-neutral-text: #D7DAE2;
  --sys-marker-rated-bg: #243314;
  --sys-marker-rated-text: #A8EE63;
  --sys-marker-dfa-bg: #3C2D11;
  --sys-marker-dfa-text: #F6BF5A;
  --sys-marker-kind-bg: #173236;
  --sys-marker-kind-text: #67DAE9;
  --sys-league-independent: #6FD47C;
  --sys-vintage-bg: #20242D;
  --sys-vintage-active-bg: #2A2F3A;
  --sys-vintage-accent: #6FC3FF;
  --chart-1-ink: #C8A9E5;
  --chart-2-ink: #58C7B4;
  --chart-3-ink: #E6B65C;
  --chart-4-ink: #EA8FB3;
  --chart-5-ink: #A9CE68;
  --chart-6-ink: #9BA8FF;
  --chart-7-ink: #D9998C;
  --chart-8-ink: #8FC2D1;
  --sys-color-primary: #6FC3FF;
  --sys-color-on-primary: #0F1418;
  --sys-color-secondary: #1A2329;
  --sys-color-tertiary: #0B2A33;
  --sys-color-text-primary: #F5F7FA;
  --sys-color-text-secondary: #8F9AA7;
  --sys-color-text-muted: #778693;
  --sys-color-link: #6FC3FF;
  --sys-color-border: #2A3440;
  --sys-color-border-strong: #556A82;
  --sys-color-success: #81C784;
  --sys-color-success-text: #81C784;
  --sys-color-warning: #FFD54F;
  --sys-color-warning-text: #FFD54F;
  --sys-color-error: #E57373;
  --sys-color-error-text: #E57373;
  --sys-color-info: #6FC3FF;
  --sys-color-info-text: #6FC3FF;
  --sys-color-on-status: #0F1418;
  --sys-color-info-subtle: #223544;
  --sys-color-success-subtle: #253633;
  --sys-color-warning-subtle: #37382c;
  --sys-color-error-subtle: #332a31;
  --sys-color-skeleton: #242d38;
  --sys-color-hover: rgba(245, 247, 250, 0.06);
  --sys-color-press: rgba(0, 0, 0, 0.16);
  --sys-color-highlight: rgba(111, 195, 255, 0.12);
  --sys-color-selected: #0B2A33;
  --sys-color-scrim: rgba(0, 0, 0, 0.6);
  --sys-color-input-bg: #18212A;
  --sys-color-disabled-surface: #141A20;
  --sys-color-disabled-border: #1E2730;
  --sys-color-disabled-text: #4A5561;
  --sys-color-disabled-button: #141A20;
  --sys-color-switch-track: #2A3440;
  --sys-color-switch-knob: #8F9AA7;
  --sys-color-switch-knob-on: #0F1418;
  --table-head-bg: rgba(255, 255, 255, 0.03);
  --table-head-text: #8F9AA7;
  --table-rule-top: #556A82;
  --table-rule-head: #404f61;
  --table-rule-row: #2A3440;
  --table-total-bg: #202933;
  --table-vintage-bg: #212f2f;
  --table-vintage-active-bg: #293c37;
  --focus-color: #6FC3FF;
  --shell-bar1-bg: #0B2A33;
  --shell-bar1-text: #FFFFFF;
  --shell-bar1-hover: rgba(255, 255, 255, 0.1);
  --shell-bar1-badge-bg: #6FC3FF;
  --shell-bar1-badge-text: #0F1418;
  --shell-bar2-bg: #1A2329;
  --shell-bar2-text: #F5F7FA;
  --shell-bar2-hover: rgba(245, 247, 250, 0.08);
  --shell-thumb-bg: rgba(255, 255, 255, 0.9);
}

[data-theme] {
  background-color: var(--sys-color-bg);
  color: var(--sys-color-text-primary);
}

:root {
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-accent: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-small: 4px;
  --radius: 8px;
  --radius-sheet: 16px;
  --radius-pill: 999px;
  --avatar-radius: 37.5%;
  --elevation-1: 2px;
  --elevation-2: 3px;
  --elevation-3: 4px;
  --elevation-4: 6px;
  --elevation-0: 1px;
  --elevation-flat: 1px;
  --elevation-surface: 2px;
  --elevation-overlay: 3px;
  --elevation-modal: 4px;
  --elevation-blocking: 6px;
  --chart-1: #6D4C91;
  --chart-1-pale: #C8A9E5;
  --chart-2: #00796B;
  --chart-2-pale: #58C7B4;
  --chart-3: #8A5A00;
  --chart-3-pale: #E6B65C;
  --chart-4: #B6426B;
  --chart-4-pale: #EA8FB3;
  --chart-5: #4D6F24;
  --chart-5-pale: #A9CE68;
  --chart-6: #5B5BD6;
  --chart-6-pale: #9BA8FF;
  --chart-7: #8B4A3C;
  --chart-7-pale: #D9998C;
  --chart-8: #3F6F7E;
  --chart-8-pale: #8FC2D1;
  --chart-seq-1: #ECE8F3;
  --chart-seq-2: #D6CBE6;
  --chart-seq-3: #B9A6D3;
  --chart-seq-4: #967DB9;
  --chart-seq-5: #73569F;
  --chart-seq-6: #51377F;
  --chart-div-1: #8E3B46;
  --chart-div-2: #BD6A70;
  --chart-div-3: #E3AEB0;
  --chart-div-4: #DDD8CC;
  --chart-div-5: #AFC6C2;
  --chart-div-6: #6F9F98;
  --chart-div-7: #2F6F69;
  --focus-width: 2px;
  --focus-offset: 2px;
  --bar1-h: 72px;
  --bar2-h: 56px;
  --phone-bar-h: 56px;
  --tabbar-h: 56px;
  --container-max: 1800px;
  --grid-columns: 4;
  --grid-gap: 12px;
  --page-pad: 16px;
  --card-pad: 16px;
  --control-h: 38px;
  --control-pad-y: 10px;
  --control-pad-x: 14px;
  --control-gap: 10px;
  --control-touch: 40px;
  --switch-h: 20px;
  --icon-size: 20px;
  --z-bar: 100;
  --z-panel: 200;
  --z-scrim: 300;
  --z-sheet: 400;
  --z-tabbar: 450;
  --z-modal: 500;
  --z-toast: 600;
}
@media (max-width: 899.98px) {
  :root {
    --control-h: 46px;
    --control-pad-y: 12px;
    --control-pad-x: 20px;
    --control-gap: 12px;
    --control-touch: 48px;
    --switch-h: 24px;
    --icon-size: 24px;
  }
}
@media (min-width: 600px) {
  :root {
    --grid-columns: 8;
    --grid-gap: 16px;
    --page-pad: 32px;
    --card-pad: 24px;
  }
}
@media (min-width: 1200px) {
  :root {
    --grid-columns: 12;
    --grid-gap: 24px;
    --page-pad: 64px;
  }
}

[data-density=compact] {
  --control-h: 32px;
  --control-pad-y: 6px;
  --control-pad-x: 12px;
  --control-gap: 8px;
  --control-touch: 32px;
  --switch-h: 16px;
  --icon-size: 16px;
}

[data-density=default] {
  --control-h: 38px;
  --control-pad-y: 10px;
  --control-pad-x: 14px;
  --control-gap: 10px;
  --control-touch: 40px;
  --switch-h: 20px;
  --icon-size: 20px;
}

[data-density=comfortable] {
  --control-h: 46px;
  --control-pad-y: 12px;
  --control-pad-x: 20px;
  --control-gap: 12px;
  --control-touch: 48px;
  --switch-h: 24px;
  --icon-size: 24px;
}

[data-focus=inverse] {
  --focus-color: #FFFFFF;
  --focus-width: 2.5px;
  --focus-offset: 1px;
}

[aria-invalid=true] {
  --focus-color: var(--sys-color-error);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-primary);
  background: var(--sys-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  color: var(--sys-color-text-primary);
}

h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
}

h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
}

h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}

p {
  color: var(--sys-color-text-secondary);
}

a {
  color: var(--sys-color-link);
  text-underline-offset: 2px;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.layout-container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--page-pad));
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: flow-root;
}

.layout-main {
  padding-bottom: var(--space-7);
}

.layout-grid > :empty:not(hr),
.layout-rail > :empty:not(hr),
.layout-rail-main > :empty:not(hr),
.layout-rail-side > :empty:not(hr),
.layout-stack > :empty:not(hr) {
  display: none;
}

.layout-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .layout-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 600px) {
  .layout-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .layout-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 600px) {
  .layout-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .layout-grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .layout-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.layout-half-quarters {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1200px) {
  .layout-half-quarters {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .layout-half-quarters > .layout-col-last {
    grid-column: -2/-1;
  }
}

.layout-columns {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
}
.layout-columns > * {
  grid-column: span var(--span-mobile, 4);
}
@media (min-width: 600px) {
  .layout-columns > * {
    grid-column: span var(--span-tablet, 8);
  }
}
@media (min-width: 1200px) {
  .layout-columns > * {
    grid-column: span var(--span-desktop, 12);
  }
}

.layout-rail {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1200px) {
  .layout-rail {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 24%);
  }
}

@media (min-width: 1200px) {
  .layout-rail-wide {
    grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  }
}

@media (min-width: 1200px) {
  .layout-rail-major {
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr);
  }
  .layout-rail-major > .layout-rail-side > .card {
    --card-pad: var(--space-5);
  }
  .layout-rail-major > .layout-rail-main > .card > .card-head,
.layout-rail-major > .layout-rail-side > .card > .card-head {
    min-height: calc(var(--card-pad) + var(--control-h));
    align-items: center;
  }
}

@media (min-width: 900px) {
  .layout-rail-start {
    grid-template-columns: minmax(260px, 30%) minmax(0, 1fr);
  }
}
@media (min-width: 1200px) {
  .layout-rail-start {
    grid-template-columns: minmax(280px, 26%) minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  .layout-rail-left {
    grid-template-columns: minmax(280px, 26%) minmax(0, 1fr);
  }
  .layout-rail-left > .layout-rail-main {
    grid-column: 2;
    grid-row: 1;
  }
  .layout-rail-left > .layout-rail-side {
    grid-column: 1;
    grid-row: 1;
  }
}

.layout-stack,
.layout-rail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.layout-stack > .sheet,
.layout-rail-main > .sheet {
  margin-bottom: 0;
}
.layout-stack > .filter-bar,
.layout-rail-main > .filter-bar {
  margin-bottom: 0;
}
.layout-stack > .sheet h4,
.layout-rail-main > .sheet h4 {
  margin-bottom: var(--space-3);
}

.layout-rail-main {
  min-width: 0;
}

.layout-rail-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
  min-width: 0;
}
.layout-rail-side > .card {
  --card-pad: var(--space-4);
}

.rail-form {
  display: contents;
}

@media (max-width: 899.98px) {
  body {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }
}

.shell-skip {
  position: absolute;
  left: var(--space-4);
  top: -64px;
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-small);
  background: var(--sys-color-surface-solid);
  color: var(--sys-color-text-primary);
}
.shell-skip:focus {
  top: var(--space-2);
}

.shell {
  position: relative;
  z-index: var(--z-bar);
}

.shell-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(var(--container-max) + 2 * var(--page-pad));
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.shell-bar1 {
  --shell-hover: var(--shell-bar1-hover);
  --focus-color: #FFFFFF;
  --focus-width: 2.5px;
  --focus-offset: 1px;
  background: var(--shell-bar1-bg);
  color: var(--shell-bar1-text);
}
.shell-bar1 .shell-inner {
  flex-wrap: wrap;
  min-height: var(--phone-bar-h);
}
@media (min-width: 900px) {
  .shell-bar1 {
    height: var(--bar1-h);
  }
  .shell-bar1 .shell-inner {
    flex-wrap: nowrap;
  }
}

.shell-logo {
  flex: none;
  display: flex;
  align-items: center;
  min-height: var(--control-touch);
  margin-right: var(--space-2);
}
.shell-logo img {
  width: auto;
  height: 32px;
}
@media (min-width: 900px) {
  .shell-logo {
    margin-right: var(--space-4);
  }
  .shell-logo img {
    height: 40px;
  }
}

.shell-identity {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shell-thumb {
  flex: none;
  display: block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--shell-thumb-bg);
}
.shell-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shell-thumb:hover {
  opacity: 0.8;
}

.shell-thumb-logo img {
  object-fit: contain;
}

.shell-avatar {
  flex: none;
  display: block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: var(--avatar-radius);
  background-color: var(--shell-thumb-bg);
}
.shell-avatar:hover {
  opacity: 0.8;
}

.shell-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.shell-link {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-touch);
  padding-inline: var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  font: 600 15px/24px var(--font-serif);
  text-decoration: none;
  white-space: nowrap;
}
.shell-link [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: calc(var(--icon-size) * 0.8);
  line-height: 1;
}
.shell-link:hover, .shell-link[aria-expanded=true] {
  background: var(--shell-hover);
  color: inherit;
  text-decoration: none;
}

.nav-pill {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  border-radius: 4.5px;
  font: 400 12px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.nav-pill span {
  display: block;
  height: 18px;
  min-width: 18px;
  padding: 0 4px;
}
.nav-pill .action {
  background-color: #00466C;
  color: #FFFFFF;
}
.nav-pill .open {
  background-color: #3895C8;
  color: rgba(255, 255, 255, 0.95);
}

.nav-counter {
  display: inline-block;
  flex: none;
  height: 18px;
  min-width: 18px;
  max-width: 36px;
  padding: 0 4px;
  overflow: hidden;
  border-radius: 4.5px;
  background-color: #00466C;
  color: #FFFFFF;
  font: 400 12px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-overflow: ellipsis;
}

.nav-pill,
.nav-counter {
  margin-left: calc(5px - var(--space-2));
}

.nav-counter:empty,
.nav-pill:empty {
  display: none !important;
}

.nav-counter:not(:empty),
.nav-pill:not(:empty) {
  animation: badge-in 240ms cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes badge-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.shell-owner {
  display: none;
}
@media (min-width: 900px) {
  .shell-owner {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    margin-left: var(--space-2);
  }
}

.shell-owner-links {
  display: flex;
  flex: 0 1 auto;
  gap: var(--space-1);
  min-width: 0;
  margin: calc(-1 * var(--space-1));
  padding: var(--space-1);
  overflow: hidden;
}

.shell-overflow {
  position: relative;
  flex: none;
}

.shell-overflow-menu {
  --focus-color: var(--sys-color-primary);
  --focus-width: 2px;
  --focus-offset: 2px;
  position: absolute;
  top: calc(100% + var(--space-3));
  right: 0;
  z-index: var(--z-panel);
  display: none;
  min-width: 256px;
}
body[data-nav-open=overflow] .shell-overflow-menu {
  display: block;
}
.shell-overflow-menu .nav-pill {
  margin-left: auto;
}
.shell-overflow-menu .menu-item [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: calc(var(--icon-size) * 0.8);
  line-height: 1;
  color: var(--sys-color-primary);
}
.shell-overflow-menu [data-priority-twin]:not([hidden]) ~ .shell-overflow-first {
  margin-top: var(--space-1);
  border-top: 1px solid var(--sys-color-border);
  padding-top: var(--space-1);
}

.shell-bar1-end {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.shell-quick {
  display: none;
}
@media (min-width: 900px) {
  .shell-quick {
    display: inline-flex;
  }
}

.shell-quick-icon {
  position: relative;
  justify-content: center;
  width: var(--control-touch);
  padding-inline: 0;
}
.shell-quick-icon .nav-pill {
  position: absolute;
  top: 2px;
  right: 0;
  margin-left: 0;
}
.shell-quick-icon .nav-pill:empty {
  display: none;
}
.shell-quick-icon > span:not([class*=fa-]):not(.nav-pill) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.shell-search {
  position: relative;
  display: none;
  align-items: center;
  width: 160px;
  margin-left: var(--space-2);
}
.shell-search input {
  width: 100%;
  height: var(--control-h);
  padding: var(--control-pad-y) var(--space-7) var(--control-pad-y) calc(var(--control-pad-x) + 16px + var(--control-gap));
  border: 0;
  border-radius: var(--radius);
  background: #FFFFFF;
  color: #222222;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-size: 16px;
}
@media (min-width: 900px) {
  .shell-search input {
    font-size: 15px;
  }
}
.shell-search input::placeholder {
  color: #6C6659;
}
.shell-search input::-webkit-search-cancel-button {
  display: none;
}
.shell-search .fa-magnifying-glass {
  position: absolute;
  left: var(--control-pad-x);
  color: #444444;
  pointer-events: none;
}
@media (min-width: 900px) {
  .shell-search {
    display: flex;
  }
}
@media (min-width: 1200px) {
  .shell-search {
    width: 200px;
  }
}
@media (max-width: 899.98px) {
  body[data-nav-open=search] .shell-search {
    order: 10;
    display: flex;
    flex-basis: 100%;
    width: auto;
    margin: 0 0 var(--space-2);
  }
}

.shell-search-hint {
  position: absolute;
  right: var(--space-2);
  display: none;
  padding: 0 var(--space-1);
  border: 1px solid #D4C9AF;
  border-radius: var(--radius-small);
  color: #6C6659;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  pointer-events: none;
}
@media (min-width: 1200px) {
  .shell-search-hint {
    display: block;
  }
}
input:focus ~ .shell-search-hint, input:not(:placeholder-shown) ~ .shell-search-hint {
  display: none;
}

.shell-icon-btn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-touch);
  height: var(--control-touch);
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
}
.shell-icon-btn [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: calc(var(--icon-size) * 0.8);
  line-height: 1;
}
.shell-icon-btn:hover, .shell-icon-btn[aria-expanded=true] {
  background: var(--shell-hover);
  color: inherit;
  text-decoration: none;
}
@media (min-width: 900px) {
  .shell-icon-btn {
    display: none;
  }
}

.shell-bar2 {
  --shell-hover: var(--shell-bar2-hover);
  display: none;
  height: var(--bar2-h);
  background: var(--shell-bar2-bg);
  color: var(--shell-bar2-text);
}
@media (min-width: 900px) {
  .shell-bar2 {
    display: block;
  }
}

.shell-date {
  display: none;
  flex: none;
  margin-right: var(--space-4);
  font: 600 15px/24px var(--font-serif);
  white-space: nowrap;
}
@media (min-width: 1200px) {
  .shell-date {
    display: block;
  }
}

.shell-levels {
  flex: none;
  display: flex;
  gap: var(--space-1);
  margin-right: var(--space-4);
}

.shell-track {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.shell-track[data-overflow-start] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px);
  mask-image: linear-gradient(to right, transparent, #000 48px);
}
.shell-track[data-overflow-end] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.shell-track[data-overflow-start][data-overflow-end] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.shell-track::-webkit-scrollbar {
  display: none;
}

.shell-track.is-icons .shell-link > span:not([class]) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.shell-track.is-icons .shell-link {
  padding-inline: var(--space-2);
}

.shell-level {
  position: relative;
  display: flex;
}

.shell-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-panel);
  display: none;
  min-width: 224px;
  max-height: calc(100vh - var(--bar1-h) - var(--bar2-h) - var(--space-4));
  overflow-y: auto;
  padding: var(--space-3);
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-2);
  border-radius: var(--radius);
  background: var(--sys-color-surface-solid);
  color: var(--sys-color-text-primary);
}

.shell-dropdown-title {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  margin-bottom: var(--space-2);
}

body[data-nav-open=majors] .shell-dropdown[data-panel=majors] {
  display: block;
}

body[data-nav-open=minors] .shell-dropdown[data-panel=minors] {
  display: block;
}

.shell-panel {
  display: none;
  background: var(--sys-color-surface-solid);
  color: var(--sys-color-text-primary);
}
@media (min-width: 900px) {
  .shell-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-panel);
    max-height: calc(100vh - var(--bar1-h) - var(--bar2-h));
    overflow-y: auto;
    border-bottom: var(--elevation-2) solid var(--sys-color-border);
  }
}
@media (max-width: 899.98px) {
  .shell-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    z-index: var(--z-sheet);
    max-height: calc(100% - var(--phone-bar-h) - var(--tabbar-h) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--sys-color-border);
    border-bottom: 0;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }
}

body[data-nav-open=league] .shell-panel[data-panel=league] {
  display: block;
}

body[data-nav-open=mega] .shell-panel[data-panel=mega] {
  display: block;
}

.shell-panel-inner {
  max-width: calc(var(--container-max) + 2 * var(--page-pad));
  margin-inline: auto;
  padding: var(--space-4) var(--page-pad) var(--space-6);
}
@media (min-width: 900px) {
  .shell-panel-inner {
    padding-top: var(--space-5);
  }
}

.shell-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.shell-panel-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
}

.shell-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-touch);
  height: var(--control-touch);
  margin-right: calc(-1 * var(--space-2));
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--sys-color-text-secondary);
  font-size: 20px;
}
.shell-close:hover {
  background: var(--sys-color-hover);
  color: inherit;
  text-decoration: none;
}

.shell-menu {
  display: grid;
  gap: var(--space-5) var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  .shell-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .shell-menu {
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  }
}

@media (min-width: 900px) {
  .shell-menu-phone {
    display: none;
  }
}

@media (max-width: 899.98px) {
  .shell-menu-desktop {
    display: none;
  }
}

.shell-menu-title {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  margin-bottom: var(--space-2);
}

.shell-menu-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .shell-menu-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
    column-gap: var(--space-6);
  }
}

.shell-menu-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-touch);
  margin-inline: calc(-1 * var(--space-2));
  padding-inline: var(--space-2);
  border-radius: var(--radius-small);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 500;
  text-decoration: none;
}
.shell-menu-link [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: calc(var(--icon-size) * 0.8);
  line-height: 1;
  color: var(--sys-color-primary);
}
.shell-menu-link .nav-pill {
  margin-left: auto;
}
.shell-menu-link:hover {
  background: var(--sys-color-hover);
  color: inherit;
  text-decoration: none;
}
.shell-menu-link[aria-current=page] {
  background: var(--sys-color-selected);
  color: var(--sys-color-primary);
  font-weight: 600;
}
@media (min-width: 900px) {
  .shell-menu-link {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 500;
  }
  .shell-menu-link[aria-current=page] {
    font-weight: 600;
  }
}

.shell-menu-meta {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.shell-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--sys-color-scrim);
}
@media (max-width: 899.98px) {
  body[data-nav-open=league] .shell-scrim, body[data-nav-open=mega] .shell-scrim {
    display: block;
  }
}

@media (max-width: 899.98px) {
  body[data-nav-open=league],
body[data-nav-open=mega] {
    overflow: hidden;
  }
}

.shell-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-tabbar);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--sys-color-border);
  background: var(--sys-color-surface-solid);
}
@media (min-width: 900px) {
  .shell-tabbar {
    display: none;
  }
}

.shell-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: none;
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 500;
  text-decoration: none;
}
.shell-tab [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: calc(24px * 0.8);
  line-height: 1;
}
.shell-tab:hover {
  color: inherit;
  text-decoration: none;
}
.shell-tab[aria-current=page], .shell-tab[data-current], .shell-tab[aria-expanded=true] {
  color: var(--sys-color-primary);
}
.shell-tab .nav-pill {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
  box-shadow: 0 0 0 2px var(--sys-color-surface-solid);
}

.nav-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-toast);
  padding: var(--space-1) var(--space-2);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-small);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.nav-tip.is-measuring {
  visibility: hidden;
  transition: none;
}
.nav-tip.is-shown {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .nav-tip {
    transition: none;
  }
}

body[data-league=minors] {
  --shell-bar1-bg: #246B77;
  --shell-bar1-hover: rgba(255, 255, 255, 0.16);
}

[data-theme=dark] body[data-league=minors] {
  --shell-bar1-bg: #1D4249;
  --shell-bar1-hover: rgba(255, 255, 255, 0.1);
}

.page-head {
  padding-top: var(--space-5);
  padding-bottom: var(--space-4);
}
@media (min-width: 900px) {
  .page-head {
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
  }
}

.page-head:not(:has(.page-eyebrow)) {
  padding-top: var(--space-4);
}
@media (min-width: 900px) {
  .page-head:not(:has(.page-eyebrow)) {
    padding-top: var(--space-5);
  }
}

.layout-container:not(:has(> .page-head, > .landing-top, > score, > .pp > .titles)) {
  padding-top: var(--space-4);
}
@media (min-width: 900px) {
  .layout-container:not(:has(> .page-head, > .landing-top, > score, > .pp > .titles)) {
    padding-top: var(--space-5);
  }
}

.page-eyebrow {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  margin-bottom: var(--space-1);
  color: var(--sys-color-primary);
}

.page-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--sys-color-text-primary);
}
@media (min-width: 900px) {
  .page-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: -0.5px;
  }
}

.page-subtitle {
  font-weight: 400;
}

.page-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--sys-color-border);
}
.page-tabs[data-overflow-start] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px);
  mask-image: linear-gradient(to right, transparent, #000 48px);
}
.page-tabs[data-overflow-end] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.page-tabs[data-overflow-start][data-overflow-end] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.page-tabs::-webkit-scrollbar {
  display: none;
}
@media (max-width: 899.98px) {
  .page-head > .page-tabs {
    margin-inline: calc(-1 * var(--page-pad));
    padding-inline: var(--page-pad);
  }
}

.page-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-touch);
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}
.page-tab [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: calc(var(--icon-size) * 0.8);
  line-height: 1;
}
.page-tab:hover {
  color: var(--sys-color-text-primary);
  box-shadow: inset 0 -2px 0 var(--sys-color-border-strong);
  text-decoration: none;
}
.page-tab[aria-current=page] {
  color: var(--sys-color-primary);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--sys-color-primary);
}
.page-tab[aria-disabled=true] {
  color: var(--sys-color-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
}

.page-tabs-group {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 10px;
  flex: none;
  margin-left: var(--space-4);
  white-space: nowrap;
}

.pp {
  position: relative;
}

.player-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (max-width: 899.98px) {
  .player-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

.player-header .thumbnail,
.player-header .team-thumbnail {
  flex: none;
  width: 200px;
  height: 200px;
}
.player-header .thumbnail img,
.player-header .team-thumbnail img {
  border-radius: var(--radius);
}
@media (max-width: 899.98px) {
  .player-header .thumbnail,
.player-header .team-thumbnail {
    width: 140px;
    height: 140px;
  }
}

.player-header .thumbnail {
  width: 220px;
  height: 220px;
}

.player-header .information {
  min-width: 0;
  flex: 0 1 auto;
}

.name-first,
.name-last {
  display: inline;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.5px;
  font-family: var(--font-serif);
}

.name-first {
  font-weight: 700;
}

.name-last {
  font-weight: 300;
}

.name-team {
  margin-top: var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-secondary);
}
.name-team .heavy {
  font-weight: 700;
  color: var(--sys-color-text-primary);
}
.name-team .slash {
  color: var(--sys-color-border-strong);
  padding: 0 var(--space-1);
}
.name-team .other {
  color: var(--sys-color-text-secondary);
}

icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.flag {
  --flag-bg: var(--sys-marker-neutral-bg);
  --flag-ink: var(--sys-marker-neutral-text);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-small);
  background: var(--flag-bg);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--flag-ink);
}
.flag name {
  display: block;
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.09em;
  color: var(--flag-ink);
}
.flag a {
  color: inherit;
}

.flag-majors {
  --flag-bg: var(--sys-level-majors);
  --flag-ink: var(--sys-level-majors-ink);
}

.flag-minors {
  --flag-bg: var(--sys-level-minors);
  --flag-ink: var(--sys-level-minors-ink);
}

.flag-freeagent {
  --flag-bg: var(--sys-level-freeagent);
  --flag-ink: var(--sys-level-freeagent-ink);
}

.flag-dead {
  --flag-bg: var(--sys-level-dead);
  --flag-ink: var(--sys-level-dead-ink);
  box-shadow: inset 0 0 0 1px var(--sys-level-dead-edge);
}

.flag-disable,
.flag-disabled,
.flag-suspended {
  --flag-bg: var(--sys-level-injured);
  --flag-ink: var(--sys-level-injured-ink);
}

.flag-position {
  --flag-bg: var(--sys-marker-rated-bg);
  --flag-ink: var(--sys-marker-rated-text);
}

.flag-dfa,
.flag-dfaprotected,
.flag-dfaw {
  --flag-bg: var(--sys-marker-dfa-bg);
  --flag-ink: var(--sys-marker-dfa-text);
}

.flag-vintage {
  --flag-bg: var(--sys-marker-vintage-bg);
  --flag-ink: var(--sys-marker-vintage-text);
}

.flag-rule6 {
  --flag-bg: var(--sys-color-warning-subtle);
  --flag-ink: var(--sys-color-warning-text);
}

.flag-original,
.flag-usage {
  --flag-bg: var(--sys-marker-kind-bg);
  --flag-ink: var(--sys-marker-kind-text);
}

.player-header .details {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.player-header .outside {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.player-header .outside a {
  margin-right: var(--space-3);
}

.player-header .outside + .button-row {
  margin-top: var(--space-4);
}

.titles {
  --pennant-step: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 90px;
  margin-bottom: var(--space-4);
  justify-content: safe center;
}

.pennant-wrap {
  position: relative;
  flex: none;
  width: var(--pennant-step);
  height: 90px;
}

.pennant-wrap:last-child {
  width: 70px;
}

.team-pennant {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 90px;
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
}
.team-pennant .title {
  font-weight: 600;
  padding-top: 6px;
}
.team-pennant .year {
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.3px;
}
.team-pennant .championship,
.team-pennant .legend,
.team-pennant .league,
.team-pennant .division,
.team-pennant .wildcard {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}
.team-pennant .championship {
  background-image: url(/objects/images/pennant-championship.png);
}
.team-pennant .legend {
  background-image: url(/objects/images/pennant-legend.png);
}
.team-pennant .league {
  background-image: url(/objects/images/pennant-league.png);
}
.team-pennant .division {
  background-image: url(/objects/images/pennant-division.png);
}
.team-pennant .wildcard {
  background-image: url(/objects/images/pennant-wildcard.png);
}

.subnavigation {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  gap: var(--space-5);
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--sys-color-border);
}
.subnavigation[data-overflow-start] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px);
  mask-image: linear-gradient(to right, transparent, #000 48px);
}
.subnavigation[data-overflow-end] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.subnavigation[data-overflow-start][data-overflow-end] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.subnavigation::-webkit-scrollbar {
  display: none;
}
.subnavigation ul {
  display: contents;
  margin: 0;
  padding: 0;
}
.subnavigation li {
  list-style: none;
}
.subnavigation a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-touch);
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}
.subnavigation a [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: calc(var(--icon-size) * 0.8);
  line-height: 1;
}
.subnavigation a:hover {
  color: var(--sys-color-text-primary);
  box-shadow: inset 0 -2px 0 var(--sys-color-border-strong);
  text-decoration: none;
}
.subnavigation a.on {
  color: var(--sys-color-primary);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--sys-color-primary);
}

.hd3 {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  padding: var(--space-1) 0;
  margin-bottom: var(--space-2);
}

.team-nickname,
.player-last {
  display: inline-block;
  margin-bottom: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.5px;
  font-weight: 300;
}

.team-record {
  color: var(--sys-color-text-secondary);
}

.navigation-expand {
  position: relative;
  margin-left: calc(var(--card-pad) * -1);
  margin-right: calc(var(--card-pad) * -1);
  margin-bottom: var(--space-4);
}

.card {
  min-width: 0;
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background: var(--sys-color-surface);
  border-bottom-width: var(--elevation-overlay);
  --surface-current: var(--sys-color-surface-solid);
  margin-bottom: var(--space-5);
}

.layout-grid > .card,
.layout-rail > .card,
.layout-rail-main > .card,
.layout-rail-side > .card,
.layout-stack > .card {
  margin-bottom: 0;
}

.card-overline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--card-pad) var(--card-pad) 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sys-color-text-muted);
}

.card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.card-status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.card-status-success {
  color: var(--sys-color-success-text);
}

.card-status-warning {
  color: var(--sys-color-warning-text);
}

.card-status-error {
  color: var(--sys-color-error-text);
}

.card-status-info {
  color: var(--sys-color-info-text);
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--card-pad) var(--card-pad) 0;
}

.card-overline + .card-head {
  padding-top: var(--space-2);
}

.card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
}

.card-subtitle {
  padding: var(--space-1) var(--card-pad) 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.card-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.card-body {
  padding: var(--card-pad);
}

.card-head + .card-body,
.card-subtitle + .card-body {
  padding-top: var(--space-3);
}

.card-section-title {
  margin-bottom: var(--space-2);
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.card-section {
  padding: var(--space-4);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius-small);
}

.card-section + .card-section {
  margin-top: var(--space-4);
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--card-pad);
  border-top: 1px solid var(--sys-color-border);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0 var(--card-pad) var(--card-pad);
}

.card-body + .card-actions {
  padding-top: 0;
}

.card-foot + .card-actions {
  padding-top: var(--card-pad);
}

.card-body .card-actions {
  padding: 0;
  margin-top: var(--space-4);
}

.card-actions-label {
  padding: 0 var(--card-pad) var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
}

.card-divider {
  height: 1px;
  margin: var(--space-4) 0;
  border: 0;
  background: var(--sys-color-border);
}

.card-head .additional {
  display: inline;
  margin-left: var(--space-2);
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sys-color-text-muted);
}

.card-head-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: calc(var(--icon-size) * 0.8);
  line-height: 1;
  color: var(--sys-color-primary);
}

.card-section-title {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  padding: var(--space-5) 0 var(--space-2);
}
.card-section-title:first-child {
  padding-top: 0;
}

[data-surface=ghost] {
  background: transparent;
  border-color: transparent;
}

[data-surface=grouped] {
  background: var(--sys-surface-grouped);
  --surface-current: var(--sys-surface-grouped);
}

[data-surface=elevated] {
  background: var(--sys-surface-elevated);
  --surface-current: var(--sys-surface-elevated);
}

[data-surface=secondary-tint] {
  background: var(--sys-surface-secondary-tint);
  --surface-current: var(--sys-surface-secondary-tint);
}

[data-surface=primary-tint] {
  background: var(--sys-surface-primary-tint);
  --surface-current: var(--sys-surface-primary-tint);
}

[data-surface=inverse] {
  background: #1A2535;
  color: #F5F7FA;
  border-color: #2A3440;
  --sys-color-text-primary: #F5F7FA;
  --sys-color-text-secondary: #8F9AA7;
  --sys-color-text-muted: #7F8D99;
  --sys-color-border: #2A3440;
  --sys-color-link: #6FC3FF;
  --focus-color: #FFFFFF;
  --surface-current: #1A2535;
  --table-head-bg: rgba(255, 255, 255, 0.03);
  --table-head-text: #8F9AA7;
  --table-rule-top: #556A82;
  --table-rule-head: #404f61;
  --table-rule-row: #2A3440;
  --table-total-bg: #202933;
  --table-vintage-bg: #212f2f;
  --table-vintage-active-bg: #293c37;
}

[data-surface=textured],
[data-surface=homeplate] {
  background-color: var(--sys-surface-textured);
  background-image: repeating-linear-gradient(45deg, transparent 0 12px, var(--sys-surface-texture-ink) 12px 13px, transparent 13px 28px), repeating-linear-gradient(-45deg, transparent 0 12px, var(--sys-surface-texture-ink) 12px 13px, transparent 13px 28px);
}

[data-surface=homeplate] {
  background-color: var(--sys-surface-homeplate);
}

[data-surface=secondary-tint] {
  --sys-color-text-muted: #5A554A;
  --sys-color-link: #005A89;
}

[data-theme=dark] [data-surface=grouped] {
  --sys-color-text-muted: #7B8A96;
}
[data-theme=dark] [data-surface=elevated],
[data-theme=dark] [data-surface=textured] {
  --sys-color-text-muted: #7F8D99;
}
[data-theme=dark] [data-surface=secondary-tint] {
  --sys-color-text-muted: #7C8B97;
}
[data-theme=dark] [data-surface=homeplate] {
  --sys-color-text-muted: #919DA8;
  --sys-color-text-secondary: #919CA9;
}

[data-elevation] {
  border: 1px solid var(--sys-color-border);
}

[data-elevation=flat] {
  border-bottom-width: var(--elevation-flat);
}

[data-elevation=surface] {
  border-bottom-width: var(--elevation-surface);
}

[data-elevation=overlay] {
  border-bottom-width: var(--elevation-overlay);
}

[data-elevation=modal] {
  border-bottom-width: var(--elevation-modal);
}

[data-elevation=blocking] {
  border-bottom-width: var(--elevation-blocking);
}

[data-surface=primary-tint][data-elevation=overlay] {
  border-bottom-color: var(--sys-color-primary);
}

.card-mini-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-flat);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sys-color-border);
}
@media (max-width: 599.98px) {
  .card-mini-container {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .card-mini-container .card-mini,
.card-mini-container .board {
    flex: 0 0 auto;
    min-width: 96px;
  }
}

.card-mini {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--sys-surface-elevated);
  text-align: center;
}
.card-mini name {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--sys-color-text-muted);
}
.card-mini data {
  display: inline;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-primary);
}
.card-mini sub {
  display: inline;
  margin-left: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 400;
  vertical-align: baseline;
  color: var(--sys-color-text-muted);
}

.card-mini-container .x2 {
  grid-column: span 2;
}

.board {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--sys-surface-elevated);
  text-align: center;
}
.board .value {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-primary);
}
.board .label {
  margin-top: 2px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--sys-color-text-muted);
}
.board .rank {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.board {
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-flat);
  border-radius: var(--radius);
}

.card-mini-container > .board {
  border: 0;
  border-radius: 0;
}

.board.funds-available .value {
  color: var(--sys-color-success-text);
}

.team-ballpark {
  position: relative;
  min-height: 342px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius);
  background-repeat: no-repeat;
  background-position: center -240px;
  background-color: var(--sys-surface-homeplate);
}
.team-ballpark .pos {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: var(--space-1);
  border-radius: var(--radius-small);
  background-color: rgba(0, 0, 0, 0.8);
  color: #FFFFFF;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  line-height: 1;
}
.team-ballpark .pos-ca {
  top: 86%;
  left: 50%;
}
.team-ballpark .pos-1b {
  top: 60%;
  left: 85%;
}
.team-ballpark .pos-2b {
  top: 46%;
  left: 64%;
}
.team-ballpark .pos-3b {
  top: 60%;
  left: 15%;
}
.team-ballpark .pos-ss {
  top: 46%;
  left: 36%;
}
.team-ballpark .pos-lf {
  top: 23%;
  left: 20%;
}
.team-ballpark .pos-cf {
  top: 18%;
  left: 50%;
}
.team-ballpark .pos-rf {
  top: 23%;
  left: 80%;
}
.team-ballpark .player-circle-mini {
  width: 32px;
  height: 32px;
  margin-bottom: 3px;
}
.team-ballpark .field-rating {
  color: rgba(255, 255, 255, 0.7);
  padding-bottom: 2px;
}
.team-ballpark .field-name {
  display: none;
}
@media (min-width: 1200px) {
  .team-ballpark .field-name {
    display: block;
  }
}
.team-ballpark .excellent {
  background-color: rgba(247, 183, 49, 0.9);
  color: #222222;
}
.team-ballpark .excellent .field-rating {
  color: rgba(34, 34, 34, 0.75);
}
.team-ballpark .unrated {
  background-color: rgba(109, 128, 149, 0.9);
}

.fielding-section-note {
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.uniform {
  position: relative;
  width: 100%;
}
.uniform .baseline {
  position: relative;
  width: 100%;
}
.uniform .baseline img {
  display: block;
  width: 100%;
  height: auto;
}
.uniform .pinstripes,
.uniform .numbers,
.uniform .custom {
  position: absolute;
  inset: 0;
  display: block;
}
.uniform .pinstripes img,
.uniform .numbers img,
.uniform .custom img {
  display: block;
  width: 100%;
  height: auto;
}

.pos-mate {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.pos-mate:hover {
  background-color: var(--sys-color-hover);
}
.pos-mate .player-circle-mini {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
}

.pos-mate-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.pos-mate-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-primary);
}

.pos-mate-pos {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.teammates a {
  display: block;
  padding: var(--space-1) var(--space-4);
}

.dfa-timeline-event {
  display: flex;
  align-items: center;
  padding: var(--space-3);
}
.dfa-timeline-event.year-change {
  border-top: 1px solid var(--sys-color-border);
}

.event-year {
  flex-shrink: 0;
  width: 60px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-primary);
}

.event-icon {
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  font-size: 18px;
  color: var(--sys-color-text-secondary);
}

.event-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-primary);
}

.name-nick {
  display: inline-block;
  margin: 0 var(--space-1) var(--space-2) 0;
  padding: 3px var(--space-2);
  border-radius: var(--radius-small);
  background-color: var(--sys-marker-neutral-bg);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-marker-neutral-text);
}
.name-nick .light {
  color: inherit;
  opacity: 0.7;
}

.player-thumbs {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 6px solid var(--sys-surface-elevated);
  border-radius: var(--radius);
  background-color: var(--sys-surface-elevated);
}
.player-thumbs img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}
.player-thumbs img.is-on {
  opacity: 1;
}
.player-thumbs img:only-child {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .player-thumbs img {
    transition: none;
  }
}
.watchlist-open-icon {
  height: auto;
  margin: 0;
  padding: var(--space-1) var(--space-2);
}

.stat-icon-link {
  color: var(--sys-color-text-muted);
}
.stat-icon-link .fa-duotone {
  display: none;
}
.stat-icon-link:hover {
  color: var(--sys-color-link);
}
.stat-icon-link:hover .fa-light {
  display: none;
}
.stat-icon-link:hover .fa-duotone {
  display: inline-block;
}

.inline-form {
  display: inline;
}

.footnote {
  display: inline-block;
  margin: var(--space-1) 0;
  padding-left: var(--space-2);
  border-left: 6px solid var(--sys-color-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.hitchart-legend,
.hitchart-wrap {
  --hc-single: #FFFFFF;
  --hc-double: #4A90E2;
  --hc-triple: #F5A623;
  --hc-homerun: #D0021B;
  --hc-out: #9B9B9B;
  --hc-edge: #333333;
}

.hitchart-mini svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.hitchart-mini .el-pts {
  fill: var(--sys-color-primary);
}

.hitchart-layout {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1200px) {
  .hitchart-layout {
    grid-template-columns: minmax(0, auto) minmax(220px, 1fr);
  }
}

.hitchart-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 0;
}
.hitchart-wrap svg {
  max-width: 100%;
  height: auto;
}

.hitchart-figures {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.hitchart-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.hitchart-legend .hc-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-secondary);
}
@media (max-width: 1199.98px) {
  .hitchart-legend {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }
  .hitchart-legend .hc-count {
    margin-left: var(--space-1);
  }
}
.hitchart-legend .hc-key {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hitchart-legend .hc-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--hc-edge);
  border-radius: 50%;
}
.hitchart-legend .hc-single {
  background: var(--hc-single);
}
.hitchart-legend .hc-double {
  background: var(--hc-double);
}
.hitchart-legend .hc-triple {
  background: var(--hc-triple);
}
.hitchart-legend .hc-homerun {
  background: var(--hc-homerun);
}
.hitchart-legend .hc-out {
  background: var(--hc-out);
}

.grid {
  fill: none;
  stroke: #005E20;
  stroke-width: 1;
}

.hitchart-spray-title {
  margin-bottom: var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-secondary);
}

.hitchart-spray-list {
  margin: 0;
}
.hitchart-spray-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.hitchart-spray-list dt {
  color: var(--sys-color-text-secondary);
}
.hitchart-spray-list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-primary);
}

.hitchart-spray-total {
  margin-top: var(--space-1);
  border-top: 1px solid var(--sys-color-border);
}

.banner-freeagent {
  clear: both;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background-color: var(--sys-surface-grouped);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.rank-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.leaders-toolbar {
  align-items: flex-start;
  row-gap: var(--space-3);
}

.leaders-toolbar-left {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.leaders-toolbar-right {
  flex: 0 0 auto;
}

.rank-filters {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rank-filters-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.rank-filter,
.rank-select {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px solid var(--sys-color-border-strong);
  border-radius: var(--radius-pill);
  background-color: transparent;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  line-height: 18px;
  color: var(--sys-color-text-secondary);
  text-decoration: none;
}

.rank-select {
  width: auto;
  height: auto;
  margin-bottom: 0;
  font-family: var(--font-sans);
}

.rank-filter:hover {
  color: var(--sys-color-text-primary);
}

.rank-filter.active {
  background-color: var(--sys-color-primary);
  border-color: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
}

.leaders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 600px) {
  .leaders-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .leaders-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.leaders-grid > .card,
.leaders-grid > .sheet {
  margin-bottom: 0;
}
.leaders-grid .leaders-grid-break {
  grid-column: 1/-1;
  margin-bottom: 0;
}
.leaders-grid .leaders-rank {
  width: 15px;
}
.leaders-grid .leaders-lead {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.leaders-grid .leaders-lead-thumb {
  flex: none;
  width: 50px;
}
.leaders-grid .leaders-lead-name,
.leaders-grid .leaders-lead-total {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}
.leaders-grid .leaders-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--sys-color-text-muted);
}

.leaders-multi {
  margin-left: 1px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  line-height: 0;
  color: var(--sys-color-text-muted);
}

.filter-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius);
  background-color: var(--sys-surface-primary-tint);
}
.filter-wrap form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  width: 100%;
}
.filter-wrap .fl {
  float: none;
  display: flex;
  flex-direction: column;
  margin-right: 0;
}
.filter-wrap .fl:has(.fl) {
  display: contents;
}
.filter-wrap .sp {
  margin-right: 0;
}
.filter-wrap .cl {
  display: none;
}
.filter-wrap label,
.filter-wrap .light {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--sys-color-text-secondary);
}
.filter-wrap select,
.filter-wrap input[type=text],
.filter-wrap input[type=search] {
  margin-bottom: 0;
}

.ps-rank {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  text-align: center;
  color: var(--sys-color-text-primary);
}

.ps-rank-overall {
  position: relative;
  display: inline-block;
}

.ps-rank-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-primary);
}

.ps-rank-wreath .fa-wreath-laurel {
  font-size: 34px;
  color: #DAA520;
}

.ps-rank-2 .fa-wreath-laurel,
.ps-rank-3 .fa-wreath-laurel {
  color: var(--sys-color-text-muted);
}

.ps-city {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  margin-bottom: 3px;
  color: var(--sys-color-text-primary);
}

.ps-nickname {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  margin-bottom: 3px;
  color: var(--sys-color-text-primary);
}

.ps-prev {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-secondary);
}

.ps-prev-up {
  color: var(--sys-color-success-text);
}

.ps-prev-down {
  color: var(--sys-color-error-text);
}

.ps-change-number {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1;
  font-weight: 600;
}

.powerpoll-days {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  color: var(--sys-color-text-muted);
}

.stars {
  color: var(--sys-color-warning);
}

.review-section + .review-section {
  margin-top: var(--space-5);
}

.layout-rail + .review-section {
  margin-top: var(--space-7);
}

.movie-grid {
  display: grid;
  column-gap: var(--grid-gap);
  row-gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  align-items: start;
}
@media (min-width: 1536px) {
  .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}

.movie-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.movie-tile-poster {
  position: relative;
  display: block;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-elevated);
}
.movie-tile-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie-tile-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: var(--sys-color-text-muted);
}

.movie-tile-seen {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  border-radius: var(--radius-small);
  background-color: #1A2535;
  color: #F5F7FA;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.movie-tile-body {
  padding-top: var(--space-2);
  text-align: center;
}

.movie-tile-markers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}
.movie-tile-markers > .marker {
  margin-right: 0;
}

.movie-tile-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
}
.movie-tile-name a {
  color: var(--sys-color-text-primary);
  text-decoration: none;
}
.movie-tile-name a:hover {
  color: var(--sys-color-link);
  text-decoration: underline;
}

.movie-tile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.movie-tile-stars {
  line-height: 1;
  font-size: 14px;
}

.movie-tile-reviews {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.movie-tile-note {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.movie-tile-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.movie-tile-year {
  font-variant-numeric: tabular-nums;
}

.movie-tile-action a {
  text-decoration: none;
  white-space: nowrap;
}
.movie-tile-action a:hover {
  text-decoration: underline;
}

.movie-tile-saved {
  font-style: italic;
}

.movie-list {
  display: flex;
  flex-direction: column;
}

.movie-row {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--sys-color-border);
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas: "poster main" "score  score";
}
.movie-row:first-child {
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 900px) {
  .movie-row {
    gap: var(--space-5);
    grid-template-columns: 104px minmax(0, 1fr) 108px;
    grid-template-areas: "poster main score";
    align-items: start;
  }
}

.movie-row-poster {
  grid-area: poster;
  display: block;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-elevated);
}
.movie-row-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie-row-main {
  grid-area: main;
  min-width: 0;
}

.movie-row-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
}
.movie-row-name a {
  color: var(--sys-color-text-primary);
  text-decoration: none;
}
.movie-row-name a:hover {
  color: var(--sys-color-link);
  text-decoration: underline;
}

.movie-row-rank {
  margin-right: var(--space-2);
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-muted);
}

.movie-row-year {
  margin-left: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--sys-color-text-muted);
}

.movie-row-quote {
  margin: var(--space-3) 0 0;
  max-width: 62ch;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--sys-color-text-primary);
}
.movie-row-quote a {
  color: inherit;
}

.movie-row-description {
  margin-top: var(--space-3);
  max-width: 72ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.movie-row-reviewers,
.movie-row-invite {
  margin-top: var(--space-2);
  margin-bottom: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.movie-row-score {
  grid-area: score;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
@media (min-width: 900px) {
  .movie-row-score {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 0;
  }
}

.movie-row-value {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.movie-row-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.review-pick {
  margin: 0;
}

.review-pick-quote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--sys-color-text-primary);
}

.review-pick-by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.review-pick-poster {
  display: block;
  flex: none;
  width: 32px;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--sys-surface-grouped);
}
.review-pick-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-pick-action {
  margin-top: var(--space-4);
}

.movie-watch-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.movie-watch-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.movie-watch-poster {
  display: block;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-grouped);
}
.movie-watch-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie-watch-detail {
  min-width: 0;
}

.movie-watch-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}
.movie-watch-name:hover {
  text-decoration: underline;
}

.movie-owner-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.movie-owner-cell img {
  width: 36px;
  height: 36px;
  border-radius: var(--avatar-radius);
  object-fit: cover;
}

.movie-strip {
  display: flex;
  gap: var(--space-2);
}

.movie-strip-item {
  display: block;
  flex: none;
  width: 32px;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: 2px;
}
.movie-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-toolbar {
  margin-bottom: var(--space-6);
}

.review-counts {
  flex: 0 1 auto;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.review-counts strong {
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-primary);
}

.title-head {
  margin-bottom: var(--space-6);
}

.title-backdrop {
  height: 170px;
  border-radius: var(--radius);
  background-color: var(--sys-surface-textured);
  background-image: var(--hero-art, none);
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
}
@media (min-width: 900px) {
  .title-backdrop {
    height: 280px;
  }
}

.title-head-body {
  --title-overlap: 70px;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  margin-top: calc(var(--title-overlap) * -1);
  padding: 0 var(--space-4);
}
@media (min-width: 900px) {
  .title-head-body {
    --title-overlap: 150px;
    grid-template-columns: clamp(200px, 24%, 320px) minmax(0, 1fr);
    gap: var(--space-6);
    padding: 0 var(--space-6);
  }
}

.title-head-poster {
  align-self: start;
  width: 120px;
  padding: var(--space-1);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-surface-solid);
  border: 1px solid var(--sys-color-border);
}
@media (min-width: 900px) {
  .title-head-poster {
    width: 100%;
  }
}
.title-head-poster img {
  display: block;
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 2px;
}

.title-head-text {
  min-width: 0;
}
@media (min-width: 900px) {
  .title-head-text {
    padding-top: var(--title-overlap);
  }
}

.title-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.5px;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .title-name {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -1px;
  }
}

.title-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.title-rating-stars {
  font-size: 22px;
  line-height: 1;
}

.title-rating-count {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.title-facts {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.title-watch {
  margin-top: var(--space-5);
}
.title-watch a {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.title-watch a:hover {
  background-color: var(--sys-color-link);
  filter: brightness(0.92);
}

.title-synopsis {
  margin-top: var(--space-4);
  max-width: 68ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.title-genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.title-genres > .marker {
  margin-right: 0;
}

.title-cast,
.title-trailers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.title-cast-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.title-cast-face {
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--sys-surface-grouped);
}
.title-cast-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title-cast-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--sys-color-text-muted);
}

.title-cast-who {
  min-width: 0;
}

.title-cast-name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}

.title-cast-part {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}

.title-trailer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.title-trailer-thumb {
  position: relative;
  flex: none;
  display: block;
  width: 72px;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-grouped);
}
.title-trailer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.title-trailer-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.title-trailer-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
}
.title-trailer-name:hover {
  text-decoration: underline;
}

.title-reviews {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  .title-reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .title-reviews {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.title-review {
  --card-pad: var(--space-4);
}

.title-review-by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.title-review-face {
  flex: none;
  display: block;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: var(--avatar-radius);
  background-color: var(--sys-surface-grouped);
}
.title-review-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title-review-who {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}
.title-review-who a {
  text-decoration: none;
}
.title-review-who a:hover {
  text-decoration: underline;
}

.title-review-when {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}

.title-review-score {
  margin-left: auto;
  line-height: 1;
  font-size: 18px;
}

.title-review-words {
  margin: var(--space-3) 0 0;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--sys-color-text-primary);
}

.title-review-parts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--sys-color-border);
}
.title-review-parts > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.title-review-parts dt {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}
.title-review-parts dd {
  margin: 0;
  line-height: 1;
  font-size: 12px;
}

.title-review-remove {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}
.title-review-remove:hover {
  color: var(--sys-color-error-text);
}

.title-score-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

.movie-star-rating {
  display: inline-flex;
  gap: var(--space-1);
  cursor: pointer;
  font-size: 22px;
  color: var(--sys-color-warning);
}
.movie-star-rating span {
  transition: transform 0.15s ease;
}
.movie-star-rating span:hover {
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .movie-star-rating span {
    transition: none;
  }

  .movie-star-rating span:hover {
    transform: none;
  }
}
.bucket-3 {
  background-color: var(--sys-surface-primary-tint);
}

.todolist {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.team-edit {
  display: none;
}

.bucket-4 {
  background-color: var(--sys-color-surface);
}

.scripts {
  margin-bottom: var(--space-5);
}
.scripts a {
  font-weight: 600;
}
.scripts p {
  margin-top: var(--space-1);
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.scripts:last-child {
  margin-bottom: 0;
}

.module-row.row-hidden {
  opacity: 0.5;
}
.module-row.row-display td {
  background-color: var(--sys-surface-grouped);
}
.module-row.row-missing-file td {
  background-color: var(--sys-color-error-subtle);
}
.module-row.row-missing-file td:first-child {
  border-left: 3px solid var(--sys-color-error);
}

.module-path,
.display-path {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.module-path {
  color: var(--sys-color-primary);
}

.display-path {
  color: var(--sys-color-text-muted);
}

.file-exists {
  font-weight: 700;
  color: var(--sys-color-success-text);
}

.file-missing {
  font-weight: 700;
  color: var(--sys-color-error-text);
}

.flag-hide,
.flag-hide-nav,
.flag-league,
.flag-flip,
.flag-head,
.flag-head-no {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  margin: 0 2px;
  padding: 0 3px;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.flag-hide,
.flag-hide-nav {
  background-color: var(--sys-color-error-subtle);
  color: var(--sys-color-error-text);
}

.flag-league {
  background-color: var(--sys-color-success-subtle);
  color: var(--sys-color-success-text);
}

.flag-flip {
  background-color: var(--sys-color-warning-subtle);
  color: var(--sys-color-warning-text);
}

.flag-head,
.flag-head-no {
  background-color: var(--sys-color-info-subtle);
  color: var(--sys-color-info-text);
}

.flag-hide-nav {
  border-color: var(--sys-color-error-text);
}

.flag-head-no {
  border-color: var(--sys-color-info-text);
}

.badge-blue,
.badge-green,
.badge-gray,
.badge-dark,
.badge-success,
.badge-muted {
  display: inline-block;
  padding: 3px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-blue {
  background-color: var(--sys-color-info-subtle);
  color: var(--sys-color-info-text);
}

.badge-green,
.badge-success {
  background-color: var(--sys-color-success-subtle);
  color: var(--sys-color-success-text);
}

.badge-gray,
.badge-muted {
  background-color: var(--sys-color-selected);
  color: var(--sys-color-text-secondary);
}

.badge-dark {
  background-color: var(--sys-color-selected);
  border-color: var(--sys-color-border-strong);
  color: var(--sys-color-text-primary);
}

.data-table th {
  padding: var(--space-2);
  background-color: var(--table-head-bg);
  font-weight: 600;
  text-align: left;
}
.data-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--table-rule-row);
}
.data-table tr:hover {
  background-color: var(--sys-color-hover);
}

.module-row .fancy {
  margin-bottom: 0 !important;
}

.btn-edit {
  display: inline-block;
  padding: 3px var(--space-2);
  border: 1px solid var(--sys-color-border-strong);
  border-radius: var(--radius-small);
  background-color: transparent;
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  text-decoration: none;
}
.btn-edit:hover {
  background-color: var(--sys-color-hover);
}

.form-description {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.form-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-form,
.dfa-change {
  display: contents;
}

.ballpark-highlight {
  background-color: var(--sys-color-highlight);
}

.ballpark-result,
.dfa-result {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.ballpark-result:not(:empty),
.dfa-result:not(:empty) {
  padding: var(--space-1) var(--space-2);
}

.ballpark-result[data-state] {
  display: inline-block;
  border-radius: var(--radius-small);
  font-weight: 600;
}

.ballpark-result[data-state=saving] {
  background-color: var(--sys-color-selected);
  color: var(--sys-color-text-secondary);
}

.ballpark-result[data-state=saved] {
  background-color: var(--sys-color-success-subtle);
  color: var(--sys-color-success-text);
}

.ballpark-result[data-state=error] {
  background-color: var(--sys-color-error-subtle);
  color: var(--sys-color-error-text);
}

.ballpark-table th:nth-child(2) {
  width: 90px;
}
.ballpark-table th:nth-child(4) {
  width: 110px;
}
.ballpark-table th:nth-child(5) {
  width: 140px;
}
.ballpark-table th:nth-child(6) {
  width: 40px;
}
.ballpark-table .field {
  margin-bottom: 0;
}

.ballpark-remove {
  color: var(--sys-color-text-secondary);
  text-decoration: none;
}
.ballpark-remove:hover {
  color: var(--sys-color-error-text);
}
.ballpark-remove.is-locked {
  color: var(--sys-color-text-muted);
  cursor: not-allowed;
}

.dfa-t1,
.dfa-t2,
.dfa-t3 {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-thumb-col,
.admin-owner-thumb {
  width: 40px;
}
.admin-thumb-col [class*=owner-thumb-],
.admin-owner-thumb [class*=owner-thumb-] {
  margin: 0;
}

.dues-paid {
  color: var(--sys-color-success-text);
  font-weight: 600;
}

.dues-unpaid {
  color: var(--sys-color-error-text);
  font-weight: 600;
}

.team-prime {
  color: var(--sys-color-text-muted);
}

.team-owner-line {
  margin-bottom: var(--space-2);
}

.draft-articles {
  margin: 0;
  padding-left: var(--space-5);
  list-style: disc;
}

.admin-setting,
.trade-need {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--sys-color-border);
}
.admin-setting:first-child,
.trade-need:first-child {
  border-top: 0;
}
.admin-setting > .choice,
.trade-need > .choice {
  flex: 1 1 320px;
  margin: 0;
}

.admin-setting-extra {
  flex: 0 1 220px;
  margin-left: auto;
}
.admin-setting-extra label {
  display: block;
}
.admin-setting-extra .field,
.admin-setting-extra .input {
  width: 100%;
}

.admin-field label {
  display: block;
}
.admin-field textarea {
  min-height: 180px;
}

.admin-block {
  margin: var(--space-4) 0;
}

.admin-setting[data-saved],
.admin-field[data-saved] {
  position: relative;
}
.admin-setting[data-saved]::after,
.admin-field[data-saved]::after {
  position: absolute;
  right: 0;
  top: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-small);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
}
.admin-setting[data-saved][data-saved=saving]::after,
.admin-field[data-saved][data-saved=saving]::after {
  content: "Saving";
  background-color: var(--sys-color-selected);
  color: var(--sys-color-text-secondary);
}
.admin-setting[data-saved][data-saved=saved]::after,
.admin-field[data-saved][data-saved=saved]::after {
  content: "Saved";
  background-color: var(--sys-color-success-subtle);
  color: var(--sys-color-success-text);
}
.admin-setting[data-saved][data-saved=error]::after,
.admin-field[data-saved][data-saved=error]::after {
  content: attr(data-saved-note);
  background-color: var(--sys-color-error-subtle);
  color: var(--sys-color-error-text);
  max-width: 320px;
  text-align: right;
}

.admin-field[data-saved]::after {
  top: 0;
}

.modules-table {
  width: 100%;
}
.modules-table th:nth-child(1) {
  width: 40px;
}
.modules-table th:nth-child(2),
.modules-table th:nth-child(3) {
  width: 120px;
}
.modules-table th:nth-child(4) {
  width: 40px;
}
.modules-table th:nth-child(5),
.modules-table th:nth-child(6) {
  width: 150px;
}
.modules-table th:nth-child(7) {
  width: 200px;
}
.modules-table th:nth-child(8) {
  width: 60px;
}
.modules-table th:nth-child(9),
.modules-table th:nth-child(10) {
  width: 50px;
}
.modules-table th:nth-child(11) {
  width: 80px;
}
.modules-table th:nth-child(12) {
  width: 100px;
}
.modules-table td:nth-child(4),
.modules-table td:nth-child(8),
.modules-table td:nth-child(9),
.modules-table td:nth-child(10),
.modules-table td:nth-child(11) {
  text-align: center;
}

.filter-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.filter-choices .choice {
  margin: 0;
}

.waitinglist-status {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-small);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  white-space: nowrap;
}

.waitinglist-status-0 {
  background-color: var(--sys-color-warning-subtle);
  color: var(--sys-color-warning-text);
}

.waitinglist-status-1 {
  background-color: var(--sys-color-success-subtle);
  color: var(--sys-color-success-text);
}

.waitinglist-status-2 {
  background-color: var(--sys-color-error-subtle);
  color: var(--sys-color-error-text);
}

.waitinglist-note {
  min-width: 180px;
  margin-bottom: 0;
}

.draft-status-key {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
  list-style: disc;
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.waitinglist-empty td {
  text-align: center;
  color: var(--sys-color-text-secondary);
}

.draft-status-actions {
  white-space: nowrap;
}

.content-line {
  margin-top: var(--space-2);
}

.content-answer {
  margin-top: var(--space-2);
  padding-left: var(--space-5);
}

.content-meta {
  margin-top: var(--space-2);
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.content-action {
  text-align: center;
}

.queue-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.queue-body {
  flex: 1 1 auto;
  min-width: 0;
}

.queue-remove {
  flex: 0 0 auto;
  color: var(--sys-color-text-secondary);
  text-decoration: none;
}
.queue-remove:hover {
  color: var(--sys-color-error-text);
}

.filter-count {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  height: var(--control-h);
  padding: 0 var(--control-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.button:hover {
  background-image: linear-gradient(var(--sys-color-press), var(--sys-color-press));
}
.button:active {
  background-image: linear-gradient(var(--sys-color-press), var(--sys-color-press)), linear-gradient(var(--sys-color-press), var(--sys-color-press));
}
.button:disabled, .button[aria-disabled=true] {
  border-color: transparent;
  background: var(--sys-color-disabled-button);
  color: var(--sys-color-disabled-text);
  cursor: not-allowed;
}

.button-primary {
  background-color: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
}

.button-secondary {
  background-color: var(--sys-color-secondary);
  color: var(--sys-color-text-primary);
}

.button-outline {
  border-color: var(--sys-color-primary);
  color: var(--sys-color-primary);
}

.button-outline:disabled,
.button-outline[aria-disabled=true] {
  border-color: var(--sys-color-disabled-border);
}

.button-slim {
  height: calc(var(--control-h) - var(--control-pad-y));
  padding: 0 calc(var(--control-pad-x) / 2);
  gap: var(--space-1);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.button-row-fill > .button {
  flex: 1 1 0;
}

.form-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.form-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.form-stack > input[type=hidden],
.form-field > input[type=hidden],
.button-row > input[type=hidden] {
  display: none;
}

.form-field > .md-toolbar {
  margin-bottom: calc(var(--space-2) * -1);
}

.form-label,
fieldset.large .break > label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--sys-color-text-primary);
}

.form-overline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--sys-color-text-secondary);
  text-transform: uppercase;
}

.form-required {
  margin-left: 2px;
  color: var(--sys-color-error-text);
}

.form-optional {
  margin-left: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 400;
  color: var(--sys-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-help,
fieldset.large .break > label em.dim {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.form-error {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-error-text);
}

.input {
  display: block;
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--control-pad-x);
  border: 1px solid var(--sys-color-border-strong);
  border-radius: var(--radius);
  background-color: var(--sys-color-input-bg);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-size: 16px;
  appearance: none;
}
@media (min-width: 900px) {
  .input {
    font-size: 15px;
  }
}
.input::placeholder {
  color: var(--sys-color-text-muted);
  opacity: 1;
}
.input:focus {
  border-color: var(--sys-color-primary);
}
.input:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.input[aria-invalid=true] {
  border-color: var(--sys-color-error);
  color: var(--sys-color-error-text);
}
.input:disabled {
  border-color: var(--sys-color-disabled-border);
  background-color: var(--sys-color-disabled-surface);
  color: var(--sys-color-disabled-text);
  cursor: not-allowed;
}
.input:disabled::placeholder {
  color: var(--sys-color-disabled-text);
}
.input::-webkit-search-cancel-button {
  display: none;
}

textarea.input {
  height: auto;
  min-height: calc(var(--control-h) * 3);
  padding-block: var(--control-pad-y);
  resize: vertical;
}

textarea.input-tall {
  min-height: calc(var(--control-h) * 5);
}

select.input {
  cursor: pointer;
}

.input-affix {
  position: relative;
  display: block;
}

.input-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: calc(16px * 0.8);
  line-height: 1;
  position: absolute;
  top: 50%;
  left: var(--control-pad-x);
  color: var(--sys-color-text-secondary);
  transform: translateY(-50%);
  pointer-events: none;
}

.input-icon-accent {
  color: var(--sys-color-primary);
}

.input-affix-leading .input {
  padding-left: calc(var(--control-pad-x) + 16px + var(--control-gap));
}

.input-affix-trailing .input {
  padding-right: var(--control-h);
}

.input-trail {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--sys-color-text-secondary);
  pointer-events: none;
}

button.input-trail {
  pointer-events: auto;
  cursor: pointer;
}
button.input-trail:hover {
  color: var(--sys-color-text-primary);
}

.input-group {
  display: flex;
  min-width: 0;
}
.input-group > .input,
.input-group > .input-affix {
  flex: 1 1 auto;
  min-width: 0;
}
.input-group > .input,
.input-group > .input-affix .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .button {
  flex: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input:placeholder-shown ~ .input-clear {
  display: none;
}

fieldset.large .break > label {
  display: block;
  margin-bottom: var(--space-2);
}
fieldset.large .break > label em.dim {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--control-gap);
  min-height: var(--control-touch);
  padding-block: calc((var(--control-touch) - 21px) / 2);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  cursor: pointer;
}
.choice:has(:disabled) {
  color: var(--sys-color-disabled-text);
  cursor: not-allowed;
}
.choice:has(:disabled) .choice-description {
  color: var(--sys-color-disabled-text);
}

.choice-text {
  display: grid;
}

.choice-description {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.choice-checkbox,
.choice-radio {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-content: center;
  width: 16px;
  height: 16px;
  margin: 2.5px 0 0;
  border: 1.5px solid var(--sys-color-border-strong);
  border-radius: 50%;
  background: var(--sys-color-input-bg);
  appearance: none;
  cursor: inherit;
}
.choice-checkbox::before,
.choice-radio::before {
  content: "";
  transform: scale(0);
  transition: transform 0.12s ease-out;
}
.choice-checkbox:checked,
.choice-radio:checked {
  border-color: var(--sys-color-primary);
}
.choice-checkbox:checked::before,
.choice-radio:checked::before {
  transform: scale(1);
}
.choice-checkbox:disabled,
.choice-radio:disabled {
  border-color: var(--sys-color-disabled-border);
  background: var(--sys-color-disabled-surface);
}

.choice-checkbox::before {
  width: 10px;
  height: 10px;
  background: var(--sys-color-on-primary);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.choice-checkbox:checked {
  background: var(--sys-color-primary);
}

.choice-radio::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sys-color-primary);
}
.choice-radio:checked {
  border-width: 2px;
}

.choice-switch {
  position: relative;
  flex: none;
  width: calc(var(--switch-h) * 1.8);
  height: var(--switch-h);
  margin: calc((21px - var(--switch-h)) / 2) 0 0;
  border-radius: var(--radius-pill);
  background: var(--sys-color-switch-track);
  box-shadow: inset 0 0 0 1px var(--sys-color-border-strong);
  appearance: none;
  cursor: inherit;
  transition: background-color 0.15s ease-out;
}
.choice-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--switch-h) - 4px);
  height: calc(var(--switch-h) - 4px);
  border-radius: 50%;
  background: var(--sys-color-switch-knob);
  transition: transform 0.15s ease-out;
}
.choice-switch:checked {
  background: var(--sys-color-primary);
  box-shadow: none;
}
.choice-switch:checked::before {
  background: var(--sys-color-switch-knob-on);
  transform: translateX(calc(var(--switch-h) * 0.8));
}
.choice-switch:disabled {
  background: var(--sys-color-disabled-surface);
  box-shadow: inset 0 0 0 1px var(--sys-color-disabled-border);
}
.choice-switch:disabled::before {
  background: var(--sys-color-disabled-border);
}

.segmented,
.button-group {
  position: relative;
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background: var(--sys-color-input-bg);
}

.segmented-block {
  display: flex;
  width: 100%;
}
.segmented-block .segmented-option {
  flex: 1 1 0;
}

.segmented-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-option,
.button-group a {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--control-h) - 2 * var(--space-1) - 2px);
  padding: 0 var(--control-pad-x);
  border-radius: calc(var(--radius) - var(--space-1));
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.segmented-option:hover,
.button-group a:hover {
  background: var(--sys-color-hover);
  text-decoration: none;
}

.segmented-input:checked + .segmented-option {
  background: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
}
.segmented-input:focus-visible + .segmented-option {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.button-group {
  --control-h: 32px;
  --control-pad-y: 6px;
  --control-pad-x: 12px;
  --control-gap: 8px;
  --control-touch: 32px;
  --switch-h: 16px;
  --icon-size: 16px;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.button-group::-webkit-scrollbar {
  display: none;
}
.button-group a {
  font-weight: 400;
}
.button-group a.active {
  background: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
  font-weight: 600;
}
.button-group a:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(-1 * var(--focus-width));
}

.menu,
.watchlist-popover {
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-2);
  border-radius: var(--radius);
  background: var(--sys-color-surface-solid);
  color: var(--sys-color-text-primary);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
  min-height: var(--control-touch);
  padding: 0 var(--control-pad-x);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover {
  background: var(--sys-color-hover);
  color: inherit;
  text-decoration: none;
}
.menu-item[aria-selected=true] {
  background: var(--sys-color-selected);
}

.menu-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: calc(var(--icon-size) * 0.8);
  line-height: 1;
  color: var(--sys-color-primary);
}

.menu-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: calc(16px * 0.8);
  line-height: 1;
}

.watchlist-popover {
  display: none;
  position: fixed;
  z-index: var(--z-modal);
  width: 260px;
  padding: var(--space-3);
}
.watchlist-popover h5 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--sys-color-text-secondary);
}
.watchlist-popover .watchlists-add + .watchlists-in {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--sys-color-border);
}

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--sys-color-link);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  text-decoration: none;
}
.icon-link [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: calc(var(--icon-size) * 0.8);
  line-height: 1;
}
.icon-link:hover {
  text-decoration: underline;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.breadcrumbs li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--sys-color-text-muted);
  border-right: 1.5px solid var(--sys-color-text-muted);
  transform: rotate(45deg);
}

.breadcrumbs a {
  color: var(--sys-color-link);
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs [aria-current=page] {
  color: var(--sys-color-text-primary);
  font-weight: 600;
}

.nav-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list-item {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
  min-height: var(--control-touch);
  padding: 0 var(--control-pad-x);
  border-radius: var(--radius);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
}
.nav-list-item [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: calc(var(--icon-size) * 0.8);
  line-height: 1;
  color: var(--sys-color-text-secondary);
}
.nav-list-item:hover {
  background: var(--sys-color-hover);
}
.nav-list-item[aria-current=page] {
  background: var(--sys-color-selected);
  color: var(--sys-color-primary);
  font-weight: 600;
}
.nav-list-item[aria-current=page] [class*=fa-] {
  color: var(--sys-color-primary);
}

.nav-list-item-warning [class*=fa-] {
  color: var(--sys-color-warning-text);
}

.nav-list-end {
  margin-left: auto;
}

.nav-list-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sys-color-success);
}

.nav-list-tag {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-warning-text);
  font-weight: 700;
  text-transform: uppercase;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-2);
  border-radius: var(--radius);
  background: var(--sys-color-bg);
}

.toolbar-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
}

.toolbar-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: calc(24px * 0.8);
  line-height: 1;
  border-radius: var(--radius-small);
  background: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
  font-size: 14px;
}

.toolbar-search {
  flex: 1 1 280px;
}

.filter-bar {
  --control-h: 32px;
  --control-pad-y: 6px;
  --control-pad-x: 12px;
  --control-gap: 8px;
  --control-touch: 32px;
  --switch-h: 16px;
  --icon-size: 16px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-5);
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
}

.filter-field-end {
  margin-left: auto;
}

.filter-field-actions {
  align-self: stretch;
  justify-content: flex-end;
}

.filter-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--sys-color-text-secondary);
  white-space: nowrap;
}

.filter-control {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-bar .button-group {
  margin: 0;
  max-width: 100%;
}

.filter-bar .input-affix {
  display: inline-block;
  width: auto;
  max-width: 100%;
}

.filter-bar .input {
  width: auto;
  max-width: 100%;
  border-color: var(--sys-color-border);
}

#nav-mega .inside-team {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--sys-color-border);
}
#nav-mega .mega-identity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
#nav-mega .mega-teamname {
  margin-left: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  font-family: var(--font-serif);
  font-weight: 400;
}
#nav-mega .mega-teamname .team-name-city {
  font-weight: 700;
}
#nav-mega .mega-teamlinks,
#nav-mega .mega-strip-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
#nav-mega .mega-strip-right {
  margin-left: auto;
}
#nav-mega .mega-teamlinks a,
#nav-mega .mega-strip-right a,
#nav-mega .section a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-touch);
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 500;
  text-decoration: none;
}
#nav-mega .mega-teamlinks a [class*=fa-],
#nav-mega .mega-strip-right a [class*=fa-],
#nav-mega .section a [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: calc(var(--icon-size) * 0.8);
  line-height: 1;
  color: var(--sys-color-primary);
}
#nav-mega .mega-teamlinks a .nav-counter,
#nav-mega .mega-teamlinks a .nav-pill,
#nav-mega .mega-strip-right a .nav-counter,
#nav-mega .mega-strip-right a .nav-pill,
#nav-mega .section a .nav-counter,
#nav-mega .section a .nav-pill {
  margin-left: auto;
}
#nav-mega .mega-teamlinks a:hover,
#nav-mega .mega-strip-right a:hover,
#nav-mega .section a:hover {
  background: var(--sys-color-hover);
}
#nav-mega .mega-teamlinks a.linkon,
#nav-mega .mega-strip-right a.linkon,
#nav-mega .section a.linkon {
  background: var(--sys-color-selected);
  color: var(--sys-color-primary);
  font-weight: 600;
}
#nav-mega .section a {
  margin-inline: calc(-1 * var(--space-2));
}
#nav-mega .mega-close {
  color: var(--sys-color-text-secondary);
}
#nav-mega .mega-close [class*=fa-] {
  color: inherit;
}
#nav-mega .inside {
  display: grid;
  gap: var(--space-5) var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  #nav-mega .inside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  #nav-mega .inside {
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  }
}
#nav-mega .title {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  margin-bottom: var(--space-2);
}
@media (max-width: 899.98px) {
  #nav-mega .shell-panel-inner {
    position: relative;
  }
  #nav-mega .mega-identity {
    padding-right: var(--control-touch);
  }
  #nav-mega .mega-strip-right {
    margin-left: 0;
  }
  #nav-mega .mega-strip-right .mega-close {
    position: absolute;
    top: calc(var(--space-4) + 16px - var(--control-touch) / 2);
    right: calc(var(--page-pad) - var(--space-2));
    justify-content: center;
    width: var(--control-touch);
    padding: 0;
    border-radius: 50%;
  }
}

.announce {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--page-pad);
  background: var(--sys-color-info);
  color: var(--sys-color-on-status);
  border-bottom: var(--elevation-4) solid rgba(0, 0, 0, 0.25);
}
.announce [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: calc(24px * 0.8);
  line-height: 1;
  flex: none;
  margin-top: 2px;
}
.announce a {
  color: inherit;
  text-underline-offset: 2px;
}
.announce ul {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
}
.announce li + li {
  margin-top: var(--space-1);
}

.announce-message {
  background: var(--sys-color-info);
}

.announce-success {
  background: var(--sys-color-success);
}

.announce-warning {
  background: var(--sys-color-warning);
}

.announce-alert {
  background: var(--sys-color-error);
}

.announce .notice-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  color: inherit;
}

.announce .notice-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: inherit;
}

#container.container-locked a[href^="/"] {
  opacity: 0.5;
  cursor: not-allowed;
}

#container.container-locked a[href^="/"]:hover {
  opacity: 0.75;
  text-decoration: none;
}

.notice,
.notice-prose,
.alert,
.alert-notification,
.landing-alert,
.landing-warning,
.landing-calendar,
.landing-dfa {
  position: relative;
  clear: both;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--notice-edge);
  border-bottom: 3px solid var(--notice-edge);
  border-radius: var(--radius);
  background: var(--notice-ground);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  --notice-ground: var(--sys-color-info-subtle);
  --notice-edge: var(--sys-color-info);
}
.notice a,
.notice-prose a,
.alert a,
.alert-notification a,
.landing-alert a,
.landing-warning a,
.landing-calendar a,
.landing-dfa a {
  color: var(--sys-color-link);
  font-weight: 600;
  text-underline-offset: 2px;
}
.notice ul,
.notice-prose ul,
.alert ul,
.alert-notification ul,
.landing-alert ul,
.landing-warning ul,
.landing-calendar ul,
.landing-dfa ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}
.notice li + li,
.notice-prose li + li,
.alert li + li,
.alert-notification li + li,
.landing-alert li + li,
.landing-warning li + li,
.landing-calendar li + li,
.landing-dfa li + li {
  margin-top: var(--space-1);
}

.notice,
.landing-alert,
.landing-warning,
.landing-calendar,
.landing-dfa {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.notice > icons,
.landing-alert > icons,
.landing-warning > icons,
.landing-calendar > icons,
.landing-dfa > icons {
  display: contents;
}
.notice > [class*=fa-],
.notice > icons > [class*=fa-],
.landing-alert > [class*=fa-],
.landing-alert > icons > [class*=fa-],
.landing-warning > [class*=fa-],
.landing-warning > icons > [class*=fa-],
.landing-calendar > [class*=fa-],
.landing-calendar > icons > [class*=fa-],
.landing-dfa > [class*=fa-],
.landing-dfa > icons > [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: calc(20px * 0.8);
  line-height: 1;
  flex: none;
  margin-top: 1px;
  color: var(--notice-edge);
}

.notice-prose,
.alert,
.alert-notification {
  display: block;
}

.notice-content {
  flex: 1;
  min-width: 0;
}

.notice-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-primary);
}

.notice-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.notice-title + .notice-body {
  margin-top: 2px;
}

.notice-action {
  flex: none;
  align-self: center;
  margin-left: auto;
  padding-left: var(--space-4);
}

.notice-center {
  text-align: center;
}

.notice-compact {
  padding: var(--space-2) var(--space-3);
  align-items: center;
}
.notice-compact .notice-title,
.notice-compact .notice-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.notice-compact > [class*=fa-],
.notice-compact > icons > [class*=fa-] {
  margin-top: 0;
}

.notice-message,
.landing-calendar {
  --notice-ground: var(--sys-color-info-subtle);
  --notice-edge: var(--sys-color-info);
}

.notice-success {
  --notice-ground: var(--sys-color-success-subtle);
  --notice-edge: var(--sys-color-success);
}

.notice-warning,
.landing-warning {
  --notice-ground: var(--sys-color-warning-subtle);
  --notice-edge: var(--sys-color-warning);
}

.notice-alert,
.landing-alert {
  --notice-ground: var(--sys-color-error-subtle);
  --notice-edge: var(--sys-color-error);
}

.notice-other,
.landing-dfa {
  --notice-ground: var(--sys-color-info-subtle);
  --notice-edge: var(--sys-color-info);
}

.landing-alert,
.landing-warning,
.landing-calendar,
.landing-dfa {
  align-items: center;
}
.landing-alert icons,
.landing-warning icons,
.landing-calendar icons,
.landing-dfa icons {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: calc(24px * 0.8);
  line-height: 1;
  flex: none;
  color: var(--notice-edge);
}
.landing-alert time,
.landing-warning time,
.landing-calendar time,
.landing-dfa time {
  margin-left: auto;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--sys-color-text-secondary);
  white-space: nowrap;
}

.notice-dismissable {
  padding-right: var(--space-7);
}

.notice-dismissable .notice-dismiss {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--sys-color-text-secondary);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.notice-dismissable .notice-dismiss:hover {
  background: var(--sys-color-hover);
  color: var(--sys-color-text-primary);
  text-decoration: none;
}
.notice-dismissable .notice-dismiss:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(-1 * var(--focus-width));
}

.notice-compact.notice-dismissable {
  padding-right: var(--space-6);
}
.notice-compact.notice-dismissable .notice-dismiss {
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
}

.toast-stack {
  position: fixed;
  right: var(--page-pad);
  bottom: var(--page-pad);
  z-index: var(--z-toast);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  width: min(360px, calc(100vw - 2 * var(--page-pad)));
}
@media (max-width: 899.98px) {
  .toast-stack {
    bottom: calc(var(--tabbar-h) + var(--space-2) + env(safe-area-inset-bottom));
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--sys-color-border);
  border-bottom: 4px solid var(--sys-color-border-strong);
  border-radius: var(--radius);
  background: var(--sys-color-surface-solid);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.toast-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--sys-color-info);
}

.toast-dot-success {
  background: var(--sys-color-success);
}

.toast-dot-warning {
  background: var(--sys-color-warning);
}

.toast-dot-alert {
  background: var(--sys-color-error);
}

.toast-label {
  flex: 1;
  min-width: 0;
}

.toast-action {
  flex: none;
  margin-left: auto;
}

.toast-dismiss {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--sys-color-text-secondary);
  line-height: 1;
  cursor: pointer;
}
.toast-dismiss:hover {
  background: var(--sys-color-hover);
  color: var(--sys-color-text-primary);
}
.toast-dismiss:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(-1 * var(--focus-width));
}

.yard-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-tabbar);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--yard-h, 56px);
  padding: 0 var(--page-pad);
  border-top: 1px solid var(--sys-color-border);
  background: var(--sys-color-surface-solid);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
@media (max-width: 899.98px) {
  .yard-footer {
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    gap: var(--space-2);
  }
}
.yard-footer audio {
  flex: 1;
  min-width: 0;
  height: 36px;
}

.yard-footer-title {
  white-space: nowrap;
}
.yard-footer-title .fa {
  margin-right: var(--space-1);
}
@media (max-width: 599.98px) {
  .yard-footer-title .yard-footer-date {
    display: none;
  }
}

.yard-footer-date {
  color: var(--sys-color-text-muted);
}

.yard-footer-close {
  padding: 0 var(--space-1);
  color: var(--sys-color-text-muted);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}
.yard-footer-close:hover {
  color: var(--sys-color-text-primary);
}

body.has-yard {
  --yard-h: 56px;
  padding-bottom: var(--yard-h);
}
@media (max-width: 899.98px) {
  body.has-yard {
    padding-bottom: calc(var(--yard-h) + var(--tabbar-h) + env(safe-area-inset-bottom));
  }
}

.frame-modal,
.battle-modal {
  display: none;
  position: fixed;
  z-index: 50000;
  inset: 0;
  overflow: auto;
  padding: var(--space-6) var(--page-pad);
  background-color: var(--sys-color-scrim);
}

.frame-modal-content,
.battle-modal-inner {
  position: relative;
  max-width: 900px;
  margin: auto;
  padding: var(--card-pad);
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-modal);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface-solid);
}
.frame-modal-content iframe,
.battle-modal-inner iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  border: 0;
}

.frame-modal-narrow {
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.frame-modal-escape {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.frame-modal-escape a,
.battle-modal-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: calc(32px * 0.8);
  line-height: 1;
  border-radius: var(--radius-small);
  color: var(--sys-color-text-secondary);
  text-decoration: none;
}
.frame-modal-escape a:hover,
.battle-modal-close:hover {
  background-color: var(--sys-color-hover);
  color: var(--sys-color-text-primary);
}

.video-width {
  width: 100%;
}

.frame-modal-figure {
  margin: 0;
}
.frame-modal-figure img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - var(--space-8) * 3);
  margin: 0 auto;
  border-radius: var(--radius-small);
}
.frame-modal-figure figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  text-align: center;
}

.battle-modal-inner {
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.battle-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.battle-modal-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}

.battle-modal-loading,
.battle-modal-empty {
  padding: var(--space-6) 0;
  color: var(--sys-color-text-secondary);
  text-align: center;
}

.battle-modal-foot {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  text-align: center;
}

.empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

.empty-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: calc(32px * 0.8);
  line-height: 1;
  color: var(--sys-color-text-muted);
}

.empty-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--sys-color-text-primary);
}

.empty-body {
  max-width: 60ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.card-body > .empty:only-child {
  padding-block: var(--space-6);
}

.progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.progress-value {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-primary);
  font-variant-numeric: tabular-nums;
}

.progress-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--sys-color-skeleton);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--sys-color-primary);
  transition: width 0.2s ease;
}

.skeleton {
  height: 12px;
  border-radius: var(--radius-small);
  background: var(--sys-color-skeleton);
}

.skeleton-line + .skeleton-line {
  margin-top: var(--space-2);
}

.skeleton-short {
  width: 30%;
}

.skeleton-wide {
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .skeleton {
    animation: skeleton-pulse 1.4s ease-in-out infinite;
  }
}
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.loader-standby {
  display: none;
}

.loader-wrap {
  display: flex;
  justify-content: center;
  padding: var(--space-4);
}

.diamond-loader {
  display: block;
}
.diamond-loader .diamond-loader__bg {
  fill: none;
  stroke: var(--sys-color-border-strong);
  stroke-width: 2;
}
.diamond-loader .diamond-loader__trail {
  fill: none;
  stroke: var(--sys-color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 26 121;
  stroke-dashoffset: 26;
  animation: diamond-loader-trail 2.4s linear infinite;
}
.diamond-loader .diamond-loader__base {
  fill: var(--sys-color-surface-solid);
  stroke: var(--sys-color-border-strong);
  stroke-width: 1.5;
}
.diamond-loader .diamond-loader__runner {
  fill: var(--sys-color-error);
}

@keyframes diamond-loader-trail {
  from {
    stroke-dashoffset: 26;
  }
  to {
    stroke-dashoffset: -121;
  }
}
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  padding: var(--space-6) var(--page-pad);
  background-color: var(--sys-color-bg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 900px) {
  .auth-page {
    align-items: center;
    padding-block: var(--space-7);
  }
}

.auth-panel {
  width: 100%;
  max-width: 460px;
  padding: var(--space-5);
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-3);
  border-radius: var(--radius);
  background: var(--sys-color-surface-solid);
}
@media (min-width: 900px) {
  .auth-panel {
    margin-left: var(--space-7);
    padding: var(--space-6);
  }
}

.auth-logo {
  margin-bottom: var(--space-5);
}
.auth-logo img {
  width: auto;
  height: 48px;
}

.auth-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: var(--space-3);
}

.auth-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  margin-bottom: var(--space-5);
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.auth-actions a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-link);
  text-decoration: none;
}
.auth-actions a:hover {
  text-decoration: underline;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.auth-credit {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  background: var(--sys-color-scrim);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

thead {
  text-align: left;
  text-transform: uppercase;
}

thead tr {
  border-top: 2px solid var(--table-rule-top);
  border-bottom: 1px solid var(--table-rule-head);
  background-color: var(--table-head-bg);
  color: var(--table-head-text);
  font-size: 12px;
}

th {
  position: relative;
  padding: var(--space-2) 6px;
  border-top: 2px solid var(--table-rule-top);
  border-bottom: 1px solid var(--table-rule-head);
  font-weight: 600;
  text-align: left;
}

td {
  position: relative;
  padding: var(--space-2) 6px;
}

tbody th {
  border-top: 0;
  border-bottom: 0;
  text-transform: none;
}

tr {
  border-bottom: 1px solid var(--table-rule-row);
}

tr:last-child {
  border-bottom: 0;
}

th.r, td.r {
  text-align: right;
}

th.c, td.c {
  text-align: center;
}

table.sortable tbody tr.former td,
table.sortable tbody tr.unavailable td,
table.sortable tbody tr.unqualified td,
table.stats-table tbody tr.former td,
table tr.row-summary td {
  background-color: rgba(127, 127, 127, 0.12);
}

table.stats-table td a,
table.injury-stats td a,
table.freeagent-stats td a,
table.draft-value td a {
  font-weight: 600;
}

table.dig-results td:first-child a {
  font-weight: 600;
}

.team-statistics td a,
.team-season td a {
  font-weight: 600;
}

th.f2,
td.f2 {
  width: 2%;
}

th.f3,
td.f3 {
  width: 3%;
}

th.f4,
td.f4 {
  width: 4%;
}

th.f5,
td.f5 {
  width: 5%;
}

th.f6,
td.f6 {
  width: 6%;
}

th.f7,
td.f7 {
  width: 7%;
}

th.f8,
td.f8 {
  width: 8%;
}

th.f9,
td.f9 {
  width: 9%;
}

th.f10,
td.f10 {
  width: 10%;
}

th.f12,
td.f12 {
  width: 12%;
}

th.f15,
td.f15 {
  width: 15%;
}

th.f18,
td.f18 {
  width: 18%;
}

th.f20,
td.f20 {
  width: 20%;
}

tr.a-line {
  border-top: 1px solid var(--sys-color-border);
}

tr.b-line {
  border-bottom: 2px solid var(--sys-color-border);
}

th.col, td.col {
  padding-left: 3px;
  border-left: 1px dotted var(--sys-color-border);
}

td.label {
  display: block;
  margin-bottom: 3px;
  color: var(--table-head-text);
  font-size: 10px;
  text-transform: uppercase;
}

td.column {
  background-color: var(--table-total-bg);
  font-weight: 600;
}

tr.vintage {
  background-color: var(--table-vintage-bg);
  font-weight: 600;
}

tr.vintage .vintage-meta {
  margin-left: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--sys-color-text-secondary);
}

tr.vintage-active {
  background-color: var(--table-vintage-active-bg);
  font-weight: 600;
}

tr.total,
tr.total-combo {
  border-top: 2px solid var(--sys-color-border);
  background-color: var(--table-total-bg);
  color: var(--table-head-text);
}
tr.total .totalname,
tr.total-combo .totalname {
  font-size: 12px;
  text-transform: uppercase;
}

tr.is-mine td {
  background-color: var(--sys-color-highlight);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll th,
.table-scroll td {
  white-space: nowrap;
}
.table-scroll th:first-child,
.table-scroll td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--surface-current);
}
.table-scroll thead th:first-child {
  background: linear-gradient(var(--table-head-bg), var(--table-head-bg)), var(--surface-current);
}
.table-scroll tr.is-mine td:first-child {
  background: linear-gradient(var(--sys-color-highlight), var(--sys-color-highlight)), var(--surface-current);
}
.table-scroll tr.total td:first-child,
.table-scroll tr.total-combo td:first-child {
  background: linear-gradient(var(--table-total-bg), var(--table-total-bg)), var(--surface-current);
}
.table-scroll[data-overflow-start] th:first-child,
.table-scroll[data-overflow-start] td:first-child {
  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.3);
}

.team-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}
.team-cell img {
  flex: none;
  width: 20px;
  height: 20px;
  max-width: none;
  object-fit: contain;
}
.team-cell:hover {
  text-decoration: underline;
}

@media (max-width: 599.98px) {
  .team-city {
    display: none;
  }
}

.overview-stats td a {
  font-weight: 600;
}

table.sortable th.sort-header {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.sortable th.sort-header:hover {
  color: var(--sys-color-link);
}
table.sortable th.sort-asc,
table.sortable th.sort-desc {
  color: var(--sys-color-link);
}
table.sortable th.sort-asc::after {
  content: " ▴";
}
table.sortable th.sort-desc::after {
  content: " ▾";
}

table.table-thin th,
table.table-thin td {
  padding: var(--space-1);
}
table.table-thin td {
  font-size: 12px;
}

table.table-mini {
  width: 100%;
}
table.table-mini th,
table.table-mini td {
  padding: var(--space-1);
}
table.table-mini td {
  font-size: 12px;
}

.tier-table {
  width: 100%;
  border-collapse: collapse;
}
.tier-table .tier-place {
  width: 2.5em;
  color: var(--sys-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.tier-table .tier-negative {
  font-style: normal;
  color: inherit;
}

.tier-row td:first-child {
  border-left: 6px solid transparent;
}

.tier-promotion td {
  background-color: var(--sys-tier-promotion-bg);
}

.tier-promotion td:first-child {
  border-left: 6px solid var(--sys-tier-promotion-edge);
}

.tier-playoff td {
  background-color: var(--sys-tier-playoff-bg);
}

.tier-playoff td:first-child {
  border-left: 4px double var(--sys-tier-playoff-edge);
}

.tier-relegation td {
  background-color: var(--sys-tier-relegation-bg);
}

.tier-relegation td:first-child {
  border-left: 6px dashed var(--sys-tier-relegation-edge);
}

[data-theme=dark] .tier-promotion {
  --sys-color-text-muted: #8D99A4;
}
[data-theme=dark] .tier-playoff {
  --sys-color-text-muted: #8B98A3;
}
[data-theme=dark] .tier-relegation {
  --sys-color-text-muted: #82909C;
}

.tier-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

.tier-key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.tier-swatch {
  flex: none;
  width: 28px;
  height: 18px;
  border-radius: var(--radius-small);
}
.tier-swatch.tier-promotion {
  background-color: var(--sys-tier-promotion-bg);
  border-left: 6px solid var(--sys-tier-promotion-edge);
}
.tier-swatch.tier-playoff {
  background-color: var(--sys-tier-playoff-bg);
  border-left: 4px double var(--sys-tier-playoff-edge);
}
.tier-swatch.tier-relegation {
  background-color: var(--sys-tier-relegation-bg);
  border-left: 6px dashed var(--sys-tier-relegation-edge);
}

.tier-rule {
  margin-top: var(--space-3);
  max-width: 80ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

#postseason .ps-note {
  max-width: 70ch;
  margin-bottom: var(--space-4);
}
#postseason .ps-champion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-left: 4px double var(--sys-tier-playoff-edge);
  background-color: var(--sys-tier-playoff-bg);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
#postseason .ps-champion img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
#postseason .ps-champion strong {
  font-weight: 600;
}
#postseason .ps-tree {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}
#postseason .ps-half {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: var(--space-3);
}
#postseason .ps-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 8.5em;
}
#postseason .ps-col > h4 {
  margin: 0 0 var(--space-1);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 10px;
  color: var(--sys-color-text-secondary);
  white-space: nowrap;
  text-align: center;
}
#postseason .ps-slots,
#postseason .ps-pair {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
}
#postseason .ps-tie {
  position: relative;
  flex: 0 0 auto;
}
#postseason .ps-col-open .ps-slots {
  justify-content: flex-start;
  gap: var(--space-2);
}
#postseason .ps-col-open .ps-tie-bye {
  margin-bottom: var(--space-4);
}
#postseason .ps-cell {
  display: grid;
  grid-template-columns: 1.3em 1fr auto;
  align-items: center;
  gap: var(--space-1) 6px;
  padding: var(--space-1) 7px;
  border: 1px solid var(--table-rule-row);
  background-color: var(--sys-surface-grouped);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-size: 13px;
}
#postseason .ps-cell + .ps-cell {
  border-top: 0;
  border-radius: 0 0 var(--radius-small) var(--radius-small);
}
#postseason .ps-cell:first-child {
  border-radius: var(--radius-small) var(--radius-small) 0 0;
}
#postseason .ps-cell .ps-seed {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-size: 10px;
  color: var(--sys-color-text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#postseason .ps-cell .ps-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#postseason .ps-cell .ps-wins {
  min-width: 0.9em;
  color: var(--sys-color-text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#postseason .ps-cell.won .ps-name,
#postseason .ps-cell.won .ps-name a {
  font-weight: 700;
}
#postseason .ps-cell.won .ps-wins {
  color: var(--sys-color-text-primary);
  font-weight: 700;
}
#postseason .ps-tie-bye .ps-cell {
  border-style: dashed;
  border-radius: var(--radius-small);
}
#postseason .ps-line {
  padding: 3px 0 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-size: 10px;
  color: var(--sys-color-text-secondary);
  text-align: center;
  white-space: nowrap;
}
#postseason .ps-line a {
  margin-right: 2px;
}
#postseason .ps-line span {
  margin-right: 2px;
  opacity: 0.45;
}
#postseason .ps-tree-run {
  justify-content: flex-start;
}
#postseason .ps-tree-run .ps-col {
  flex: 0 0 auto;
  width: 14em;
}
#postseason .ps-de-track {
  margin-bottom: var(--space-4);
}
#postseason .ps-de-label {
  margin-bottom: var(--space-2);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--table-rule-row);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 10px;
  color: var(--sys-color-text-secondary);
}
#postseason .ps-de .ps-slots {
  justify-content: flex-start;
  gap: 6px;
}
#postseason .ps-de .ps-col {
  width: 12em;
}
#postseason .ps-final {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 10em;
}
#postseason .ps-crown {
  margin-bottom: var(--space-4);
  text-align: center;
}
#postseason .ps-crown img {
  width: 84px;
  height: 84px;
  object-fit: contain;
}
#postseason .ps-crown strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 700;
}
#postseason .ps-crown span {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
#postseason .ps-col-final > h4 {
  text-align: center;
}
#postseason .ps-bracket {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}
#postseason .ps-round > h4 {
  margin: 0 0 6px;
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 12px;
  color: var(--sys-color-text-primary);
}
#postseason .ps-round .ps-byes {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
#postseason .ps-series {
  margin-bottom: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: var(--radius);
  background-color: var(--sys-surface-grouped);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-size: 13px;
}
#postseason .ps-club {
  display: grid;
  grid-template-columns: 24px 22px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
#postseason .ps-club img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
#postseason .ps-club .ps-seed {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-secondary);
  text-align: right;
}
#postseason .ps-club .ps-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#postseason .ps-club .ps-record {
  margin-left: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-secondary);
}
#postseason .ps-club .ps-wins {
  min-width: 1.2em;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#postseason .ps-club.won .ps-name {
  font-weight: 600;
}
#postseason .ps-club.lost {
  opacity: 0.55;
}
#postseason .ps-games {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-secondary);
}
#postseason .ps-games a {
  margin-right: 6px;
  color: var(--sys-color-text-primary);
  white-space: nowrap;
}
#postseason .ps-games .ps-status {
  font-style: italic;
}
#postseason .ps-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
#postseason .ps-group h4 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
}
#postseason .ps-group table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#postseason .ps-group td,
#postseason .ps-group th {
  padding: 3px var(--space-1);
  text-align: left;
}
#postseason .ps-group th {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-secondary);
  font-weight: 400;
}
#postseason .ps-group td.n,
#postseason .ps-group th.n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#postseason .ps-group td.ps-club-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
#postseason .ps-group td.ps-club-cell img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
#postseason .ps-group tr.advanced td {
  background-color: var(--sys-tier-promotion-bg);
}
#postseason .ps-group tr.advanced td:first-child {
  border-left: 6px solid var(--sys-tier-promotion-edge);
}
#postseason .ps-group tr.out td {
  opacity: 0.55;
}
#postseason .ps-group .ps-group-games {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-secondary);
}
#postseason .ps-group .ps-group-games a {
  margin-right: 6px;
  color: var(--sys-color-text-secondary);
  white-space: nowrap;
}
#postseason .ps-de-round {
  margin-bottom: var(--space-2);
}
#postseason .ps-de-round > h4 {
  margin: 0 0 var(--space-1);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 12px;
  color: var(--sys-color-text-secondary);
}
#postseason .ps-de-game {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: var(--space-2);
  padding: 2px 0;
  font-size: 12px;
}
#postseason .ps-de-game .ps-tag {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 10px;
  color: var(--sys-color-text-secondary);
}
#postseason .ps-de-game .ps-tag.winners {
  color: var(--sys-tier-promotion-edge);
}
#postseason .ps-de-game .ps-tag.elimination {
  color: var(--sys-tier-relegation-edge);
}
#postseason .ps-de-game a {
  color: inherit;
}
#postseason .ps-tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
#postseason .ps-tier h4 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
}
#postseason .ps-tier table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#postseason .ps-tier td {
  padding: 3px var(--space-1);
}
#postseason .ps-tier td.n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#postseason .ps-tier td.ps-club-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
#postseason .ps-tier td.ps-club-cell img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
#postseason .ps-tier tr td:first-child {
  border-left: 6px solid transparent;
}
#postseason .ps-tier tr.promotion td {
  background-color: var(--sys-tier-promotion-bg);
}
#postseason .ps-tier tr.promotion td:first-child {
  border-left: 6px solid var(--sys-tier-promotion-edge);
}
#postseason .ps-tier tr.playoff td {
  background-color: var(--sys-tier-playoff-bg);
}
#postseason .ps-tier tr.playoff td:first-child {
  border-left: 4px double var(--sys-tier-playoff-edge);
}
#postseason .ps-tier tr.relegation td {
  background-color: var(--sys-tier-relegation-bg);
}
#postseason .ps-tier tr.relegation td:first-child {
  border-left: 6px dashed var(--sys-tier-relegation-edge);
}
#postseason .ps-tier tr.gap td {
  height: 6px;
  padding: 0;
  border-left-color: transparent;
}
#postseason .ps-tier .ps-key {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-secondary);
}
@media (max-width: 1199.98px) {
  #postseason .ps-tree,
#postseason .ps-half {
    flex-direction: column;
  }
  #postseason .ps-slots,
#postseason .ps-pair {
    display: block;
  }
  #postseason .ps-tie {
    margin-bottom: var(--space-2);
  }
}
#postseason .ps-cell .ps-crest,
#postseason .ps-cell .ps-record {
  display: none;
}
@media (min-width: 1536px) {
  #postseason .ps-cell {
    grid-template-columns: 1.3em 18px 1fr auto;
  }
  #postseason .ps-cell .ps-crest {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
  }
  #postseason .ps-cell .ps-record {
    display: inline;
    margin-left: 5px;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.2px;
    font-size: 10px;
    color: var(--sys-color-text-secondary);
  }
}
@media (min-width: 1200px) {
  #postseason .ps-bracket,
#postseason .ps-groups,
#postseason .ps-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1536px) {
  #postseason .ps-bracket,
#postseason .ps-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #postseason .ps-tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.trade-vote {
  max-width: 860px;
  width: 100%;
}
.trade-vote .trade-date,
.trade-vote .trade-past {
  text-align: left;
}
.trade-vote .trade-date {
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.trade-vote .trade-past {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.bucket-7.trade-vote {
  max-width: none;
  background-color: #1A2535;
  color: #F5F7FA;
  --sys-color-text-primary: #F5F7FA;
  --sys-color-text-secondary: #8F9AA7;
  --sys-color-text-muted: #7F8D99;
  --sys-color-link: #6FC3FF;
  --focus-color: #FFFFFF;
  --trade-title: #EFCA08;
}
td .bucket-7.trade-vote {
  max-width: 600px;
}

.bucket .title {
  display: block;
  margin-bottom: var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--sys-color-primary);
}

.bucket-7 .title,
.bucket-7 h3 {
  color: var(--trade-title);
}

.title .additional {
  display: inline;
  margin-left: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sys-color-text-muted);
}

h1 > .additional, h2 > .additional, h3 > .additional, h4 > .additional {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-selected);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--sys-color-text-secondary);
}

.trade-outer {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-1);
}
.trade-outer .trade-side {
  width: 50%;
  margin-top: var(--space-2);
  padding: var(--space-4);
  background-color: rgba(255, 255, 255, 0.06);
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.trade-outer .trade-side-left {
  border-radius: var(--radius) 0 0 var(--radius);
  text-align: right;
}
.trade-outer .trade-side-right {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.trade-outer .trade-side-left-after {
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius) 0 0 0;
  text-align: right;
}
.trade-outer .trade-side-right-after {
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 0 var(--radius) 0 0;
}
.trade-outer .trade-inside {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.trade-outer .trade-inside .trade-logo {
  width: 60px;
  min-width: 60px;
  display: block;
}
.trade-outer .trade-inside .trade-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.trade-outer .trade-inside .trade-content {
  flex: 1;
}
.trade-outer .trade-inside .trade-content .trade-name {
  display: block;
  font-weight: 400;
}
.trade-outer .trade-inside .trade-content .trade-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: #9FAAB3;
}
.trade-outer .trade-inside .trade-content .trade-acquired {
  display: block;
  font-weight: 600;
}
.trade-outer .trade-click {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  margin-top: var(--space-2);
  background-color: var(--sys-color-link);
  color: #0F1418;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.trade-outer .trade-click:hover {
  background-color: #FFFFFF;
}
.trade-outer .trade-click.trade-click-left {
  border-radius: var(--radius) 0 0 var(--radius);
}
.trade-outer .trade-click.trade-click-right {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.trade-outer .trade-click span {
  font-size: 16px;
}

.trade-side-left .trade-logo,
.trade-side-left-after .trade-logo {
  margin-left: auto;
}

.trade-side-left-after,
.trade-side-right-after {
  width: 50%;
}

.trade-response {
  margin-top: var(--space-1);
  text-align: center;
}
.trade-response:empty {
  display: none;
}
.trade-response .trade-comment-success {
  color: var(--sys-color-success-text);
  font-weight: 600;
}
.trade-response .trade-comment-error,
.trade-response .trade-vote-error {
  color: var(--sys-color-error-text);
  font-weight: 600;
}

.voting-results-wrap {
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius) var(--radius);
  background-color: rgba(255, 255, 255, 0.06);
  text-align: center;
  font-weight: 600;
}

.voting-results {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}

.trade-tug {
  margin-bottom: var(--space-2);
}
.trade-tug .trade-tug__names {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  opacity: 0.8;
}
.trade-tug .trade-tug__names span:first-child {
  text-align: left;
}
.trade-tug .trade-tug__names span:nth-child(2) {
  text-align: center;
}
.trade-tug .trade-tug__names span:last-child {
  grid-column: 3;
  text-align: right;
}
.trade-tug .trade-tug__bar {
  position: relative;
  display: flex;
  gap: var(--space-1);
  height: 12px;
}
.trade-tug .trade-tug__bar .trade-tug__half {
  display: flex;
  width: 50%;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.1);
}
.trade-tug .trade-tug__bar .trade-tug__half--one {
  justify-content: flex-end;
}
.trade-tug .trade-tug__bar .trade-tug__half--two {
  justify-content: flex-start;
}
.trade-tug .trade-tug__bar .trade-tug__fill {
  display: block;
  height: 100%;
  min-width: 6px;
  border-radius: var(--radius-pill);
}
.trade-tug .trade-tug__bar .trade-tug__one,
.trade-tug .trade-tug__bar .trade-tug__two {
  background-color: var(--sys-color-link);
}
.trade-tug .trade-tug__bar .trade-tug__even {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 12px;
  border-radius: var(--radius-pill);
  background-color: #9AA6B4;
}

.trade-vote-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.trade-vote-actions .trade-vote-btn {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background-color: var(--sys-color-link);
  color: #0F1418;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.trade-vote-actions .trade-vote-btn:hover {
  background-color: #FFFFFF;
}
.trade-vote-actions .trade-vote-btn.trade-vote-btn--even {
  background-color: rgba(255, 255, 255, 0.15);
  color: #F5F7FA;
}
.trade-vote-actions .trade-vote-btn.trade-vote-btn--even:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
.trade-vote-actions.is-loading {
  cursor: progress;
}
.trade-vote-actions.is-loading .trade-vote-btn {
  pointer-events: none;
  opacity: 0.3;
}
.trade-vote-actions.is-loading .trade-vote-btn.is-selected {
  opacity: 1;
  animation: trade-vote-pending 0.9s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .trade-vote-actions.is-loading .trade-vote-btn.is-selected {
    animation: none;
  }
}

@keyframes trade-vote-pending {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
.trade-comment-toggle {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}

.trade-comments {
  margin-top: var(--space-1);
}
.trade-comments .trade-comment {
  display: block;
  width: 100%;
  padding: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.trade-comments .trade-comment:last-child {
  border-bottom: none;
}
.trade-comments .trade-comment .trade-comment-meta {
  display: inline-block;
  margin-left: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}
.trade-comments .trade-comment .trade-comment-meta a {
  color: var(--sys-color-link);
  font-weight: 600;
  text-decoration: none;
}
.trade-comments .trade-comment .trade-comment-meta a:hover {
  text-decoration: underline;
}

.trade-comment-form {
  display: none;
  margin-top: var(--space-1);
}
.trade-comment-form.is-open {
  display: block;
}
.trade-comment-form .trade-textarea {
  width: 100%;
  height: 60px;
  margin-bottom: var(--space-1);
  padding: var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.08);
  color: #F5F7FA;
  font-family: var(--font-sans);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  resize: vertical;
}
.trade-comment-form .trade-textarea:focus {
  outline: none;
  border-color: var(--sys-color-link);
}
.trade-comment-form .trade-submit {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius);
  background-color: var(--sys-color-link);
  color: #0F1418;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  cursor: pointer;
}
.trade-comment-form .trade-submit:hover {
  background-color: #FFFFFF;
}

.bucket-7 .photo-circle-60 {
  border-color: #223047;
}

.pp-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.pp-thumb .large {
  height: 150px;
  width: 120px;
}
.pp-thumb .medium {
  height: 100px;
  width: 60px;
}
.pp-thumb .small {
  height: 33px;
  width: 26px;
}
.pp-thumb .tiny {
  height: 21px;
  width: 18px;
}
.pp-thumb .profile {
  width: 50px;
}
.pp-thumb .landing-team {
  height: 60px;
  width: 45px;
}

.nav-third {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}
.nav-third div {
  display: block;
}
.nav-third a {
  display: inline-block;
  padding: 6px var(--space-5);
  border: 1px solid var(--sys-color-border-strong);
  border-left: 0;
  background-color: var(--sys-color-input-bg);
  color: var(--sys-color-text-secondary);
  text-decoration: none;
}
.nav-third a:first-child {
  border-left: 1px solid var(--sys-color-border-strong);
  border-radius: var(--radius-small) 0 0 var(--radius-small);
}
.nav-third a:last-child {
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}
.nav-third a:hover {
  color: var(--sys-color-primary);
}
.nav-third .on {
  display: inline-block;
  background-color: var(--sys-color-surface-solid);
  color: var(--sys-color-primary);
  font-weight: 700;
}

.tradecreate,
.tradeoffer {
  display: block;
}
.tradecreate title,
.tradeoffer title {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--sys-color-text-primary);
}

.tradeoffer {
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  border-radius: var(--radius);
  background-color: var(--sys-surface-grouped);
}

.tradebuild {
  display: block;
}

.deal-team {
  margin-bottom: var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-secondary);
}

.deal-team + .deal-player,
.deal-team + .deal-pick {
  margin-top: 0;
}

.deal-player,
.deal-pick {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-surface);
}
.deal-player > .x3,
.deal-player > .x9,
.deal-pick > .x3,
.deal-pick > .x9 {
  float: none;
  width: auto;
  margin: 0;
}
.deal-player > .x3,
.deal-pick > .x3 {
  flex: none;
}
.deal-player > .x9,
.deal-pick > .x9 {
  flex: 1 1 auto;
  min-width: 0;
}
.deal-player > .cl,
.deal-pick > .cl {
  display: none;
}
.deal-player icons,
.deal-pick icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: 2px;
}
.deal-player ratings,
.deal-pick ratings {
  display: block;
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-secondary);
}
.deal-player ratings span + span,
.deal-pick ratings span + span {
  margin-left: var(--space-1);
}

.deal-player-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
}

.trade-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.trade-roster > .y2 {
  min-width: 0;
}
.trade-roster .trade-gap {
  margin-left: 0;
}
.trade-roster td,
.trade-roster th {
  padding-inline: var(--space-1);
}
.trade-roster .bar {
  margin-bottom: 0;
}

.trade-side {
  min-width: 0;
}
.trade-side > h4 {
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}
.trade-side table + table,
.trade-side table + .trade-prospects {
  margin-top: var(--space-4);
}

.trade-side td {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.trade-row-name {
  min-width: 0;
  font-weight: 600;
}
.trade-row-name a {
  font-weight: 600;
}

.trade-row-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-left: auto;
}

.trade-side-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.trade-salary {
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.trade-previous > h3 {
  margin: 0;
}

.trade-offer-talk,
.my-trade-offer-talk {
  word-wrap: break-word;
}
.trade-offer-talk copy,
.my-trade-offer-talk copy {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-primary);
}
.trade-offer-talk more,
.my-trade-offer-talk more {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.trade-offer-talk owner,
.my-trade-offer-talk owner {
  display: flex;
  flex: none;
  align-items: center;
}
.trade-offer-talk time,
.my-trade-offer-talk time {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-secondary);
}

.trade-offer-talk {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-surface);
}

.my-trade-offer-talk {
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px solid var(--sys-color-border);
}

.trade-talk-title {
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}

.trade-talk-empty {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.trade-talk-compose {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.trade-quick {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.trade-quick form {
  margin: 0;
}
.trade-quick input[type=submit].submit-quick {
  width: 100%;
  margin-bottom: 0;
}

.trade-last-side {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.trade-last-side > .cl {
  display: none;
}

.trade-offer-thumb {
  width: 50px;
}
.trade-offer-thumb .trade-offer-thumb-name {
  margin-top: var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}
.trade-offer-thumb .trade-offer-thumb-name a {
  color: var(--sys-color-text-primary);
}

.trade-last-swap {
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
  font-style: italic;
}

.base-trade {
  min-width: 0;
}
.base-trade.base-trade-accepted, .base-trade.base-trade-declined, .base-trade.base-trade-deleted, .base-trade.base-trade-open {
  /* intentionally no drawing -- see above */
}
.base-trade .base-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
}
.base-trade .base-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.base-trade .photo {
  flex: 0 0 auto;
  line-height: 0;
}
.base-trade .core {
  flex: 1 1 auto;
  min-width: 0;
}
.base-trade .name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}
.base-trade .base-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.base-trade .base-fact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.base-trade .base-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.base-trade .base-thread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--sys-color-border);
}

.base-state {
  flex: 0 0 auto;
  align-self: flex-start;
  white-space: nowrap;
}

.base-trade .base-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
}

.base-trade .team-one,
.base-trade .team-two {
  min-width: 0;
}

.base-trade .team-two {
  border-top: 1px solid var(--sys-color-border);
  padding-top: var(--space-3);
}

@media (min-width: 900px) {
  .base-trade .base-sides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .base-trade .base-sides-single {
    grid-template-columns: 1fr;
  }

  .base-trade .team-two {
    border-top: 0;
    padding-top: 0;
    padding-left: var(--space-4);
  }
}
.base-trade city {
  display: block;
  margin-bottom: var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-secondary);
}

.trade-section,
.fielding-section {
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  font-family: var(--font-serif);
}

.trade-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.trade-block > .trade-section {
  margin-bottom: calc(var(--space-3) - var(--space-4));
}

.trade-history > .empty,
.trade-history > .notice {
  grid-column: 1/-1;
}

.trade-partner {
  display: inline-flex;
  border-radius: 50%;
}
.trade-partner:hover {
  outline: 2px solid var(--sys-color-primary);
  outline-offset: 2px;
}

.trade-interest-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.trade-interest-player {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.trade-interest-player + .trade-interest-player {
  border-top: 1px solid var(--sys-color-border);
}

.trade-interest-photo {
  flex: 0 0 auto;
  width: 18px;
}

.trade-interest-name {
  min-width: 0;
}

.trade-need > .choice {
  flex: 0 1 220px;
}

.trade-need-describe {
  flex: 1 1 260px;
}
.trade-need-describe .input {
  width: 100%;
}

.trade-block .layout-grid > .trade-empty {
  grid-column: 1/-1;
}

.filters {
  display: block;
  margin-bottom: var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-muted);
}
.filters .group {
  display: inline-block;
  margin-right: var(--space-3);
}
.filters .group:last-child {
  margin-right: 0;
}
.filters .title {
  display: inline-block;
  margin-right: 3px;
  padding: 3px;
  color: var(--sys-color-text-primary);
}
.filters a {
  display: inline-block;
  margin-right: 3px;
  text-decoration: none;
}
.filters .on {
  margin-bottom: -3px;
  border-bottom: 3px solid var(--sys-color-primary);
  font-weight: 900;
  text-decoration: none;
}

.base-separator {
  position: relative;
  margin: var(--space-1);
}
.base-separator::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-top: 1px dotted var(--sys-color-primary);
}

.base-separator__label {
  position: relative;
  display: inline-block;
  padding-left: 40px;
  padding-right: var(--space-2);
  background: var(--sys-surface-primary-tint);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  line-height: 1;
  color: var(--sys-color-link);
}

.base-player {
  position: relative;
  display: flex;
  align-items: stretch;
  margin: var(--space-1);
  border-radius: var(--radius-sheet);
  background-color: var(--sys-surface-secondary-tint);
}
.base-player:not(:has(.base-icons)) {
  margin-left: 40px;
}
.base-player.base-player-rule6, .base-player.base-player-unusable, .base-player.base-player-injury {
  margin-left: var(--space-1);
}
.base-player.base-player-injury .injury-return {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 1.4;
}
.base-player.base-player-suspended .base-player-action, .base-player.base-player-unusable .base-player-action {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 1;
}
.base-player.base-player-suspended .base-player-action:hover, .base-player.base-player-unusable .base-player-action:hover {
  background-color: var(--sys-color-link);
}
.base-player .base-icons {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: var(--space-1);
  min-width: 30px;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.base-player .base-icons span, .base-player .base-icons i, .base-player .base-icons svg {
  display: block;
  line-height: 1;
}
.base-player .base-card {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sheet);
  background-color: var(--sys-color-surface);
}
.base-player .base-card .photo {
  flex: 0 0 60px;
  width: 60px;
  text-align: left;
}
.base-player .base-card .core {
  flex: 1 1 200px;
  min-width: 200px;
  text-align: left;
}
.base-player .base-card .core .name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: 18px;
  font-weight: 700;
}
.base-player .base-card .core .starter,
.base-player .base-card .core .platoon {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-small);
  font-size: calc(1em * 0.75);
  font-weight: 600;
  line-height: inherit;
}
.base-player .base-card .core .starter {
  background-color: #EFCA08;
  color: #222222;
}
.base-player .base-card .core .platoon {
  background-color: var(--sys-surface-primary-tint);
}
.base-player .base-card .core .label {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.base-player .base-card .core .rating {
  display: inline-block;
  font-size: 15px;
}
.base-player .base-card .ratings {
  flex: 1 1 160px;
  min-width: 100px;
  text-align: left;
}
.base-player .base-card .ratings .position {
  display: inline-block;
  margin-bottom: var(--space-1);
  padding: 2px var(--space-1);
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-primary-tint);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}
.base-player .base-card .ratings .rating {
  display: inline-block;
  padding: var(--space-1);
  font-size: 15px;
}
.base-player .base-card .actions {
  flex: 1 1 140px;
  min-width: 140px;
  text-align: left;
}
.base-player .base-card .actions .time,
.base-player .base-card .actions .action,
.base-player .base-card .actions .secondary {
  display: inline-block;
  margin-right: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
}
.base-player .base-card .actions .time {
  border: 1px solid var(--sys-surface-primary-tint);
  background-color: var(--sys-surface-primary-tint);
  color: var(--sys-color-text-primary);
  font-size: 15px;
  font-weight: 500;
}
.base-player .base-card .actions .action {
  border: 1px solid var(--sys-color-primary);
  background-color: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
  font-weight: 600;
}
.base-player .base-card .actions .action:hover {
  background-color: var(--sys-color-link);
}
.base-player .base-card .actions .secondary {
  border: 1px solid var(--sys-color-border-strong);
  background-color: transparent;
  color: var(--sys-color-text-primary);
  font-weight: 500;
}
.base-player .base-card .actions .secondary:hover {
  background-color: var(--sys-color-hover);
}

.gird-injury {
  background-color: var(--sys-color-error-subtle);
}

.base-player.gird-injury .base-card {
  background-color: var(--sys-color-error-subtle);
}

.roster-page .layout-rail-main {
  gap: var(--space-2);
}
@media (max-width: 1199.98px) {
  .roster-page .card-mini-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .roster-page .card-mini-container .card-mini {
    flex-shrink: 0;
    min-width: 60px;
  }
}

.roster-callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4);
}

.roster-rail-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  justify-items: start;
}
.roster-rail-form select {
  margin-bottom: 0;
}

.roster-level .card-head h4 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.roster-level .card-head h4 .marker {
  margin-right: 0;
  top: 0;
}
.roster-level .table-scroll + .table-scroll {
  margin-top: var(--space-5);
}

.roster-table {
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.roster-table td {
  white-space: nowrap;
}

.roster-name {
  font-weight: 600;
}

.roster-marks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-left: var(--space-2);
}
.roster-marks .marker {
  margin-right: 0;
}

.roster-table .roster-ratings {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.listing-noteam {
  color: var(--sys-color-text-muted);
  font-style: italic;
}

.negroleague-key {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--control-h);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  white-space: nowrap;
}
.negroleague-key .fa-solid {
  color: var(--sys-color-text-muted);
}

.negroleague-sheet {
  display: block;
}

.negroleague-table tbody td:first-child {
  border-left: 3px solid transparent;
}

.negroleague-table tbody tr.vintage-retiring td {
  background-color: var(--sys-color-warning-subtle);
}

.negroleague-table tbody tr.vintage-retiring td:first-child {
  border-left-color: var(--sys-color-warning-text);
}

.team-card .inside {
  position: relative;
  display: block;
  height: 100%;
  padding: var(--space-4);
  text-align: center;
}
.team-card logo {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto var(--space-3);
}
.team-card team {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  font-weight: 700;
}
.team-card team a {
  color: var(--sys-color-text-primary);
  text-decoration: none;
}
.team-card team a:hover {
  color: var(--sys-color-link);
}
.team-card est {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.team-card owners {
  display: block;
  padding: var(--space-2) 0;
  margin-bottom: var(--space-3);
  border-top: 1px solid var(--sys-color-border);
  border-bottom: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.team-card titles {
  display: block;
  padding-bottom: var(--space-2);
  margin: calc(var(--space-3) * -1) 0 var(--space-3);
  border-bottom: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.team-card extra {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.team-card championships {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  width: 80px;
  height: 46px;
  padding: 13px 6px;
  background: url(/objects/images/icon-banner-champ-teams.png) no-repeat left top;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
}
.team-card a {
  color: var(--sys-color-link);
}

.team-card-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-1);
}

.team-card-owner {
  display: inline-block;
  width: 66px;
  vertical-align: top;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  line-height: 1.2;
}

.team-card-owner-photo {
  padding: 2px;
  margin-bottom: var(--space-1);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius-small);
}

.team-card-owner-first {
  font-weight: 700;
}

.owner-group {
  padding: var(--space-4);
}
.owner-group photo {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
}
.owner-group name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}
.owner-group team {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-secondary);
}
.owner-group > div {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.owner-group a {
  color: var(--sys-color-link);
}

.issue-owner {
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.visit-strip {
  padding: var(--space-1) 0 var(--space-3);
  white-space: nowrap;
  overflow-x: auto;
}

.visit-bar {
  display: inline-block;
  width: 3px;
  height: 18px;
  margin-right: 2px;
  vertical-align: middle;
  background-color: var(--sys-color-skeleton);
}

.visit-bar-on {
  background-color: var(--sys-color-success);
}

.owner-circle-profile-wrap {
  width: 144px;
  height: 144px;
  padding-top: 11px;
  margin: 0 auto;
  border-radius: var(--avatar-radius);
  background-color: var(--sys-color-surface-solid);
}

.owner-circle-profile {
  width: 120px;
  height: 120px;
  margin: auto;
  border: 3px solid var(--sys-color-border-strong);
  border-radius: var(--avatar-radius);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.owner-profile-name {
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.5px;
  text-align: center;
}
.owner-profile-name .last {
  font-weight: 300;
}

.owner-profile-teams,
.owner-contact,
.owner-profile-visit,
.owner-profile-extra {
  margin-top: var(--space-5);
  padding: 0 var(--space-3);
  text-align: center;
}

.owner-profile-teams {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 300;
}
.owner-profile-teams .majors {
  margin-bottom: var(--space-2);
}

.owner-contact {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.owner-profile-visit {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-style: italic;
  color: var(--sys-color-text-muted);
}

.owner-profile-extra {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
}

.owner-profile-qa {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.owner-profile-qa .question {
  font-weight: 600;
}

.owner-profile-titles {
  margin: var(--space-3) 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--sys-featured-gotd-edge);
}

.owner-detail-answer {
  width: 100%;
  min-height: 60px;
}

.shirt {
  min-width: 0;
}

.select-size {
  width: 100%;
  margin-top: var(--space-2);
}

.shirt-reserve {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-link);
}

.shirt-reserve-result {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-success-text);
}

.waitinglist-row {
  display: table-row;
}

.waitinglist-none {
  padding: var(--space-5);
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.shirt-image {
  display: block;
  width: 100%;
}

.shirt-body {
  padding: var(--space-2);
  min-height: 84px;
}

.search-field {
  flex: 1 1 320px;
  max-width: 560px;
}

.search-panel-form {
  width: 100%;
}

.search-recent {
  min-width: 0;
}

.search-recent-list {
  flex-wrap: wrap;
}

.search-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--sys-color-border);
  color: inherit;
  text-decoration: none;
}
.search-row:first-child {
  padding-top: 0;
}
.search-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.search-row:hover {
  background-image: linear-gradient(var(--sys-color-hover), var(--sys-color-hover));
}

.search-row-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-small);
  object-fit: cover;
}

.search-row-body {
  display: block;
  min-width: 0;
}

.search-row-title {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-link);
}

.search-row-by {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.search-row-text {
  display: block;
  margin-top: var(--space-2);
  max-width: 78ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.search-note {
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.search-noclub {
  color: var(--sys-color-text-muted);
}

.draft-where {
  margin-bottom: var(--space-5);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.gg-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
@media (min-width: 1200px) {
  .gg-page {
    grid-template-columns: minmax(0, 1fr) 230px;
  }
}

.gg-lead {
  min-width: 0;
}
.gg-lead .rank-filters {
  flex-wrap: wrap;
}

.gg-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.gg-intro {
  max-width: 68ch;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.gg-list {
  display: flex;
  flex-direction: column;
}

.gg-period {
  padding: var(--space-4) 0 var(--space-1);
  border-bottom: 1px solid var(--sys-color-border);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
}
.gg-period:first-child {
  padding-top: 0;
}

.gg-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  row-gap: 2px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid var(--sys-color-border);
  gap: var(--space-3);
}
.gg-row .gg-when {
  grid-column: 1;
  grid-row: 1;
}
.gg-row .gg-what {
  grid-column: 2;
  grid-row: 1;
}
.gg-row .gg-who {
  grid-column: 2;
  grid-row: 2;
}
.gg-row .gg-where {
  grid-column: 2;
  grid-row: 3;
}
@media (min-width: 1200px) {
  .gg-row {
    grid-template-columns: 90px minmax(180px, 1.3fr) minmax(120px, 1fr) minmax(120px, 1fr);
    align-items: center;
    row-gap: 0;
  }
  .gg-row .gg-when,
.gg-row .gg-what,
.gg-row .gg-who,
.gg-row .gg-where {
    grid-column: auto;
    grid-row: auto;
  }
}

.gg-row-game {
  grid-template-columns: 32px 1fr 60px;
}
.gg-row-game .gg-place {
  grid-column: 1;
  grid-row: 1;
}
.gg-row-game .gg-where {
  grid-column: 2;
  grid-row: 1;
}
.gg-row-game .gg-rating {
  grid-column: 3;
  grid-row: 1;
}
.gg-row-game .gg-when {
  grid-column: 2/4;
  grid-row: 2;
}
@media (min-width: 1200px) {
  .gg-row-game {
    grid-template-columns: 40px 1fr 110px 60px;
  }
  .gg-row-game .gg-place,
.gg-row-game .gg-where,
.gg-row-game .gg-rating,
.gg-row-game .gg-when {
    grid-column: auto;
    grid-row: auto;
  }
}
.gg-row-game .gg-when,
.gg-row-game .gg-where,
.gg-row-game .gg-place,
.gg-row-game .gg-rating,
.gg-row-game .gg-detail {
  font-size: inherit;
}

.gg-row-swing {
  grid-template-columns: 32px 1fr 55px;
}
.gg-row-swing .gg-place {
  grid-column: 1;
  grid-row: 1;
}
.gg-row-swing .gg-who {
  grid-column: 2;
  grid-row: 1;
}
.gg-row-swing .gg-rating {
  grid-column: 3;
  grid-row: 1;
}
.gg-row-swing .gg-when {
  grid-column: 1;
  grid-row: 2;
  text-align: right;
}
.gg-row-swing .gg-where {
  grid-column: 2/4;
  grid-row: 2;
}
@media (min-width: 1200px) {
  .gg-row-swing {
    grid-template-columns: 40px minmax(200px, 1.6fr) 55px minmax(140px, 1fr) 60px;
  }
  .gg-row-swing .gg-place,
.gg-row-swing .gg-who,
.gg-row-swing .gg-rating,
.gg-row-swing .gg-when,
.gg-row-swing .gg-where {
    grid-column: auto;
    grid-row: auto;
    text-align: left;
  }
}
.gg-row-swing .gg-when,
.gg-row-swing .gg-where,
.gg-row-swing .gg-place,
.gg-row-swing .gg-rating {
  font-size: inherit;
}

.gg-when {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
  white-space: nowrap;
}

.gg-what {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.gg-what i {
  flex: none;
  width: 15px;
  text-align: center;
  color: var(--sys-color-primary);
}

.gg-title {
  font-weight: 600;
}

.gg-detail {
  margin-left: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.gg-who {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.gg-face {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.gg-face .player-thumb-no-32px,
.gg-face .team-thumb-32px {
  width: 24px;
  height: 24px;
  background-position: center;
  background-size: cover;
}
.gg-face .team-thumb-32px {
  background-repeat: no-repeat;
  background-size: contain;
}

.gg-name {
  min-width: 0;
}

.gg-result {
  display: inline-block;
  width: 15px;
  border-radius: var(--radius-small);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 700;
  text-align: center;
  color: var(--sys-color-on-status);
}

.gg-win {
  background-color: var(--sys-result-win);
}

.gg-loss {
  background-color: var(--sys-result-loss);
}

.gg-mark {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 700;
  color: var(--sys-color-text-muted);
}

.gg-pog {
  color: var(--sys-color-warning-text);
}

.gg-where {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.gg-where a {
  color: var(--sys-color-text-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--sys-color-border-strong);
}
.gg-where a:hover {
  color: var(--sys-color-link);
}

.gg-where-lead a {
  font-weight: 600;
}

.gg-innings {
  display: inline-block;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background-color: var(--sys-marker-neutral-bg);
  color: var(--sys-marker-neutral-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.gg-place {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--sys-color-text-muted);
  text-align: right;
}

.gg-rating {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.gg-versus {
  padding: 0 2px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.gg-empty {
  padding: var(--space-6) 0;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.gg-board-group {
  padding-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}
.gg-board-group:first-child {
  padding-top: 0;
}

.gg-board .gg-board-title {
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--sys-color-border);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
}
.gg-board .gg-board-note {
  padding-top: 2px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}
.gg-board .gg-board-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.gg-board .gg-board-who {
  min-width: 0;
}
.gg-board .gg-board-n {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gg-board a {
  color: var(--sys-color-link);
}

.block-cards {
  width: 100%;
}

.block-cards .block-item {
  display: flex;
  min-width: 0;
}

.block-cards > .x2 {
  display: flex;
  min-width: 0;
}

.block-cards .inside,
.block-cards .inside-closed,
.block-cards .inside-top,
.block-cards .inside-nottop {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-surface);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface);
  --surface-current: var(--sys-color-surface-solid);
}

.block-cards .block-new,
.block-cards .block-banner-interest {
  display: block;
  padding: var(--space-2) var(--space-3);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  text-align: center;
}

.block-cards .block-new {
  background-color: var(--sys-surface-secondary-tint);
  color: var(--sys-color-text-primary);
}

.block-cards .block-banner-interest {
  background-color: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
}

.block-cards .player-circle-180,
.block-cards .photo-circle-120,
.block-cards .block-logo {
  display: block;
  margin: var(--space-4) auto var(--space-3);
}

.block-cards .block-logo {
  margin-bottom: 0;
}

.block-cards .block-name {
  display: block;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}
.block-cards .block-name a {
  color: var(--sys-color-text-primary);
  text-decoration: none;
}
.block-cards .block-name a:hover {
  color: var(--sys-color-link);
}

.block-cards .block-team {
  display: block;
  margin-top: var(--space-1);
  padding: 0 var(--space-4);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-secondary);
  text-align: center;
}
.block-cards .block-team div {
  display: block;
}

.block-cards .block-markers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0 var(--space-4);
}
.block-cards .block-markers:last-child {
  padding-bottom: var(--space-4);
}
.block-cards .block-markers .marker {
  margin-right: 0;
  top: 0;
}

.block-cards .block-stats {
  display: block;
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-secondary);
  text-align: center;
}

.block-cards .block-photo {
  display: block;
  padding: var(--space-2) var(--space-4) 0;
  text-align: right;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.block-cards .block-photo a {
  color: var(--sys-color-text-secondary);
  text-decoration: none;
}
.block-cards .block-photo a:hover {
  color: var(--sys-color-link);
}

.block-cards .block-links {
  display: block;
  margin-top: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}

.block-cards .block-reference {
  display: block;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--sys-color-border);
  border-bottom: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  text-align: center;
}
.block-cards .block-reference div {
  display: block;
}
.block-cards .block-reference span {
  padding: 0 var(--space-1);
}
.block-cards .block-reference strong {
  color: var(--sys-color-text-primary);
}
.block-cards .block-reference .title {
  margin-bottom: var(--space-1);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-muted);
}

.block-cards .block-body {
  display: block;
  margin-top: var(--space-3);
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-primary);
}

.block-cards .block-noword {
  color: var(--sys-color-text-muted);
  font-style: italic;
}

.block-cards .block-ends {
  display: block;
  margin-top: var(--space-3);
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  text-align: center;
}

.block-cards .block-talk {
  display: block;
  margin-top: var(--space-4);
  padding: 0 var(--space-4);
}

.block-cards .block-comment {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--sys-color-border);
}
.block-cards .block-comment:last-child {
  border-bottom: 0;
}
.block-cards .block-comment .teams-circle-tiny {
  flex: 0 0 auto;
}

.block-cards .block-comment-body {
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-primary);
}

.block-cards .block-comment-by {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}

.block-cards .comments-new {
  padding-left: var(--space-3);
}

.block-cards .comments-fold {
  display: none;
  margin-top: var(--space-3);
}

.block-cards .comments-unlock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--sys-color-link);
  text-decoration: none;
}

.block-cards .block-textarea {
  min-height: 64px;
  resize: vertical;
}

.block-cards .block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--sys-color-border);
  background-color: var(--sys-surface-grouped);
}
.block-cards .block-actions:empty {
  display: none;
}
.block-cards .block-actions .button {
  flex: 1 1 auto;
}
.block-cards .block-actions form {
  display: contents;
}

.block-cards .block-refuse {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.block-cards .response:empty,
.block-cards .inner:empty {
  display: none;
}

.trade-needs + .trade-needs {
  margin-top: var(--space-4);
}

.trade-needs-note {
  margin-bottom: var(--space-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.trade-needs-position {
  margin-bottom: var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-muted);
}

.trade-needs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.trade-needs-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.trade-needs-list li:last-child {
  border-bottom: 0;
}

.trade-needs-club,
.trade-needs-lead {
  font-weight: 600;
  color: var(--sys-color-text-primary);
}
.trade-needs-club a,
.trade-needs-lead a {
  color: inherit;
  text-decoration: none;
}
.trade-needs-club a:hover,
.trade-needs-lead a:hover {
  color: var(--sys-color-link);
}

.trade-needs-expires {
  white-space: nowrap;
  color: var(--sys-color-text-muted);
}

.block-cards .inside-closed {
  background-color: var(--sys-surface-grouped);
}

.block-cards .inside-top {
  border: 2px solid var(--sys-color-success-text);
  background-color: var(--sys-color-success-subtle);
}

.block-cards .inside-nottop {
  border: 2px solid var(--sys-color-error-text);
  background-color: var(--sys-color-error-subtle);
}

.block-cards .winning-bid {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-primary);
}

.block-cards ratings .intop {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-small);
  background-color: var(--sys-marker-neutral-bg);
  color: var(--sys-marker-neutral-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  text-transform: uppercase;
}
.block-cards ratings .auction-others {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}
.block-cards ratings .pricing {
  display: none;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-grouped);
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.block-cards ratings .pricing strong {
  font-weight: 600;
}

.auctionback {
  display: block;
  width: 100%;
}

.auctionfund {
  display: block;
  width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius);
  background-color: var(--sys-surface-primary-tint);
}

.auction-note {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.auction-roster-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--sys-color-border);
}
.auction-roster-row:last-child {
  border-bottom: 0;
}
.auction-roster-row .auction-roster-name {
  flex: 1 1 auto;
  min-width: 0;
}
.auction-roster-row .auction-roster-price {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-secondary);
}
.auction-roster-row .auction-roster-cut {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-error-text);
  white-space: nowrap;
}

.ballpark-factors .irs--round {
  height: 40px;
}
.ballpark-factors .irs--round .irs-line,
.ballpark-factors .irs--round .irs-bar {
  top: 28px;
  height: 4px;
}
.ballpark-factors .irs--round .irs-line {
  background-color: var(--sys-color-switch-track);
}
.ballpark-factors .irs--round .irs-bar {
  background-color: var(--sys-color-primary);
}
.ballpark-factors .irs--round .irs-handle {
  top: 22px;
  width: 16px;
  height: 16px;
  border: 3px solid var(--sys-color-primary);
  background-color: var(--sys-color-surface-solid);
  box-shadow: none;
}
.ballpark-factors .irs--round .irs-handle:hover,
.ballpark-factors .irs--round .irs-handle.state_hover {
  background-color: var(--sys-color-hover);
}
.ballpark-factors .irs--round .irs-min,
.ballpark-factors .irs--round .irs-max {
  padding: 1px var(--space-1);
  background-color: var(--sys-color-selected);
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}
.ballpark-factors .irs--round .irs-from,
.ballpark-factors .irs--round .irs-to,
.ballpark-factors .irs--round .irs-single {
  padding: 1px var(--space-1);
  background-color: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}
.ballpark-factors .irs--round .irs-from::before,
.ballpark-factors .irs--round .irs-to::before,
.ballpark-factors .irs--round .irs-single::before {
  border-top-color: var(--sys-color-primary);
}

.ballpark-frame {
  margin: 0 auto var(--space-5);
  max-width: calc(600px + var(--space-3) * 2);
  padding: var(--space-3);
  border-radius: calc(var(--radius) * 2);
  background-color: var(--park-ground, #2B9348);
  container-type: inline-size;
}

.ballpark-image {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1/1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: clamp(9px, 2.2cqi, 13px);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.ballpark-name {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  background-color: #136639;
  color: #FFFFFF;
  font-size: clamp(12px, 3cqi, 18px);
  font-weight: 600;
}

.ballpark-image .bp-line,
.ballpark-image .bp-rate {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.bp-line,
.bp-rate {
  display: inline-block;
  padding: 0.3em 0.45em;
  border-radius: var(--radius-small);
  text-align: center;
}

.bp-line {
  background-color: #F5E301;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 600;
}

.bp-wall {
  display: block;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
}

.bp-rate {
  background-color: #000000;
  color: #FFFFFF;
}

.bp-line-lfl {
  top: 34%;
  left: 5%;
}

.bp-line-lf {
  top: 24%;
  left: 14%;
}

.bp-line-lfg {
  top: 16%;
  left: 30%;
}

.bp-line-cf {
  top: 12%;
  left: 50%;
}

.bp-line-rfg {
  top: 16%;
  left: 70%;
}

.bp-line-rf {
  top: 24%;
  left: 86%;
}

.bp-line-rfl {
  top: 34%;
  left: 95%;
}

.bp-rate-1b {
  top: 76%;
  left: 68%;
}

.bp-rate-2b {
  top: 61%;
  left: 50%;
}

.bp-rate-3b {
  top: 76%;
  left: 32%;
}

.bp-rate-hr {
  top: 91%;
  left: 50%;
}

.ballpark-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.ballpark-key > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.ballpark-key .bp-wall {
  display: inline;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.pager-count {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.gallery-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.gallery-card {
  overflow: hidden;
  margin-bottom: 0;
}
.gallery-card .card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: var(--space-3);
}

.gallery-image {
  display: block;
  aspect-ratio: 3/4;
  background-color: var(--sys-color-hover);
}
.gallery-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.gallery-image:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(var(--focus-width) * -1);
}

.gallery-player {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  overflow-wrap: anywhere;
}

.gallery-owner,
.gallery-date {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.dep-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 900px) {
  .dep-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .dep-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.dep-stat {
  padding: var(--space-3);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface);
  text-align: center;
}
.dep-stat name {
  display: block;
  margin-bottom: var(--space-1);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 10px;
}
.dep-stat data {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-primary);
}
.dep-stat note {
  display: block;
  margin-top: 3px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-secondary);
}

.dep-up {
  color: var(--sys-color-success-text);
  font-weight: 600;
}

.dep-down {
  color: var(--sys-color-text-secondary);
  font-weight: 600;
}

.dep-years {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  overflow-x: auto;
}

.dep-year {
  flex: 1 1 0;
  min-width: 2.4em;
  text-align: center;
}

.dep-year-bar {
  display: flex;
  align-items: flex-end;
  height: 120px;
}
.dep-year-bar span {
  display: block;
  width: 100%;
  border-radius: 2px 2px 0 0;
  background-color: var(--sys-color-primary);
}

.dep-year-now .dep-year-bar span {
  background-color: var(--sys-color-warning);
}

.dep-year-n {
  margin-top: 3px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-size: 10px;
  color: var(--sys-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.dep-year-y {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--sys-color-text-primary);
}

.dep-split {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.dep-split span + span {
  margin-left: var(--space-4);
}
.dep-split strong {
  color: var(--sys-color-text-primary);
}

.dep-week {
  display: block;
}

.dep-wd {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr) 3em;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.dep-wd-name {
  order: -1;
  font-weight: 600;
  color: var(--sys-color-text-primary);
}

.dep-wd-n {
  color: var(--sys-color-text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dep-wd-bar {
  height: 14px;
  border-radius: 3px;
  background-color: var(--sys-color-skeleton);
}
.dep-wd-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background-color: var(--sys-color-primary);
}

.deployment-calendar {
  margin-bottom: var(--space-5);
}

.calendar-month {
  margin-bottom: var(--space-5);
}
.calendar-month h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 14px;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--sys-color-border);
  border-radius: 2px;
  background-color: var(--sys-color-surface);
  line-height: 1.1;
  color: var(--sys-color-text-secondary);
}
.calendar-day .day-num {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-size: 10px;
  opacity: 0.7;
}
.calendar-day .day-count {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 700;
}
.calendar-day.level-0 .day-count {
  visibility: hidden;
}

.calendar-day.empty {
  border-color: transparent;
  background: none;
}

.calendar-day.level-1,
.calendar-day.level-2,
.calendar-day.level-3 {
  border-color: transparent;
  font-weight: 600;
}

.calendar-day.level-1 {
  background-color: #B6D5E8;
  color: #1A1A1A;
}

.calendar-day.level-2 {
  background-color: #4E93BE;
  color: #1A1A1A;
}

.calendar-day.level-3 {
  background-color: #006397;
  color: #FFFFFF;
}

.insights {
  --insights-accent: var(--sys-color-primary);
  --insights-muted: var(--sys-color-text-muted);
  --insights-line: var(--sys-color-border);
}

.insights-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--insights-line);
}
.insights-head h2 {
  margin: var(--space-1) 0 0;
}

.insights-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--insights-muted);
}

.insights-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--insights-muted);
  text-align: right;
}

.insights-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.insights-filters {
  margin-top: var(--space-4);
}

.insights-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1 1 auto;
}

.insights-chip {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--sys-color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--sys-color-input-bg);
  color: var(--sys-color-text-primary);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.insights-chip:hover {
  border-color: var(--insights-accent);
}
.insights-chip.on {
  background: var(--insights-accent);
  border-color: var(--insights-accent);
  color: var(--sys-color-on-primary);
}

.insights-card {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background: var(--sys-color-surface);
}

.insights-story {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}
.insights-story h3 {
  margin: 0 0 var(--space-1);
}
.insights-story p {
  margin: 0;
  line-height: 1.5;
  color: var(--sys-color-text-secondary);
}

.insights-ref {
  max-width: 200px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--insights-muted);
  text-align: right;
}

.insights-grid {
  display: flex;
  gap: var(--space-2);
}

.insights-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-self: flex-start;
  width: 42px;
  height: 560px;
}
.insights-yaxis .insights-axis-name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.insights-plotcol {
  flex: 1;
  min-width: 0;
}

.insights-axis-name {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  letter-spacing: 0.08em;
  color: var(--sys-color-text-secondary);
}

.insights-tick {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--insights-muted);
}

.insights-plot {
  position: relative;
  width: 100%;
  height: 560px;
  border: 1px solid var(--sys-color-border-strong);
  border-radius: var(--radius-small);
  overflow: visible;
  background-color: var(--sys-color-hover);
  background-image: linear-gradient(var(--sys-color-hover) 1px, transparent 1px), linear-gradient(90deg, var(--sys-color-hover) 1px, transparent 1px);
  background-size: 100% 10%, 10% 100%;
}

.insights-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.insights-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.insights-line {
  stroke: var(--insights-accent);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

.insights-line-league {
  stroke: var(--sys-color-border-strong);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.insights-hint {
  position: absolute;
  max-width: 160px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--insights-muted);
  pointer-events: none;
}
.insights-hint.tl {
  top: 10px;
  left: 12px;
}
.insights-hint.tr {
  top: 10px;
  right: 12px;
  text-align: right;
}
.insights-hint.bl {
  bottom: 10px;
  left: 12px;
}
.insights-hint.br {
  bottom: 10px;
  right: 12px;
  text-align: right;
}

.insights-avg {
  position: absolute;
  z-index: 5;
  padding: 2px var(--space-1);
  border-radius: 3px;
  background: var(--sys-color-surface-solid);
  color: var(--insights-accent);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
}

.insights-avg-x {
  top: 4px;
  transform: translateX(-50%);
}

.insights-avg-y {
  left: 4px;
  transform: translateY(-50%);
}

.insights-avg-league {
  color: var(--sys-color-text-muted);
}
.insights-avg-league.insights-avg-x {
  top: auto;
  bottom: 4px;
}
.insights-avg-league.insights-avg-y {
  left: auto;
  right: 4px;
}

.insights-mark {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--sys-color-surface-solid);
  border-radius: var(--radius-pill);
  background-color: var(--sys-color-surface-solid);
  background-position: center;
  background-size: cover;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: left 0.6s cubic-bezier(0.4, 0, 0.15, 1), top 0.6s cubic-bezier(0.4, 0, 0.15, 1), transform 0.15s ease, opacity 0.15s ease;
}
.insights-mark:hover {
  z-index: 40;
  transform: translate(-50%, -50%) scale(1.5);
}
.insights-mark.dim {
  opacity: 0.16;
}
.insights-mark.mine {
  z-index: 30;
  border-color: var(--insights-accent);
  box-shadow: 0 0 0 3px var(--insights-accent);
}
.insights-mark.mine.dim {
  opacity: 1;
}

.insights-tip {
  position: absolute;
  z-index: 60;
  transform: translate(-50%, calc(-100% - 24px));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  background: #1A2535;
  color: #F5F7FA;
  white-space: nowrap;
  pointer-events: none;
}
.insights-tip strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 700;
}
.insights-tip span {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  line-height: 1.5;
  color: #8F9AA7;
}
.insights-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  background: #1A2535;
  transform: translateX(-50%) rotate(45deg);
}

.insights-xaxis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
  padding: 0 2px;
}

.insights-foot {
  margin: var(--space-3) 2px 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--insights-muted);
}

.insights-player .insights-mark {
  width: 42px;
  height: 42px;
  font-size: 11px;
}

@media (max-width: 1199.98px) {
  .insights-plot {
    height: 440px;
  }

  .insights-yaxis {
    height: 440px;
  }

  .insights-mark {
    width: 28px;
    height: 28px;
    font-size: 9px;
  }

  .insights-player .insights-mark {
    width: 34px;
    height: 34px;
  }

  .insights-story p {
    max-width: none;
  }
}
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: var(--space-2);
  border: 1px solid var(--sys-color-border-strong);
  border-radius: var(--radius);
  background: var(--sys-color-input-bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.chips:focus-within {
  border-color: var(--focus-color);
  outline: var(--focus-width, 2px) solid var(--focus-color);
  outline-offset: var(--focus-offset, 2px);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius-pill);
  background: var(--sys-marker-neutral-bg);
  color: var(--sys-marker-neutral-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  line-height: 1.3;
  user-select: none;
}

.chip button.x {
  margin-left: var(--space-1);
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.chip button.x:hover {
  color: var(--sys-color-error-text);
}

.chips input[type=text] {
  flex: 1;
  min-width: 150px;
  padding: var(--space-2);
  border: none;
  outline: none;
  background: transparent;
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.ui-autocomplete {
  position: absolute !important;
  z-index: var(--z-panel);
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: 220px;
  box-sizing: border-box;
  overflow-y: auto;
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-overlay);
  border-radius: var(--radius);
  background: var(--sys-color-surface-solid);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ui-menu-item-wrapper {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.ui-state-active,
.ui-menu-item-wrapper:hover {
  border: none !important;
  background-color: var(--sys-color-primary) !important;
  color: var(--sys-color-on-primary) !important;
}

.mail-results,
.mail-detail {
  min-width: 0;
}

.mail-threads {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.mail-thread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface);
  color: var(--sys-color-text-primary);
  text-decoration: none;
}
.mail-thread:hover {
  border-color: var(--sys-color-border-strong);
  background-color: var(--sys-color-hover);
}
.mail-thread:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.mail-thread-current {
  background-color: var(--sys-color-selected);
  border-color: var(--sys-color-primary);
  border-bottom-width: var(--elevation-modal);
}
.mail-thread-current .mail-thread-subject {
  color: var(--sys-color-primary);
}

.mail-thread-unread .mail-thread-subject {
  font-weight: 700;
}

.mail-thread-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.mail-thread-subject {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mail-thread-markers {
  flex: none;
}
.mail-thread-markers .marker {
  margin-right: 0;
}
.mail-thread-markers .marker + .marker {
  margin-left: var(--space-1);
}

.mail-thread-markers:empty {
  display: none;
}

.mail-thread-with {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-thread-with:empty {
  display: none;
}

.mail-thread-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}

.mail-thread-count {
  font-variant-numeric: tabular-nums;
}

.mail-thread-date {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.mail-actions {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.mail-actions > .button:only-child {
  grid-column: 1/-1;
}
@media (max-width: 599.98px) {
  .mail-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mail-notifications {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.mail-disclosure-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-touch);
  padding: 0 var(--control-pad-x);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  cursor: pointer;
  list-style: none;
}
.mail-disclosure-summary::-webkit-details-marker {
  display: none;
}
.mail-disclosure-summary:hover {
  background-color: var(--sys-color-hover);
}
.mail-disclosure-summary:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.mail-disclosure-summary [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: calc(16px * 0.8);
  line-height: 1;
}

.mail-disclosure-label {
  flex: 1 1 auto;
}

.mail-disclosure-chevron {
  color: var(--sys-color-text-secondary);
  transition: transform 0.15s ease;
}

.mail-disclosure[open] .mail-disclosure-chevron {
  transform: rotate(180deg);
}

.mail-disclosure[open] .mail-disclosure-summary {
  margin-bottom: var(--space-3);
}

@media (min-width: 900px) {
  .mail-disclosure-summary {
    display: none;
  }
}
.mail-search {
  margin-bottom: var(--space-4);
}

.mail-searching {
  display: none;
}

.mail-owners {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.mail-owner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-1);
  text-align: center;
}

.mail-owner .marker {
  margin-right: 0;
}

.mail-byline {
  margin-bottom: var(--space-5);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.mail-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  overflow-wrap: anywhere;
}
.mail-body p {
  margin-bottom: var(--space-4);
}
.mail-body p:last-child {
  margin-bottom: 0;
}

.mail-discussion > .journal-break:first-child {
  padding-top: 0;
}

.mail-discussion a {
  font-weight: 600;
}

.mail-discussion .mail-compose {
  margin-top: var(--space-6);
}

.mail-compose .uploader {
  margin-bottom: 0;
}

.mail-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.mail-compose label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.thumbnail-form {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
}
@media (max-width: 599.98px) {
  .thumbnail-form {
    flex-direction: column;
    align-items: stretch;
  }
}

.thumbnail-form-url {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  min-width: 0;
}
.thumbnail-form-url #grabimage {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  margin: 0;
}
.thumbnail-form-url .submit {
  flex: none;
  height: 46px;
  margin: 0;
}

.thumbnail-form-label {
  flex: none;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.thumbnail-form-label strong {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}
.thumbnail-form-label span {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.thumbnail-form-or {
  flex: none;
  align-self: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
}

.thumbnail-drop {
  box-sizing: border-box;
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: var(--space-3);
  border: 2px dashed var(--sys-color-border-strong);
  border-radius: var(--radius);
  color: var(--sys-color-text-secondary);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
@media (max-width: 599.98px) {
  .thumbnail-drop {
    flex-basis: auto;
  }
}
.thumbnail-drop input[type=file] {
  display: none;
}
.thumbnail-drop .fa-solid {
  margin-bottom: var(--space-1);
  font-size: 22px;
}
.thumbnail-drop .drop-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  line-height: 1.3;
}

.thumbnail-drop:hover,
.thumbnail-drop.dragover {
  border-color: var(--sys-color-primary);
  background: var(--sys-surface-primary-tint);
  color: var(--sys-color-primary);
}

.upload-progress {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--tabbar-h) + var(--space-4) + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  width: 340px;
  max-width: calc(100vw - var(--space-8));
  overflow: hidden;
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-overlay);
  border-radius: var(--radius);
  background: var(--sys-color-surface-solid);
}
@media (min-width: 900px) {
  .upload-progress {
    bottom: var(--space-4);
  }
}

.upload-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--sys-color-border);
  background: var(--sys-surface-grouped);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.upload-progress-close {
  color: var(--sys-color-text-muted);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}
.upload-progress-close:hover {
  color: var(--sys-color-text-primary);
}

.upload-progress-summary {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.upload-progress-list {
  max-height: 320px;
  overflow-y: auto;
}

.upload-row {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--sys-color-border);
}

.upload-thumb {
  flex: none;
  width: 40px;
  height: 40px;
  margin-right: var(--space-2);
  border-radius: var(--radius-small);
  background: var(--sys-color-skeleton) center/cover no-repeat;
}

.upload-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.upload-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-status {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-secondary);
}

.upload-row[data-state=done] .upload-status {
  color: var(--sys-color-success-text);
}

.upload-row[data-state=error] .upload-status {
  color: var(--sys-color-error-text);
}

.upload-row[data-state=crop] .upload-status,
.upload-row[data-state=cropping] .upload-status {
  color: var(--sys-color-warning-text);
}

.media {
  min-width: 0;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 200px));
  justify-content: start;
  gap: var(--space-3);
  align-items: start;
}
.media-grid > :not(.media-block) {
  grid-column: 1/-1;
}
.media-grid .media-block .inside,
.media-grid .media-block .inside-prime {
  padding: var(--space-2);
}
.media-grid .media-block img {
  margin-bottom: var(--space-2);
}

.media-block {
  min-width: 0;
}
.media-block .inside {
  display: block;
  padding: var(--space-3);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface);
}
.media-block .inside-prime {
  display: block;
  padding: var(--space-2);
  border: 3px solid var(--sys-color-primary);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface);
}
.media-block img {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
}
.media-block .type-title {
  margin: var(--space-3) 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}
.media-block .postby {
  display: inline-block;
  padding: 1px var(--space-1) 2px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.thumbnails-back {
  padding: var(--space-4);
}

#thumbnail-window {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  overflow: auto;
  background: var(--sys-color-surface-solid);
}

#thumbnail-window > form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-height: 100%;
  padding: var(--space-5) var(--page-pad);
}

#thumbnail-window #upload-demo {
  max-width: 100%;
}

.crop-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  cursor: pointer;
}

.crop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.thumbnail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.thumbnail-list li {
  padding: var(--space-1) 0;
  break-inside: avoid;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 900px) {
  .thumbnail-list-columns {
    columns: 2;
    column-gap: var(--grid-gap);
  }
}

.thumbnail-list-club {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.uploader {
  display: block;
  margin-bottom: var(--space-5);
}

.uploader-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.uploader-drop-sub {
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.uploader-browse {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sys-color-link);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.uploader-browse:hover {
  color: var(--sys-color-text-primary);
}
.uploader-browse:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-small);
}

.uploader-drop.is-compact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--control-pad-y) var(--control-pad-x);
  border-width: 1px;
  border-radius: var(--radius-small);
  text-align: left;
}
.uploader-drop.is-compact .uploader-browse {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.uploader-compact-hint {
  color: var(--sys-color-text-muted);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.uploader-notice {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-grouped);
  color: var(--sys-color-warning-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.uploader-notice.is-shown {
  display: block;
}

.uploader-queue {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.upload-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-grouped);
}
.upload-item input[type=hidden] {
  display: none;
}
.upload-item.is-failed {
  background-color: var(--sys-surface-grouped);
  box-shadow: inset 3px 0 0 var(--sys-color-error);
}

.upload-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-small);
  background-color: var(--sys-color-hover);
  background-size: cover;
  background-position: center;
}

.upload-body {
  flex: 1 1 auto;
  min-width: 0;
}

.upload-name {
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-status {
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.is-failed .upload-status {
  color: var(--sys-color-error-text);
}

.upload-bar {
  margin-top: var(--space-1);
  height: 3px;
  border-radius: 2px;
  background-color: var(--sys-color-hover);
  overflow: hidden;
}

.upload-bar-fill {
  width: 0;
  height: 100%;
  background-color: var(--sys-color-primary);
  transition: width 0.15s ease;
}

.upload-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-touch);
  height: var(--control-touch);
  font-size: calc(var(--control-touch) * 0.8);
  line-height: 1;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--sys-color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.upload-remove:hover {
  background-color: var(--sys-color-hover);
  color: var(--sys-color-error-text);
}
.upload-remove:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(var(--focus-offset) * -1);
}

.watchlist-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.watchlist-pick-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchlist-pick-count {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.watchlist-pick[aria-current=page] .watchlist-pick-count {
  color: var(--sys-color-primary);
}

.watchlist-create {
  padding-top: var(--space-4);
  border-top: 1px solid var(--sys-color-border);
}

.watchlist-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.watchlist-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--sys-color-border);
}
.watchlist-row:last-child {
  border-bottom: 0;
}
.watchlist-row:hover {
  background-color: var(--sys-color-hover);
}

.watchlist-row.ui-sortable-helper {
  background-color: var(--sys-color-surface-solid);
  box-shadow: 0 0 0 1px var(--sys-color-border-strong);
}

.watchlist-row.ui-sortable-placeholder {
  visibility: hidden;
}

.watchlist-grip {
  flex: none;
  color: var(--sys-color-text-muted);
  cursor: grab;
}
.watchlist-grip:active {
  cursor: grabbing;
}

.watchlist-list:not(.ui-sortable) .watchlist-grip {
  cursor: default;
  opacity: 0.4;
}

.watchlist-team {
  margin-left: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-secondary);
  text-decoration: none;
}
.watchlist-team:hover {
  color: var(--sys-color-text-primary);
  text-decoration: underline;
}

.watchlist-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.watchlist-name a {
  font-weight: 600;
}

.watchlist-flags {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.watchlist-flags .marker {
  margin-right: 0;
}

.watchlist-flags:empty {
  display: none;
}

.watchlist-remove {
  flex: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: calc(32px * 0.8);
  line-height: 1;
  font-size: 14px;
  border-radius: var(--radius-small);
  color: var(--sys-color-text-muted);
}
.watchlist-remove:hover {
  background-color: var(--sys-color-hover);
  color: var(--sys-color-error-text);
}
.watchlist-remove:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(var(--focus-offset) * -1);
}

.watchlist-count {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.watchlist-sortupdate,
.watchlist-saved {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-success-text);
}

.watchlist-sortupdate:empty,
.watchlist-saved:empty {
  display: none;
}

.watchlist-sortupdate {
  margin-bottom: var(--space-3);
}

.watchlist-saved {
  margin-top: var(--space-3);
}

.watchlist-year .input {
  max-width: 8ch;
}

.watchlist-contents {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--sys-color-text-secondary);
}
.watchlist-contents li + li {
  margin-top: var(--space-1);
}

textarea.watchlist-copy-field,
input.watchlist-copy-field {
  font-family: var(--font-mono);
  color: var(--sys-color-text-secondary);
}

.md-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--sys-color-border-strong);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background-color: var(--sys-surface-grouped);
}
.md-toolbar + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.md-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-touch);
  height: var(--control-touch);
  font-size: calc(var(--control-touch) * 0.8);
  line-height: 1;
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--sys-color-text-secondary);
  font-size: 14px;
  cursor: pointer;
}
.md-button:hover {
  background-color: var(--sys-color-hover);
  color: var(--sys-color-text-primary);
}
.md-button:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(var(--focus-offset) * -1);
}
.md-button svg,
.md-button .svg-inline--fa {
  width: 1em;
  height: 1em;
}

.md-hint {
  margin-left: auto;
  padding-right: var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-secondary);
}

.md-notice {
  display: none;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-grouped);
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.md-notice.is-shown {
  display: block;
}

.sitemap-board {
  overflow-x: auto;
  padding-bottom: var(--space-5);
}

.sitemap-columns {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-7);
  min-width: min-content;
}
.sitemap-columns::before {
  content: "";
  position: absolute;
  top: 15px;
  left: var(--space-5);
  right: var(--space-5);
  border-top: 2px solid var(--sys-color-border-strong);
}

.sitemap-home-col,
.sitemap-column {
  flex: none;
}

.node {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}
.node .dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--sys-color-primary);
  box-shadow: 0 0 0 4px var(--sys-color-surface-solid);
}
.node .node-icon {
  flex: none;
  width: 18px;
  font-size: 14px;
  text-align: center;
  color: var(--sys-color-primary);
  background: var(--sys-color-surface-solid);
}
.node a.label {
  color: var(--sys-color-link);
  text-decoration: none;
}
.node a.label:hover {
  text-decoration: underline;
}

.node-home,
.node-section {
  min-height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
}

.node-home {
  background: #1A2535;
  color: #F5F7FA;
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  letter-spacing: 0.12em;
  text-decoration: none;
}
.node-home .label {
  position: relative;
  top: -1px;
  color: inherit;
}

.node-section {
  background: var(--sys-surface-primary-tint);
  color: var(--sys-color-primary);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 14px;
}
.node-section .dot {
  width: 12px;
  height: 12px;
}

.node-module {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-primary);
}

.node-page {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-primary);
}
.node-page .dot {
  width: 8px;
  height: 8px;
  background: var(--sys-color-text-muted);
}

.sitemap-tree,
.sitemap-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitemap-tree ul {
  margin-left: var(--space-3);
}

.sitemap-root > .node-section {
  margin-bottom: var(--space-3);
}

.sitemap-tree ul > li {
  position: relative;
  padding-left: var(--space-6);
  padding-bottom: var(--space-3);
}
.sitemap-tree ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-left: 2px solid var(--sys-color-border-strong);
}
.sitemap-tree ul > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: var(--space-6);
  border-top: 2px solid var(--sys-color-border-strong);
}
.sitemap-tree ul > li:last-child {
  padding-bottom: 0;
}
.sitemap-tree ul > li:last-child::before {
  height: 9px;
}

.sitemap-tree .sitemap-break {
  padding-top: 2px;
}
.sitemap-tree .sitemap-break::after {
  display: none;
}
.sitemap-tree .sitemap-break .sitemap-break-label {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 11px;
  letter-spacing: 0.07em;
}

.core-title,
.journal-title {
  margin: var(--space-3) var(--space-3) var(--space-5) 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.journal-subtitle {
  margin-bottom: var(--space-4);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 300;
  color: var(--sys-color-text-secondary);
}

.journal-byline {
  margin-bottom: var(--space-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 700;
}

.journal-date {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.journal-base {
  padding: var(--space-6);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface);
  overflow: visible;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.6;
}
.journal-base h1, .journal-base h2, .journal-base h3, .journal-base h4, .journal-base h5, .journal-base h6 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  line-height: 1.3;
  color: var(--sys-color-text-primary);
}
.journal-base h1:first-child, .journal-base h2:first-child, .journal-base h3:first-child, .journal-base h4:first-child, .journal-base h5:first-child, .journal-base h6:first-child {
  margin-top: 0;
}
.journal-base h1 {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--sys-color-border);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.journal-base h2 {
  font-size: 22px;
  font-weight: 700;
}
.journal-base h3 {
  font-size: 19px;
  font-weight: 600;
}
.journal-base h4 {
  font-size: 17px;
  font-weight: 600;
}
.journal-base h5 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  font-family: var(--font-sans);
}
.journal-base h6 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--sys-color-text-secondary);
}
.journal-base p {
  margin-top: 0;
  margin-bottom: var(--space-4);
}
.journal-base p:last-child {
  margin-bottom: 0;
}
.journal-base a {
  color: var(--sys-color-link);
  text-decoration: underline;
}
.journal-base a:hover {
  text-decoration: none;
}
.journal-base strong, .journal-base b {
  font-weight: 700;
}
.journal-base em, .journal-base i {
  font-style: italic;
}
.journal-base del {
  text-decoration: line-through;
  opacity: 0.7;
}
.journal-base ul, .journal-base ol {
  margin-top: 0;
  margin-bottom: var(--space-4);
  padding-left: 30px;
}
.journal-base ul:last-child, .journal-base ol:last-child {
  margin-bottom: 0;
}
.journal-base ul {
  list-style-type: disc;
}
.journal-base ul ul {
  list-style-type: circle;
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}
.journal-base ul ul ul {
  list-style-type: square;
}
.journal-base ol {
  list-style-type: decimal;
}
.journal-base ol ol {
  list-style-type: lower-alpha;
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}
.journal-base ol ol ol {
  list-style-type: lower-roman;
}
.journal-base li {
  margin-bottom: var(--space-2);
}
.journal-base li:last-child {
  margin-bottom: 0;
}
.journal-base li > p {
  margin-bottom: var(--space-2);
}
.journal-base blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--sys-color-border-strong);
  background-color: var(--sys-color-hover);
  color: var(--sys-color-text-secondary);
  font-style: italic;
}
.journal-base blockquote p:last-child {
  margin-bottom: 0;
}
.journal-base blockquote blockquote {
  margin: var(--space-3) 0;
  border-left-color: var(--sys-color-border);
}
.journal-base code {
  padding: 3px var(--space-2);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-hover);
  color: var(--sys-color-error-text);
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.journal-base pre {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background-color: var(--sys-color-hover);
}
.journal-base pre code {
  padding: 0;
  background-color: transparent;
  color: var(--sys-color-text-primary);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 14px;
  line-height: 1.5;
}
.journal-base hr {
  height: 2px;
  margin: var(--space-6) 0;
  border: 0;
  background-color: var(--sys-color-border);
}
.journal-base img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-5) 0;
  border-radius: var(--radius);
}
.journal-base table {
  width: 100%;
  margin: var(--space-5) 0;
  border-collapse: collapse;
}
.journal-base table thead {
  background-color: var(--sys-color-hover);
}
.journal-base table thead tr {
  border-bottom: 2px solid var(--sys-color-border);
}
.journal-base table thead th {
  padding: var(--space-2) var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 700;
  text-align: left;
  color: var(--sys-color-text-primary);
}
.journal-base table tbody tr {
  border-bottom: 1px solid var(--sys-color-border);
}
.journal-base table tbody tr:last-child {
  border-bottom: none;
}

.journal-asset-wrapper {
  min-width: 0;
  margin-bottom: var(--space-5);
}
@media (min-width: 900px) {
  .journal-asset-wrapper {
    float: right;
    width: 38%;
    margin-top: var(--space-5);
    margin-right: var(--space-5);
    margin-left: var(--space-6);
  }
}
.journal-asset-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.journal-asset-wrapper img {
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-overlay);
}

.todo-add {
  margin-top: var(--space-3);
}

.todo-add-form {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.todo-add-form textarea.input {
  flex: 1 1 auto;
  min-height: 60px;
}
.todo-add-form input[type=hidden] {
  display: none;
}

.todo-toggle-row {
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.journal-head {
  margin-bottom: var(--space-5);
}

.journal-head .journal-title {
  margin-top: 0;
}

.journal-head-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.comment-tools.journal-tools {
  width: auto;
  gap: var(--space-2);
}
.comment-tools.journal-tools form {
  margin: 0;
}

.journal-head-face {
  flex: none;
  display: flex;
  align-items: center;
}

.journal-head-meta {
  min-width: 0;
}

.journal-head-name a {
  font-weight: 600;
}

.journal-comments .journal-break:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.journal-reply {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--sys-color-border);
  gap: var(--space-4);
}
.journal-reply .form-field {
  gap: var(--space-1);
}
.journal-reply .uploader {
  margin-bottom: 0;
}

.journal-comments {
  margin-top: var(--space-6);
}
.journal-comments iframe {
  max-width: 100%;
}
.journal-comments .core-body img {
  max-width: 100%;
  height: auto;
}

.journal-comments .core-body,
.mail-discussion .core-body,
.faq-list .core-body,
.potd-card .core-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.6;
}
.journal-comments .core-body > :first-child,
.mail-discussion .core-body > :first-child,
.faq-list .core-body > :first-child,
.potd-card .core-body > :first-child {
  margin-top: 0;
}
.journal-comments .core-body > :last-child,
.mail-discussion .core-body > :last-child,
.faq-list .core-body > :last-child,
.potd-card .core-body > :last-child {
  margin-bottom: 0;
}
.journal-comments .core-body p,
.mail-discussion .core-body p,
.faq-list .core-body p,
.potd-card .core-body p {
  margin-top: 0;
  margin-bottom: var(--space-3);
}
.journal-comments .core-body h1, .journal-comments .core-body h2, .journal-comments .core-body h3, .journal-comments .core-body h4, .journal-comments .core-body h5, .journal-comments .core-body h6,
.mail-discussion .core-body h1,
.mail-discussion .core-body h2,
.mail-discussion .core-body h3,
.mail-discussion .core-body h4,
.mail-discussion .core-body h5,
.mail-discussion .core-body h6,
.faq-list .core-body h1,
.faq-list .core-body h2,
.faq-list .core-body h3,
.faq-list .core-body h4,
.faq-list .core-body h5,
.faq-list .core-body h6,
.potd-card .core-body h1,
.potd-card .core-body h2,
.potd-card .core-body h3,
.potd-card .core-body h4,
.potd-card .core-body h5,
.potd-card .core-body h6 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  line-height: 1.3;
  color: var(--sys-color-text-primary);
}
.journal-comments .core-body h1:first-child, .journal-comments .core-body h2:first-child, .journal-comments .core-body h3:first-child, .journal-comments .core-body h4:first-child, .journal-comments .core-body h5:first-child, .journal-comments .core-body h6:first-child,
.mail-discussion .core-body h1:first-child,
.mail-discussion .core-body h2:first-child,
.mail-discussion .core-body h3:first-child,
.mail-discussion .core-body h4:first-child,
.mail-discussion .core-body h5:first-child,
.mail-discussion .core-body h6:first-child,
.faq-list .core-body h1:first-child,
.faq-list .core-body h2:first-child,
.faq-list .core-body h3:first-child,
.faq-list .core-body h4:first-child,
.faq-list .core-body h5:first-child,
.faq-list .core-body h6:first-child,
.potd-card .core-body h1:first-child,
.potd-card .core-body h2:first-child,
.potd-card .core-body h3:first-child,
.potd-card .core-body h4:first-child,
.potd-card .core-body h5:first-child,
.potd-card .core-body h6:first-child {
  margin-top: 0;
}
.journal-comments .core-body h1,
.mail-discussion .core-body h1,
.faq-list .core-body h1,
.potd-card .core-body h1 {
  font-size: 19px;
  font-weight: 700;
}
.journal-comments .core-body h2,
.mail-discussion .core-body h2,
.faq-list .core-body h2,
.potd-card .core-body h2 {
  font-size: 17px;
  font-weight: 700;
}
.journal-comments .core-body h3,
.journal-comments .core-body h4,
.journal-comments .core-body h5,
.journal-comments .core-body h6,
.mail-discussion .core-body h3,
.mail-discussion .core-body h4,
.mail-discussion .core-body h5,
.mail-discussion .core-body h6,
.faq-list .core-body h3,
.faq-list .core-body h4,
.faq-list .core-body h5,
.faq-list .core-body h6,
.potd-card .core-body h3,
.potd-card .core-body h4,
.potd-card .core-body h5,
.potd-card .core-body h6 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
}
.journal-comments .core-body ul, .journal-comments .core-body ol,
.mail-discussion .core-body ul,
.mail-discussion .core-body ol,
.faq-list .core-body ul,
.faq-list .core-body ol,
.potd-card .core-body ul,
.potd-card .core-body ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}
.journal-comments .core-body ul,
.mail-discussion .core-body ul,
.faq-list .core-body ul,
.potd-card .core-body ul {
  list-style-type: disc;
}
.journal-comments .core-body ol,
.mail-discussion .core-body ol,
.faq-list .core-body ol,
.potd-card .core-body ol {
  list-style-type: decimal;
}
.journal-comments .core-body li,
.mail-discussion .core-body li,
.faq-list .core-body li,
.potd-card .core-body li {
  margin-bottom: var(--space-1);
}
.journal-comments .core-body blockquote,
.mail-discussion .core-body blockquote,
.faq-list .core-body blockquote,
.potd-card .core-body blockquote {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--sys-color-border);
  color: var(--sys-color-text-secondary);
}
.journal-comments .core-body code,
.mail-discussion .core-body code,
.faq-list .core-body code,
.potd-card .core-body code {
  padding: 1px var(--space-1);
  border-radius: var(--radius-small);
  background: var(--sys-surface-grouped);
  font-family: var(--font-mono);
  font-size: 12px;
}
.journal-comments .core-body pre,
.mail-discussion .core-body pre,
.faq-list .core-body pre,
.potd-card .core-body pre {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-small);
  background: var(--sys-surface-grouped);
  overflow-x: auto;
}
.journal-comments .core-body pre code,
.mail-discussion .core-body pre code,
.faq-list .core-body pre code,
.potd-card .core-body pre code {
  padding: 0;
  background: none;
}
.journal-comments .core-body a,
.mail-discussion .core-body a,
.faq-list .core-body a,
.potd-card .core-body a {
  color: var(--sys-color-link);
}
.journal-comments .core-body hr,
.mail-discussion .core-body hr,
.faq-list .core-body hr,
.potd-card .core-body hr {
  margin: var(--space-4) 0;
  border: 0;
  border-top: 1px solid var(--sys-color-border);
}

.bonus-author,
.bonus-author-green {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}

.bonus-author {
  color: var(--sys-color-text-secondary);
}

.bonus-author-green {
  color: var(--sys-color-success-text);
}

.bonus-author a,
.bonus-author-green a,
.nsfw-author a,
a.bonus {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-touch);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  text-decoration: none;
}
.bonus-author a:hover,
.bonus-author-green a:hover,
.nsfw-author a:hover,
a.bonus:hover {
  background-color: var(--sys-color-hover);
}

.nsfw-author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-secondary);
}

.journal-liked,
.movie-row-reviewers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.journal-liked-label,
.movie-row-reviewers-label {
  white-space: nowrap;
}

.journal-liked-faces,
.movie-row-reviewers-faces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
.journal-liked-faces a,
.movie-row-reviewers-faces a {
  margin: 0;
}
.journal-liked-faces .player-circle-tiny,
.movie-row-reviewers-faces .player-circle-tiny {
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: var(--avatar-radius);
}

.journal-base .journal-liked-faces .player-circle-tiny {
  width: 32px;
  height: 32px;
}

.journal-liked a {
  text-decoration: none;
}

.attachment {
  margin-top: var(--space-3);
}
.attachment img,
.attachment video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-small);
}

.attachment--photo {
  display: inline-block;
  max-width: 220px;
  margin-right: var(--space-2);
  vertical-align: top;
}

.attachment--audio .attachment-name,
.attachment-name {
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.journal-edited {
  margin-left: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
  cursor: help;
}

.journal-edited[onclick] {
  cursor: pointer;
}

.content-emphasis {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-primary-tint);
}

.journal-break {
  padding: var(--space-4) 0 var(--space-5);
  border-bottom: 2px solid var(--sys-color-border);
}
.journal-break:last-child {
  border-bottom: 0;
}

.journal-match {
  /* intentionally no drawing -- see above */
}

.journal ul {
  margin: 0 0 var(--space-5) var(--space-6);
}

.splash-change {
  padding: var(--space-2) 0;
}

.splash-change-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-link);
}

.splash-change-panel {
  display: none;
  padding-top: var(--space-3);
}

.journal-edited-original {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--sys-color-border-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: var(--sys-color-hover);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.journal-edited-original .dim {
  margin-bottom: var(--space-2);
}

.todo-add {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-link);
}

.content-title {
  margin: var(--space-3) var(--space-3) var(--space-5) 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -1px;
}

.comment-row {
  display: flex;
  gap: var(--space-4);
  min-width: 0;
}

.comment-aside {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.comment-main {
  min-width: 0;
  flex: 1 1 auto;
}

.comment-meta {
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.comment-meta a {
  font-weight: 600;
  color: var(--sys-color-text-primary);
  text-decoration: none;
}
.comment-meta a:hover {
  color: var(--sys-color-link);
}

.comment-edit:not(:empty) {
  margin-top: var(--space-2);
}

.comment-meta-after {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.comment-links {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.bottom-bar {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px dotted var(--sys-color-border);
}
.bottom-bar:last-child {
  border-bottom: 0;
}

.logo-circle-mini,
.journal-author {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.logo-circle-mini {
  width: 50px;
  height: 50px;
  border-radius: var(--avatar-radius);
}

.journal-author {
  width: 51px;
  height: 66px;
  border-radius: var(--radius);
}

.nsfw-intro {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-warning-subtle);
  color: var(--sys-color-warning-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
}

.nsfw-post {
  display: none;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.circle-team {
  display: block;
  text-decoration: none;
}

.circle-tiny {
  display: inline-block;
  margin: 3px;
  text-decoration: none;
}

.nsfw-close {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.comment-tools {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--space-2);
  width: calc(3 * var(--control-touch) + 2 * var(--space-2));
}

.comment-tools .comment-tool {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: var(--control-touch);
  height: var(--control-touch);
  padding: var(--space-1);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius-small);
  background: var(--sys-surface-grouped);
  color: var(--sys-color-text-secondary);
  text-decoration: none;
  cursor: pointer;
}

.comment-tools a.comment-tool:hover {
  border-color: var(--sys-color-border-strong);
  background: var(--sys-color-hover);
  color: var(--sys-color-text-primary);
}

.comment-tools .comment-tool-icon {
  font-size: 14px;
  line-height: 1;
}

.comment-tools .comment-tool-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.comment-tools .comment-tool-on {
  border-color: var(--sys-color-success-text);
  color: var(--sys-color-success-text);
  cursor: default;
}

.comment-tools .bonus {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-1);
  background: var(--sys-surface-grouped);
  color: var(--sys-color-text-secondary);
  letter-spacing: 0;
  text-transform: none;
}

.comment-tools .bonus:hover {
  background: var(--sys-color-hover);
  color: var(--sys-color-text-primary);
}

.comment-avatar {
  flex: 0 0 auto;
  width: 50px;
}

.journal-edit-panel {
  margin-top: var(--space-4);
}

.comment-meta a {
  text-decoration: underline;
}

@media (min-width: 1200px) {
  .rules-contents {
    position: sticky;
    top: var(--space-5);
    max-height: calc(100vh - var(--space-5) * 2);
    overflow-y: auto;
  }
}

.rules-toc {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rules-toc ul {
  margin: var(--space-1) 0 var(--space-2);
  padding-left: var(--space-4);
  list-style: none;
}
.rules-toc li {
  padding: 2px 0;
}
.rules-toc a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  text-decoration: none;
}
.rules-toc a:hover {
  color: var(--sys-color-link);
}
.rules-toc > li > a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--sys-color-text-primary);
}

.rules-editor {
  min-height: 480px;
}

.faq-index {
  margin: 0;
  padding-left: var(--space-5);
  list-style: decimal;
}
.faq-index li {
  padding: 2px 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}
.faq-index a {
  color: var(--sys-color-text-primary);
  text-decoration: none;
}
.faq-index a:hover {
  color: var(--sys-color-link);
}

.potd-date {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.pickem-time {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--sys-color-border-strong);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-primary);
  text-align: center;
}
.pickem-time:first-child {
  margin-top: 0;
}

.pickem-game {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 0;
  margin-bottom: var(--space-6);
}
.pickem-game .pickem-actions {
  box-sizing: border-box;
  flex: 0 0 100%;
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background-color: var(--sys-color-hover);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}
.pickem-game .pickem-actions a {
  display: inline-block;
  margin: 0 var(--space-3);
  color: var(--sys-color-link);
}
.pickem-game .alerts {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-4);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
}
.pickem-game .alert-win {
  background-color: #418257;
}
.pickem-game .alert-lose {
  background-color: #D63E4C;
}
.pickem-game .alert-started {
  background-color: var(--sys-color-text-secondary);
}
.pickem-game.pickem-wrapped {
  border: 4px solid transparent;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  padding: 2px;
  margin-left: -6px;
  margin-right: -6px;
}
.pickem-game .pickem-spine {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -36px;
  width: 36px;
  box-sizing: border-box;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  letter-spacing: 0.1em;
  color: #FFFFFF;
  white-space: nowrap;
}
.pickem-game .pickem-spine i {
  transform: rotate(90deg);
}
.pickem-game.pickem-wrap-gotw {
  border-color: #A53860;
}
.pickem-game.pickem-wrap-gotw .pickem-spine {
  background-color: #A53860;
}
.pickem-game.pickem-wrap-tough {
  border-color: #00798C;
}
.pickem-game.pickem-wrap-tough .pickem-spine {
  background-color: #00798C;
}
.pickem-game.pickem-wrap-college {
  border-color: #408449;
}
.pickem-game.pickem-wrap-college .pickem-spine {
  background-color: #408449;
}
.pickem-game .pickem-count {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.pickem-game .ratio {
  position: absolute;
  left: 50%;
  top: 35%;
  z-index: 10;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-small);
  text-align: center;
}
.pickem-game .team,
.pickem-game .team-select {
  position: relative;
  box-sizing: border-box;
  width: 50%;
  text-align: center;
}
.pickem-game .team .city,
.pickem-game .team .nickname,
.pickem-game .team-select .city,
.pickem-game .team-select .nickname {
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}
.pickem-game .team .city,
.pickem-game .team-select .city {
  font-weight: 700;
}
.pickem-game .team .nickname,
.pickem-game .team-select .nickname {
  padding-bottom: var(--space-4);
}
.pickem-game .team .logo,
.pickem-game .team-select .logo {
  display: block;
  width: 120px;
  padding-top: var(--space-3);
  margin: 0 auto;
}
.pickem-game .team .logo img,
.pickem-game .team-select .logo img {
  width: 100%;
}
.pickem-game .team:hover,
.pickem-game .team-select:hover {
  cursor: pointer;
  transform: scale(1.03);
}
.pickem-game .team.picked, .pickem-game[data-picked=true] .team {
  cursor: default;
}
.pickem-game .team.picked:hover, .pickem-game[data-picked=true] .team:hover {
  transform: none;
}
.pickem-game .pick-winner {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  padding: var(--space-1);
  background-color: #FFD700;
  color: #222222;
  font-weight: 600;
  text-align: center;
}
.pickem-game .pick-image-lost {
  filter: grayscale(100%);
  opacity: 0.5;
}
.pickem-game .selected {
  position: relative;
  background: linear-gradient(to bottom, gold 0%, rgba(255, 215, 0, 0) 70%, rgba(255, 215, 0, 0) 100%);
}
.pickem-game .selected::before {
  content: "Selected";
  position: absolute;
  top: var(--space-4);
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  pointer-events: none;
}
.pickem-game .selected * {
  position: relative;
  z-index: 1;
}
.pickem-game .picks {
  box-sizing: border-box;
  width: 50%;
  padding: var(--space-4) 0;
  text-align: center;
}
.pickem-game .admin {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}
.pickem-game .pickem-user {
  display: inline-block;
  margin: 2px;
  padding: var(--space-1);
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.85);
  color: #333333;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.pickem-home,
.pickem-away {
  z-index: 5;
  padding: var(--space-2);
  background-color: var(--sys-marker-neutral-bg);
  color: var(--sys-marker-neutral-text);
  font-weight: 600;
  text-align: center;
}

.pickem-admin {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
}
.pickem-admin a {
  text-decoration: none;
}

.pickem-scoreweek {
  position: relative;
  display: inline-block;
  text-align: left;
}
.pickem-scoreweek summary {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--sys-color-border-strong);
  border-radius: var(--radius);
  background-color: var(--sys-color-input-bg);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  line-height: 1;
  list-style: none;
  cursor: pointer;
}
.pickem-scoreweek summary:hover {
  background-image: linear-gradient(var(--sys-color-hover), var(--sys-color-hover));
}
.pickem-scoreweek summary::-webkit-details-marker {
  display: none;
}
.pickem-scoreweek .pickem-scoreweek-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: var(--z-panel);
  width: 480px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-overlay);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface-solid);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.pickem-scoreweek .pickem-scoreweek-panel table {
  margin-bottom: var(--space-3);
}
.pickem-scoreweek .pickem-scoreweek-panel .light {
  margin-bottom: var(--space-3);
}
.pickem-scoreweek .pickem-scoreweek-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.pickem-scoreweek .pickem-scoreweek-actions .pickem-scoreweek-college {
  margin-left: auto;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
}

.pickem-week-dropped {
  color: var(--sys-color-text-muted);
}

.pickem-weeks {
  margin: var(--space-6) 0;
  text-align: center;
}

.pickem-reply {
  width: 100%;
  min-height: 120px;
  padding: var(--control-pad-y) var(--control-pad-x);
}

.pickem-rules {
  margin: 0;
  padding-left: var(--space-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.pickem-rules li {
  margin-bottom: var(--space-2);
}
.pickem-rules ol {
  margin-top: var(--space-2);
  padding-left: var(--space-5);
}

.pickem-user-background {
  background-color: var(--sys-color-highlight);
  font-weight: 700;
}

.card .pickem-you a,
.pickem-standings a {
  font-weight: 600;
}

.pickem-you > td {
  background: linear-gradient(var(--sys-color-highlight), var(--sys-color-highlight)), var(--surface-current);
  font-weight: 700;
}

.cell-rank {
  width: 1%;
}

.pickem-standings-note {
  padding: var(--space-3) var(--card-pad) var(--card-pad);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.badge-total,
.badge-rarity {
  position: absolute;
  top: 0;
  padding: var(--space-1);
  background-color: var(--sys-color-surface-solid);
  color: var(--sys-color-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-size: 10px;
  border-bottom: 1px solid var(--sys-color-border-strong);
}

.badge-total {
  left: 0;
  padding: var(--space-2) var(--space-3);
  border-right: 1px solid var(--sys-color-border-strong);
}

.badge-rarity {
  right: 0;
  border-left: 1px solid var(--sys-color-border-strong);
}

.badge-scarce,
.badge-rare,
.badge-superrare {
  padding: var(--space-1) var(--space-2);
  color: #FFFFFF;
}

.badge-scarce {
  background-color: #0E7E36;
}

.badge-rare {
  background-color: #9A4E00;
}

.badge-superrare {
  background-color: #D93240;
}

.badge-total-medium,
.badge-rarity-medium {
  position: absolute;
  top: 40px;
  padding: var(--space-1);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.badge-total-medium {
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.badge-rarity-medium {
  right: 0;
  background-color: rgba(154, 78, 0, 0.85);
}

.rare,
.alltimerare {
  color: #9A4E00;
  font-weight: 600;
}

.nonrare,
.alltimenonrare {
  color: var(--sys-color-text-secondary);
  font-weight: 600;
}

.badges-navigation {
  display: inline-block;
  margin-right: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
}
.badges-navigation:hover {
  background-image: linear-gradient(var(--sys-color-press), var(--sys-color-press));
  color: var(--sys-color-on-primary);
}

.cb-wrap {
  position: relative;
  display: inline-block;
  margin: var(--space-1);
}

.badge-total-row,
.bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--sys-color-border);
}

.back {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-link);
}

.badge-image {
  display: block;
  width: 100%;
  padding: var(--space-1);
}

.badge-available {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px dotted var(--sys-color-border-strong);
}

.badge-available-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}

.badge-slot,
.badge-view {
  padding: var(--space-1);
  border-radius: var(--radius-small);
  background-color: var(--sys-marker-neutral-bg);
  color: var(--sys-marker-neutral-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-size: 10px;
}

.badge-view {
  display: block;
  margin-top: var(--space-1);
  text-align: center;
  text-decoration: none;
}

.badge-slot-note {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-size: 10px;
}

.badge-recycle-submit {
  width: 100%;
  height: auto;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}

.profile-form h4 {
  margin-bottom: var(--space-3);
}
.profile-form h4 ~ h4 {
  margin-top: var(--space-6);
}

#profile-update:empty {
  display: none;
}

.profile-roster th:first-child,
.profile-roster th:nth-child(2),
.profile-roster td.on,
.profile-roster td.on-l,
.profile-roster td.on-r {
  width: 28px;
}

.profile-yes {
  color: var(--sys-color-primary);
  font-size: 12px;
}

.lineup-order,
.dfa-bucket {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lineup-order li,
.dfa-bucket li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: -1px;
  padding: var(--space-2);
  border: 1px solid var(--sys-color-border-strong);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-input-bg);
  cursor: grab;
}
.lineup-order li:active,
.dfa-bucket li:active {
  cursor: grabbing;
}
.lineup-order li.ui-sortable-helper,
.dfa-bucket li.ui-sortable-helper {
  cursor: grabbing;
}
.lineup-order li.ui-sortable-placeholder,
.dfa-bucket li.ui-sortable-placeholder {
  visibility: visible;
  border-style: dashed;
  background-color: var(--sys-color-hover);
}

.lineup-grip {
  flex: 0 0 auto;
  width: 30px;
  padding: var(--space-1) 0;
  color: var(--sys-color-text-muted);
  text-align: center;
  cursor: grab;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.lineup-order li:active .lineup-grip {
  cursor: grabbing;
}

.dfa-bucket {
  min-height: calc(var(--control-touch) * 2);
  padding: var(--space-1);
  border: 1px dashed var(--sys-color-border-strong);
  border-radius: var(--radius-small);
}
.dfa-bucket li {
  margin-top: 0;
}
.dfa-bucket li + li {
  margin-top: -1px;
}

.dfa-bucket-tier {
  min-height: calc(var(--control-touch) * 5);
}

.dfa-bucket-locked {
  border-style: solid;
  border-color: var(--sys-color-border);
}

.dfa-bucket-locked li,
.dfa-bucket-locked li:active {
  cursor: default;
}

.dfa-tiers,
.dfa-available {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .dfa-tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 600px) {
  .dfa-available {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dfa-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.dfa-column h4, .dfa-column .form-help {
  margin: 0;
}

.dfa-name {
  flex: 1 1 auto;
  min-width: 0;
}

.dfa-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: calc(24px * 0.8);
  line-height: 1;
  flex: 0 0 auto;
  border-radius: var(--radius-small);
  color: var(--sys-color-text-secondary);
  text-decoration: none;
}
.dfa-clear:hover {
  background-color: var(--sys-color-hover);
  color: var(--sys-color-text-primary);
}

.dfa-exempt-title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--sys-color-text-secondary);
}

.dfa-exempt {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.lineup-spot,
.lineup-pos {
  flex: 0 0 auto;
  width: 30px;
  padding: var(--space-1) 0;
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-secondary-tint);
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.lineup-box {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.profile-lr {
  flex: 0 0 auto;
  min-width: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-selected);
  color: var(--sys-color-text-secondary);
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.profile-player-head {
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
}

.player-tendencies {
  cursor: pointer;
}
.player-tendencies:hover {
  background-color: var(--sys-color-hover);
}

.profile-past {
  padding: var(--space-3);
  border-bottom: 1px solid var(--sys-color-border);
  cursor: pointer;
}
.profile-past:last-child {
  border-bottom: 0;
}
.profile-past:hover {
  background-color: var(--sys-color-hover);
}
.profile-past.is-current {
  background-color: var(--sys-color-highlight);
  box-shadow: inset 3px 0 0 var(--sys-color-primary);
}

.profile-past-club {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
}

.profile-past-logo {
  flex: none;
  width: 24px;
  height: auto;
  display: block;
}

.profile-pdate {
  display: block;
  padding-top: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.profile-notes {
  display: block;
  padding-top: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.profile-notes:empty {
  display: none;
}

.announcer-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 var(--space-4);
  margin-bottom: var(--space-5);
}

.announcer-loading {
  padding-block: var(--space-3);
  color: var(--sys-color-text-secondary);
}

.announcer-sample {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-left: 4px solid var(--sys-color-primary);
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-grouped);
}
.announcer-sample:last-child {
  margin-bottom: 0;
}

.announcer-sample-title {
  margin-bottom: var(--space-2);
  color: var(--sys-color-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.announcer-sample-line {
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.announcer-sample-line:last-child {
  margin-bottom: 0;
}

.profile-history {
  border-radius: var(--radius-small);
  overflow: hidden;
}

.profile-secondary-head {
  margin-bottom: var(--space-4);
}

.profile-secondary-club {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
}

.profile-secondary-date {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.profile-secondary-notes {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-grouped);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.profile-secondary .button-row {
  margin-bottom: var(--space-5);
}

.profile-secondary-section + .profile-secondary-section {
  margin-top: var(--space-5);
}

.profile-next > td {
  background-color: var(--sys-color-highlight);
}

.profile-next > td:first-child {
  box-shadow: inset 3px 0 0 var(--sys-color-primary);
}

.profile-next-tag {
  color: var(--sys-color-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.profile-section-follow {
  display: block;
  margin-top: var(--space-6);
}

.settings-layout {
  align-items: start;
}

.settings-nav {
  min-width: 0;
}
@media (min-width: 1200px) {
  .settings-nav {
    position: sticky;
    top: calc(var(--bar1-h) + var(--bar2-h) + var(--space-4));
  }
}

.settings-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.settings-channels th[scope=row] {
  width: 100%;
}
.settings-channels thead th:not(:first-child),
.settings-channels td {
  width: 72px;
}
.settings-channels th[scope=row] {
  font-weight: 400;
  white-space: normal;
}

.settings-event {
  display: block;
  color: var(--sys-color-text-primary);
  font-weight: 600;
}

.settings-event-detail {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.settings-switch {
  display: inline-flex;
  padding: var(--space-1);
  cursor: pointer;
}

.settings-channel-none {
  color: var(--sys-color-text-muted);
  cursor: help;
}

.settings-birthday {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-4);
}

.owner-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.owner-photo {
  margin: 0;
  text-align: center;
}

.owner-photo-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: var(--space-2);
  border-radius: var(--radius);
}

.owner-photo-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-1);
}

.owner-photo-primary {
  color: var(--sys-color-success-text);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.owner-photo-remove {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.owner-photo-date {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}

@media (max-width: 599.98px) {
  .settings-panel .segmented-block {
    flex-direction: column;
  }
  .settings-panel .segmented-block .segmented-option {
    width: 100%;
  }
}

.marker {
  position: relative;
  top: -1px;
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-2);
  padding: 2px var(--space-2);
  gap: var(--space-1);
  border-radius: var(--radius-small);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--sys-marker-neutral-bg);
  color: var(--sys-marker-neutral-text);
}

.marker--new {
  background-color: var(--sys-marker-new-bg);
  color: var(--sys-marker-new-text);
}

.marker--update {
  background-color: var(--sys-marker-update-bg);
  color: var(--sys-marker-update-text);
}

.marker--vintage {
  background-color: var(--sys-marker-vintage-bg);
  color: var(--sys-marker-vintage-text);
}

.marker--archive {
  background-color: var(--sys-marker-archive-bg);
  color: var(--sys-marker-archive-text);
}

.marker--future {
  background-color: var(--sys-marker-future-bg);
  color: var(--sys-marker-future-text);
}

.marker--throwback {
  background-color: var(--sys-marker-throwback-bg);
  color: var(--sys-marker-throwback-text);
}

.marker--nsfw {
  background-color: var(--sys-marker-nsfw-bg);
  color: var(--sys-marker-nsfw-text);
}

.marker--rated {
  background-color: var(--sys-marker-rated-bg);
  color: var(--sys-marker-rated-text);
}

.marker--dfa {
  background-color: var(--sys-marker-dfa-bg);
  color: var(--sys-marker-dfa-text);
}

.marker--majors {
  background-color: var(--sys-level-majors);
  color: var(--sys-level-majors-ink);
}

.marker--minors {
  background-color: var(--sys-level-minors);
  color: var(--sys-level-minors-ink);
}

.marker--injured,
.marker--suspended {
  background-color: var(--sys-level-injured);
  color: var(--sys-level-injured-ink);
}

.marker--freeagent {
  background-color: var(--sys-level-freeagent);
  color: var(--sys-level-freeagent-ink);
}

.marker--dead {
  background-color: var(--sys-level-dead);
  color: var(--sys-level-dead-ink);
  box-shadow: inset 0 0 0 1px var(--sys-level-dead-edge);
}

.marker--kind {
  background-color: var(--sys-marker-kind-bg);
  color: var(--sys-marker-kind-text);
}

.marker--rivalry {
  background-color: var(--sys-featured-rivalry-bg);
  color: var(--sys-color-text-primary);
}

.marker--warning {
  background-color: var(--sys-color-warning-subtle);
  color: var(--sys-color-warning-text);
}

.marker--alert {
  background-color: var(--sys-color-error-subtle);
  color: var(--sys-color-error-text);
}

.marker--success {
  background-color: var(--sys-color-success-subtle);
  color: var(--sys-color-success-text);
}

.marker--comments {
  background-color: var(--sys-marker-neutral-bg);
  color: var(--sys-marker-neutral-text);
}

.marker--bonus {
  background-color: var(--sys-marker-throwback-bg);
  color: var(--sys-marker-throwback-text);
}

.marker--outline {
  background-color: transparent;
  border: 1px solid currentColor;
}

.marker--icon {
  padding-inline: var(--space-1);
  letter-spacing: 0;
}

.bonus,
.bonus-more,
.bonus-voted {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-small);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.bonus {
  background-color: var(--sys-color-success);
  color: var(--sys-color-on-status);
  cursor: pointer;
}

.bonus:hover,
.bonus:active {
  background-color: var(--sys-color-success-text);
  color: var(--sys-color-on-status);
}

.bonus-more,
.bonus-voted {
  background-color: var(--sys-color-success-subtle);
  color: var(--sys-color-success-text);
}

score {
  display: block;
}

score cap {
  display: block;
  margin-bottom: 0;
  padding: var(--card-pad) var(--card-pad) 0;
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-1);
  border-radius: var(--radius);
  background: var(--sys-color-surface);
}

.score-daybar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (max-width: 599.98px) {
  .score-daybar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .score-daybar boxdetails {
    grid-column: 1/-1;
    grid-row: 2;
  }
}

.score-daybar-side {
  min-width: 0;
}

.score-daybar-side--next {
  justify-self: end;
  text-align: right;
}

.score-neighbour {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-touch);
  padding: 0 var(--space-3);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius-small);
  background: var(--sys-color-surface);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.score-neighbour [class*=fa-] {
  color: var(--sys-color-text-muted);
}
.score-neighbour:hover {
  border-color: var(--sys-color-border-strong);
  background: var(--sys-color-hover);
  text-decoration: none;
}

.score-neighbour-teams {
  font-variant-numeric: tabular-nums;
}

score boxdetails {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  text-align: center;
}
score boxdetails date {
  font-weight: 600;
}
score boxdetails ballpark {
  color: var(--sys-color-text-muted);
}

score city {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  font-weight: 600;
}

score nick {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--sys-color-text-secondary);
}

score cap score {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.game-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  justify-items: center;
  text-align: center;
}
@media (min-width: 600px) {
  .game-head {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-5);
  }
}

.game-head-club {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  text-align: left;
}
@media (min-width: 600px) {
  .game-head-club {
    justify-self: end;
  }
}

.game-head-club-home {
  flex-direction: row-reverse;
  text-align: right;
}
@media (min-width: 600px) {
  .game-head-club-home {
    justify-self: start;
  }
}

.game-head-result {
  display: flex;
  align-items: baseline;
  gap: var(--space-7);
  order: -1;
}
@media (min-width: 600px) {
  .game-head-result {
    order: 0;
  }
}

score cap .page-tabs .page-tab:first-child {
  margin-left: auto;
}
score cap .page-tabs .page-tab:last-child {
  margin-right: auto;
}

.score-hidden {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
  text-align: center;
}

score awayback,
score homeback {
  display: none;
}

score awaylogo,
score homelogo {
  display: block;
}
score awaylogo img,
score homelogo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

score contain {
  display: block;
}

score subcontain {
  display: block;
  margin-bottom: var(--space-4);
  padding: var(--card-pad);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background: var(--sys-color-surface);
}

score .highlights {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
}

score .subtitle {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  margin-bottom: var(--space-2);
}

score .score-park .weather {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  margin-bottom: var(--space-3);
}
score .score-park .diagram {
  position: relative;
  min-height: 240px;
  margin: 0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
  border-radius: 0 0 var(--radius) var(--radius);
  background-repeat: no-repeat;
  background-position: center -210px;
  background-size: 500px;
}
score .score-park .rating {
  position: absolute;
  display: inline-block;
  padding: 2px 4px;
  border-radius: var(--radius-small);
  background: var(--sys-color-text-primary);
  color: var(--sys-color-bg);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
}
score .score-park .lsi {
  right: 48px;
  top: 32px;
}
score .score-park .rsi {
  right: 18px;
  top: 32px;
}
score .score-park .ldb {
  right: 48px;
  top: 56px;
}
score .score-park .rdb {
  right: 18px;
  top: 56px;
}
score .score-park .ltr {
  right: 48px;
  top: 80px;
}
score .score-park .rtr {
  right: 18px;
  top: 80px;
}
score .score-park .lhr {
  right: 48px;
  top: 104px;
}
score .score-park .rhr {
  right: 18px;
  top: 104px;
}
score .score-park .rlabel, score .score-park .llabel,
score .score-park .label-1b, score .score-park .label-2b, score .score-park .label-3b, score .score-park .label-hr {
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--sys-color-text-primary);
}
score .score-park .rlabel {
  right: 26px;
  top: 12px;
}
score .score-park .llabel {
  right: 54px;
  top: 12px;
}
score .score-park .label-1b, score .score-park .label-2b, score .score-park .label-3b, score .score-park .label-hr {
  right: 80px;
  padding: 2px 0;
}
score .score-park .label-1b {
  top: 32px;
}
score .score-park .label-2b {
  top: 56px;
}
score .score-park .label-3b {
  top: 80px;
}
score .score-park .label-hr {
  top: 104px;
}

score {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}
@media (min-width: 1200px) {
  score {
    grid-template-columns: minmax(0, 1fr) 23.5%;
    align-items: start;
  }
}

@media (min-width: 1200px) {
  score cap {
    grid-column: 1/-1;
  }
}

@media (min-width: 1200px) {
  score contain {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (min-width: 1200px) {
  score cap + contain {
    grid-column: 1/-1;
  }
}

score .rightrail > *,
score .bottomrail-col > * {
  margin-bottom: 0;
}

score .rightrail {
  display: none;
}
@media (min-width: 1200px) {
  score .rightrail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    grid-column: 2;
    grid-row: 2;
  }
}

score .bottomrail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (min-width: 600px) {
  score .bottomrail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  score .bottomrail {
    display: none;
  }
}

score .bottomrail-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-content: start;
  min-width: 0;
}

score .boxscore,
score .boxscore-playbyplay,
score .linescore {
  margin-bottom: var(--space-5);
  padding: var(--card-pad);
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-1);
  border-radius: var(--radius);
  background: var(--sys-color-surface);
  overflow-x: auto;
}

score .game-results {
  padding: 0 var(--card-pad);
  overflow-x: auto;
}

score .score-injuries {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

score .linescore {
  border-bottom-width: var(--elevation-blocking);
}

score .boxscore-main {
  border-bottom-width: var(--elevation-modal);
}

score .boxscore pre,
pre.boxscore-text {
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
  color: var(--sys-color-text-primary);
}
score .boxscore pre a,
pre.boxscore-text a {
  color: var(--sys-color-link);
  text-decoration: none;
}
score .boxscore pre a:hover,
pre.boxscore-text a:hover {
  text-decoration: underline;
}

score .linescore .abbreviation {
  font-weight: 700;
}

score .linescore .closed {
  display: inline-block;
  padding: 0 var(--space-1);
  border-radius: var(--radius-small);
  background: var(--sys-color-selected);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}

score .linescore .finals,
score .boxscore .finals {
  font-weight: 700;
}

score .boxscore .position {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  padding-left: var(--space-1);
}

score .boxscore .indent {
  padding-left: var(--space-4);
}

score .boxscore .starter {
  font-weight: 600;
}

.boxscore-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .boxscore-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.boxscore-pair + .boxscore-pair {
  margin-top: var(--space-5);
}

score .extra-stats {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: baseline;
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
score .extra-stats .extra-stats-label {
  text-align: right;
}
score .extra-stats .extra-stats-list {
  min-width: 0;
}
score .extra-stats .person {
  font-weight: 600;
}
score .extra-stats .tag {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-small);
  background: var(--sys-color-selected);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
}

score .player-score {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

score .score-panel .card-head h4 a {
  color: inherit;
  text-decoration: none;
}
score .score-panel .card-head h4 a:hover {
  text-decoration: underline;
}

score .score-club .score-club-line {
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
score .score-club .score-club-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
score .score-club .card-mini-container {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}
score .score-club .card-mini {
  padding-inline: var(--space-2);
}

score .score-comments textarea {
  height: 72px;
}

score .score-comments-action {
  text-align: right;
}

.team-grid {
  display: block;
}

.team-grid-value {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.team-grid-label {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  text-align: center;
}

.team-grid-rank {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
  text-align: center;
}

.pbp {
  display: none;
}
.pbp.start {
  display: block;
}

.pbp-shell {
  width: 100%;
}

.pbp-ballpark {
  --pbp-scale: 1;
  position: relative;
  border-radius: var(--radius-sheet);
  overflow: hidden;
  height: calc(680px * var(--pbp-scale));
}

.pbp-stage {
  width: 100%;
  min-width: 550px;
  height: 680px;
  position: relative;
  transform: scale(var(--pbp-scale));
  transform-origin: top left;
  background-image: url(/objects/images/ballpark-roster.png);
  background-repeat: no-repeat;
  background-position: center -520px;
}

.pbp-footerbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 12px;
  margin-top: 12px;
}

.pbp-play-event {
  display: none;
  position: absolute;
  left: 0;
  font-size: 12px;
  color: #555;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 6px 8px;
  border-radius: var(--radius);
}
.pbp-play-event.is-debug {
  display: block;
}

.pbp-footerbar .pbp-controls {
  position: static;
  top: auto;
  padding: 0;
}

.pbp-field .pbp-play-summary {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 85%;
  text-align: center;
  z-index: 105;
}
@media (min-width: 900px) {
  .pbp-field .pbp-play-summary {
    width: 75%;
  }
}
@media (min-width: 1200px) {
  .pbp-field .pbp-play-summary {
    width: 65%;
  }
}
@media (min-width: 1536px) {
  .pbp-field .pbp-play-summary {
    width: 50%;
  }
}
.pbp-field .pbp-play-inning {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.85;
  flex: 0 0 auto;
}
.pbp-field .pbp-play-count {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  flex: 0 0 auto;
}
.pbp-field .pbp-play-count .count-section {
  display: block;
}
.pbp-field .pbp-play-count .circles {
  font-size: 9px;
  white-space: nowrap;
}
.pbp-field .pbp-play-count .fa-light {
  opacity: 0.3;
}
.pbp-field .pbp-play-count .fa-solid {
  color: #E1A533;
}
.pbp-field .pbp-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 120;
  width: 80%;
  max-width: 720px;
  background-color: var(--sys-color-surface-solid);
  color: var(--sys-color-text-primary);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  padding: 16px;
}
.pbp-field .pbp-overlay .pbp-content {
  padding: 0;
  max-height: 520px;
  overflow-y: auto;
}
.pbp-field .pbp-play-batter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.pbp-field .pbp-play-summary .batter-photo {
  width: 50px;
  height: 50px;
  border-radius: var(--radius);
  overflow: hidden;
}
.pbp-field .pbp-play-summary .batter-name {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.pbp-field .pbp-play-summary .pbp-play-description {
  font-size: 18px;
  line-height: 1.2;
  text-align: left;
}
.pbp-field .rating {
  opacity: 0.6;
}
.pbp-field .plate {
  position: absolute;
  top: 600px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: var(--radius-sheet);
  box-shadow: 0 5px 13px -6px rgba(0, 0, 0, 0.9);
}
.pbp-field .plate--left {
  transform: translate(15px, -50%);
}
.pbp-field .plate--right {
  transform: translate(-65px, -50%);
}
.pbp-field .firstbase, .pbp-field .secondbase, .pbp-field .thirdbase {
  position: absolute;
  top: 450px;
  left: 50%;
  transform: translate(158px, -50%);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sheet);
  box-shadow: 0 5px 13px -6px rgba(0, 0, 0, 0.9);
}
.pbp-field .secondbase {
  top: 310px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.pbp-field .thirdbase {
  top: 450px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-192px, -50%);
}
.pbp-field .highlight-runners {
  animation: highlight-runners 2s;
}
.pbp-field .animated-runners {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pbp-field .pbp-zones {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 70;
}
.pbp-field .pbp-zone-box {
  position: absolute;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  border: 0;
  width: 90px;
  height: 60px;
  content: "";
}
.pbp-field .pbp-zone-box--outfield {
  width: 120px;
  height: 60px;
}
.pbp-field .pbp-zones--debug .pbp-zone-box {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 1px solid #FF0000;
}
.pbp-field .pbp-zone-third-base-line {
  top: 380px;
  left: 40%;
  transform: translate(-220px, -50%);
}
.pbp-field .pbp-zone-third-base {
  top: 390px;
  left: 42%;
  transform: translate(-145px, -50%);
}
.pbp-field .pbp-zone-between-third-and-short {
  top: 260px;
  left: 30%;
  transform: translate(-90px, -50%);
}
.pbp-field .pbp-zone-shortstop {
  top: 320px;
  left: 43%;
  transform: translate(-70px, -50%);
}
.pbp-field .pbp-zone-up-the-middle {
  top: 270px;
  left: 45%;
  transform: translate(0px, -50%);
}
.pbp-field .pbp-zone-second-base {
  top: 320px;
  right: 43%;
  transform: translate(60px, -50%);
}
.pbp-field .pbp-zone-between-first-and-second {
  top: 260px;
  right: 30%;
  transform: translate(90px, -50%);
}
.pbp-field .pbp-zone-first-base {
  top: 390px;
  right: 42%;
  transform: translate(145px, -50%);
}
.pbp-field .pbp-zone-first-base-line {
  top: 380px;
  right: 40%;
  transform: translate(220px, -50%);
}
.pbp-field .pbp-zone-infield {
  top: 360px;
  left: 45%;
  transform: translate(0px, -50%);
}
.pbp-field .pbp-zone-catcher {
  top: 640px;
  left: 45%;
  transform: translate(0px, -50%);
}
.pbp-field .pbp-zone-pitcher {
  top: 450px;
  left: 45%;
  transform: translate(0px, -50%);
}
.pbp-field .pbp-zone-mound {
  top: 450px;
  left: 45%;
  transform: translate(0px, -50%);
}
.pbp-field .pbp-zone-left-field-line-shallow {
  top: 260px;
  left: 25%;
  transform: translate(-230px, -50%);
}
.pbp-field .pbp-zone-left-field-shallow {
  top: 200px;
  left: 45%;
  transform: translate(-180px, -50%);
}
.pbp-field .pbp-zone-left-center-field-shallow {
  top: 200px;
  left: 50%;
  transform: translate(-110px, -50%);
}
.pbp-field .pbp-zone-center-field-shallow {
  top: 200px;
  left: 45%;
  transform: translate(0px, -50%);
}
.pbp-field .pbp-zone-right-center-field-shallow {
  top: 200px;
  right: 50%;
  transform: translate(110px, -50%);
}
.pbp-field .pbp-zone-right-field-shallow {
  top: 200px;
  right: 45%;
  transform: translate(180px, -50%);
}
.pbp-field .pbp-zone-right-field-line-shallow {
  top: 260px;
  right: 25%;
  transform: translate(230px, -50%);
}
.pbp-field .pbp-zone-left-field-line-normal {
  top: 150px;
  left: 20%;
  transform: translate(-230px, -50%);
}
.pbp-field .pbp-zone-left-field-normal {
  top: 120px;
  left: 40%;
  transform: translate(-180px, -50%);
}
.pbp-field .pbp-zone-left-center-field-normal {
  top: 90px;
  left: 45%;
  transform: translate(-110px, -50%);
}
.pbp-field .pbp-zone-center-field-normal {
  top: 120px;
  left: 45%;
  transform: translate(0px, -50%);
}
.pbp-field .pbp-zone-right-center-field-normal {
  top: 90px;
  right: 45%;
  transform: translate(110px, -50%);
}
.pbp-field .pbp-zone-right-field-normal {
  top: 120px;
  right: 40%;
  transform: translate(180px, -50%);
}
.pbp-field .pbp-zone-right-field-line-normal {
  top: 150px;
  right: 20%;
  transform: translate(230px, -50%);
}
.pbp-field .pbp-zone-left-field-line-deep {
  top: -20px;
  left: 15%;
  transform: translate(-230px, -50%);
}
.pbp-field .pbp-zone-left-field-deep {
  top: -20px;
  left: 35%;
  transform: translate(-180px, -50%);
}
.pbp-field .pbp-zone-left-center-field-deep {
  top: -20px;
  left: 40%;
  transform: translate(-110px, -50%);
}
.pbp-field .pbp-zone-center-field-deep {
  top: -20px;
  left: 45%;
  transform: translate(0px, -50%);
}
.pbp-field .pbp-zone-right-center-field-deep {
  top: -20px;
  right: 40%;
  transform: translate(110px, -50%);
}
.pbp-field .pbp-zone-right-field-deep {
  top: -20px;
  right: 35%;
  transform: translate(180px, -50%);
}
.pbp-field .pbp-zone-right-field-line-deep {
  top: -20px;
  right: 15%;
  transform: translate(230px, -50%);
}
.pbp-field .pbp-ball {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 95;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #f6f5f1 52%, #dcdad2 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset -1px -1px 2px rgba(0, 0, 0, 0.14);
  pointer-events: none;
  transition: transform 0.8s ease-out, top 0.8s ease-out, left 0.8s ease-out;
}
.pbp-field .pbp-ball .fa-circle {
  display: none;
}
.pbp-field .pbp-ball-sphere {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
}
.pbp-field .pbp-ball-sphere::before, .pbp-field .pbp-ball-sphere::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 30px;
  margin-top: -15px;
  border: 1.2px solid #c8102e;
  border-radius: 50%;
}
.pbp-field .pbp-ball-sphere::before {
  left: -21.5px;
}
.pbp-field .pbp-ball-sphere::after {
  right: -21.5px;
}
.pbp-field .pbp-ball-arc {
  display: block;
  width: 100%;
  height: 100%;
}
.pbp-field .pbp-ball.is-flying .pbp-ball-arc {
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.pbp-field .pbp-ball.is-flying--ground .pbp-ball-arc {
  animation-name: pbp-ball-hop;
}
.pbp-field .pbp-ball.is-flying--line .pbp-ball-arc {
  animation-name: pbp-ball-arc-low;
}
.pbp-field .pbp-ball.is-flying--fly .pbp-ball-arc {
  animation-name: pbp-ball-arc-high;
}
.pbp-field .pbp-ball.is-flying--homer .pbp-ball-arc {
  animation-name: pbp-ball-arc-huge;
}
@keyframes pbp-ball-hop {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
  55% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes pbp-ball-arc-low {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes pbp-ball-arc-high {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-52px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes pbp-ball-arc-huge {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-78px);
  }
  100% {
    transform: translateY(0);
  }
}
.pbp-field .pbp-ball.is-moving .pbp-ball-sphere {
  animation: pbp-ball-spin 0.45s linear infinite;
}
@keyframes pbp-ball-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pbp-field .pbp-ball.is-moving .pbp-ball-sphere {
    animation: none;
  }
  .pbp-field .pbp-ball.is-flying .pbp-ball-arc {
    animation: none;
  }
}
.pbp-field .pbp-homerun-splash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 540px;
  height: 340px;
  background: url(/objects/images/pbp-homerun.png) center center/contain no-repeat;
  z-index: 110;
  pointer-events: none;
}
.pbp-field .pbp-fireworks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 105;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.pbp-field .pbp-fireworks.is-active {
  opacity: 1;
}
.pbp-field .pbp-firework {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.9), 0 0 0 0 rgba(255, 105, 180, 0.9), 0 0 0 0 rgba(64, 224, 208, 0.9), 0 0 0 0 rgba(135, 206, 250, 0.9), 0 0 0 0 rgba(255, 99, 71, 0.9), 0 0 0 0 rgba(173, 255, 47, 0.9);
  animation: pbp-firework-burst 1.2s ease-out infinite;
}
.pbp-field .pbp-firework:nth-child(1) {
  transform: translate(-220px, -140px);
  animation-delay: 0s;
}
.pbp-field .pbp-firework:nth-child(2) {
  transform: translate(240px, -120px);
  animation-delay: 0.1s;
}
.pbp-field .pbp-firework:nth-child(3) {
  transform: translate(-180px, 60px);
  animation-delay: 0.2s;
}
.pbp-field .pbp-firework:nth-child(4) {
  transform: translate(200px, 80px);
  animation-delay: 0.25s;
}
.pbp-field .pbp-firework:nth-child(5) {
  transform: translate(0px, -200px);
  animation-delay: 0.35s;
}
.pbp-field .pbp-firework:nth-child(6) {
  transform: translate(0px, 180px);
  animation-delay: 0.45s;
}
@keyframes pbp-firework-burst {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.9), 0 0 0 0 rgba(255, 105, 180, 0.9), 0 0 0 0 rgba(64, 224, 208, 0.9), 0 0 0 0 rgba(135, 206, 250, 0.9), 0 0 0 0 rgba(255, 99, 71, 0.9), 0 0 0 0 rgba(173, 255, 47, 0.9);
    opacity: 0.8;
  }
  60% {
    box-shadow: 0 -70px 0 0 rgba(255, 215, 0, 0), 60px 0 0 0 rgba(255, 105, 180, 0), 0 70px 0 0 rgba(64, 224, 208, 0), -60px 0 0 0 rgba(135, 206, 250, 0), 45px -45px 0 0 rgba(255, 99, 71, 0), -45px -45px 0 0 rgba(173, 255, 47, 0);
    opacity: 0.9;
  }
  100% {
    box-shadow: 0 -95px 0 0 rgba(255, 215, 0, 0), 85px 0 0 0 rgba(255, 105, 180, 0), 0 95px 0 0 rgba(64, 224, 208, 0), -85px 0 0 0 rgba(135, 206, 250, 0), 65px -65px 0 0 rgba(255, 99, 71, 0), -65px -65px 0 0 rgba(173, 255, 47, 0);
    opacity: 0;
  }
}
.pbp-field .pbp-strikeout-splash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  height: 300px;
  background: url(/objects/images/pbp-strikeout.png) center center/contain no-repeat;
  z-index: 110;
  pointer-events: none;
}
.pbp-field .pbp-gameover-splash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 540px;
  height: 340px;
  background: url(/objects/images/pbp-gameover.png) center center/contain no-repeat;
  z-index: 110;
  pointer-events: none;
}
.pbp-field .pbp-flag-strikeout {
  position: absolute;
  bottom: 20px;
  left: 130px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 115;
}
.pbp-field .pbp-flag-strikeout .fa-k {
  background-color: var(--sys-color-surface-solid);
  padding: 4px 2.6666666667px;
  font-size: 12px;
  color: #FE5F55;
}
.pbp-field .pbp-flag-strikeout .fa-k::before {
  content: "K";
  font-family: var(--font-sans);
  font-weight: 700;
}
.pbp-field .pbp-flag-strikeout .k-looking {
  transform: scaleX(-1);
}
.pbp-field .animated-runner {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-sheet);
  box-shadow: 0 5px 13px -6px rgba(0, 0, 0, 0.9);
  z-index: 100;
  transition: top 0.8s linear, left 0.8s linear, transform 0.8s linear;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  background-color: rgba(255, 255, 255, 0.1);
}
.pbp-field .animated-runner > div,
.pbp-field .animated-runner > img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border-radius: var(--radius-sheet);
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.pbp-field .animated-runner.bounce {
  animation: runner-bounce 0.6s ease-in-out;
}
@keyframes runner-bounce {
  0%, 100% {
    margin-top: 0;
  }
  20%, 60% {
    margin-top: -15px;
  }
  40%, 80% {
    margin-top: 0;
  }
}
.pbp-field .pos, .pbp-field .pos-full {
  padding: 3px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: var(--radius-small);
  text-align: center;
  font-size: 12px;
  line-height: 12px;
  cursor: pointer;
}
.pbp-field .pos {
  transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.pbp-field .pos.exit-right {
  transform: translate(400px, 400px) !important;
  opacity: 0;
}
.pbp-field .pos.exit-left {
  transform: translate(-400px, 400px) !important;
  opacity: 0;
}
.pbp-field .pos.enter-from-right {
  transform: translate(400px, 400px) !important;
  opacity: 0;
}
.pbp-field .pos.enter-from-left {
  transform: translate(-400px, 400px) !important;
  opacity: 0;
}
.pbp-field .pos-pi {
  position: absolute;
  top: 450px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.pbp-field .pos-ca {
  position: absolute;
  top: 660px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.pbp-field .pos-fb {
  position: absolute;
  top: 380px;
  left: 50%;
  margin-right: -50%;
  transform: translate(145px, -50%);
}
.pbp-field .pos-sb {
  position: absolute;
  top: 320px;
  left: 50%;
  margin-right: -50%;
  transform: translate(80px, -50%);
}
.pbp-field .pos-tb {
  position: absolute;
  top: 380px;
  right: 50%;
  margin-left: -50%;
  transform: translate(-145px, -50%);
}
.pbp-field .pos-ss {
  position: absolute;
  top: 320px;
  right: 50%;
  margin-left: -50%;
  transform: translate(-80px, -50%);
}
.pbp-field .pos-lf {
  position: absolute;
  top: 180px;
  right: 50%;
  margin-left: -50%;
  transform: translate(-180px, -50%);
}
.pbp-field .pos-cf {
  position: absolute;
  top: 150px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.pbp-field .pos-rf {
  position: absolute;
  top: 180px;
  left: 50%;
  margin-right: -50%;
  transform: translate(180px, -50%);
}
.pbp-field .pbp-pitcher-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  border-radius: var(--radius);
  padding: 12px;
  min-width: 120px;
  text-align: center;
}
.pbp-field .pbp-pitcher-info .pitcher-photo {
  margin-bottom: 8px;
}
.pbp-field .pbp-pitcher-info .pitcher-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.pbp-field .pbp-pitcher-info .pitcher-count {
  font-size: 12px;
  opacity: 0.7;
}
.pbp-field .pbp-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 60%;
  background-color: var(--sys-color-surface-solid);
  border-radius: var(--radius);
  padding: 40px 12px;
}
.pbp-field .pbp-loading .loading-content i {
  font-size: 48px;
  color: var(--sys-color-text-secondary);
  margin-bottom: 16px;
}
.pbp-field .pbp-loading .loading-content h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--sys-color-text-primary);
}
.pbp-field .pbp-welcome {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 60%;
  background-color: var(--sys-color-surface-solid);
  border-radius: var(--radius);
  padding: 12px;
}
.pbp-field .pbp-welcome h2 {
  font-size: 27px;
  font-weight: 700;
  color: var(--sys-color-text-primary);
  margin-bottom: 15px;
  display: block !important;
}
.pbp-field .pbp-welcome .weather-info {
  font-size: 18px;
  color: var(--sys-color-text-secondary);
  font-weight: 500;
}
.pbp-field .pbp-game-state {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  gap: 16px;
  flex-direction: row;
  align-items: center;
}
.pbp-field .pbp-game-state .state-section {
  text-align: center;
}
.pbp-field .pbp-game-state .label {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 4px;
}
.pbp-field .pbp-game-state .circles {
  text-align: center;
  font-size: 15px;
}
.pbp-field .pbp-game-state .circles .fa-light {
  opacity: 0.3;
}
.pbp-field .pbp-game-state .circles .fa-solid {
  color: #E1A533;
}
.pbp-field .pbp-game-state .state-inning {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
  background: transparent;
}
.pbp-field .pbp-game-state .state-inning {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  background: transparent;
}

.pbp-controls {
  position: sticky;
  top: 0;
  padding: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 100;
}
.pbp-controls button {
  min-width: 100px;
}

.pbp-content {
  padding: 16px;
}

.pitcher-intro {
  text-align: center;
}
.pitcher-intro h2 {
  font-size: 27px;
  margin-bottom: 30px;
  font-weight: 700;
}
.pitcher-intro .pitcher-intro-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
}
.pitcher-intro .pitcher-intro-content:last-child {
  margin-bottom: 0;
}
.pitcher-intro .pitcher-intro-team {
  flex: 1;
  max-width: 300px;
}
.pitcher-intro .pitcher-intro-team h3 {
  font-size: 21px;
  margin-bottom: 16px;
  font-weight: 600;
}
.pitcher-intro .pitcher-intro-player {
  text-align: center;
}
.pitcher-intro .pitcher-intro-name {
  margin: 15px 0;
  font-size: 18px;
  font-weight: 600;
}
.pitcher-intro .pitcher-intro-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 15px;
}
.pitcher-intro .pitcher-intro-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 60px;
}
.pitcher-intro .pitcher-intro-stats .stat-label {
  font-size: 12px;
  opacity: 0.7;
  text-transform: uppercase;
  font-weight: 600;
}
.pitcher-intro .pitcher-intro-stats .stat-value {
  font-size: 18px;
  font-weight: 700;
}
.pitcher-intro .pitcher-intro-vs {
  font-size: 24px;
  font-weight: 700;
  opacity: 0.5;
}
.pitcher-intro .pitcher-intro-next {
  margin-top: 30px;
  text-align: center;
}

.lineup-intro {
  text-align: center;
}
.lineup-intro h2 {
  font-size: 27px;
  margin-bottom: 24px;
  font-weight: 700;
}
.lineup-intro .lineup-intro-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
}
.lineup-intro .lineup-intro-content:last-child {
  margin-bottom: 0;
}
.lineup-intro .lineup-team {
  flex: 1;
}
.lineup-intro .lineup-team h3 {
  font-size: 21px;
  margin-bottom: 16px;
  font-weight: 600;
}
.lineup-intro .lineup-list {
  text-align: left;
}
.lineup-intro .lineup-player {
  padding: 8px 12px;
  font-size: 15px;
  border-bottom: 1px solid var(--sys-color-border);
}
.lineup-intro .lineup-player:last-child {
  border-bottom: none;
}
.lineup-intro .lineup-order {
  display: inline-block;
  width: 30px;
  font-weight: 700;
}
.lineup-intro .lineup-position {
  display: inline-block;
  width: 40px;
  font-weight: 600;
  opacity: 0.7;
}
.lineup-intro .lineup-name {
  font-weight: 500;
}
.lineup-intro .lineup-intro-next {
  margin-top: 30px;
  text-align: center;
}

.play-content {
  padding: 16px;
}
.play-content .play-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sys-color-border);
}
.play-content .play-inning {
  font-size: 18px;
}
.play-content .play-outs .label {
  font-size: 12px;
  opacity: 0.7;
  margin-right: 8px;
}
.play-content .play-batter {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}
.play-content .batter-name {
  font-size: 18px;
  font-weight: 600;
}
.play-content .play-count {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background-color: var(--sys-color-hover);
  border-radius: var(--radius);
}
.play-content .play-count .count-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.play-content .play-count .count-label {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
}
.play-content .play-runners {
  font-size: 15px;
  margin-bottom: 15px;
  padding: 8px;
  background-color: var(--sys-color-hover);
  border-radius: var(--radius);
  border-left: 3px solid var(--sys-color-border-strong);
}
.play-content .play-runners strong {
  font-weight: 700;
  margin-right: 8px;
}
.play-content .play-description {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 15px;
  background-color: var(--sys-color-hover);
  border-radius: var(--radius);
}
.play-content .play-event {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.play-content .play-event .event-type {
  display: inline-block;
  padding: 6px 12px;
  background-color: var(--sys-color-selected);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.play-content .play-event .event-notation {
  font-size: 15px;
  font-weight: 600;
  color: var(--sys-color-text-primary);
}
.play-content .play-next {
  text-align: center;
  padding-top: 16px;
  border-top: 2px solid var(--sys-color-border);
}

.special-event-screen {
  text-align: center;
  padding: 60px 40px;
}
.special-event-screen h2 {
  font-size: 27px;
  margin-bottom: 40px;
  font-weight: 700;
  color: var(--sys-color-text-primary);
}
.special-event-screen h2 i {
  color: var(--sys-featured-gotd-edge);
}
.special-event-screen .event-description {
  font-size: 18px;
  color: var(--sys-color-text-primary);
  margin-top: 16px;
  font-weight: 500;
}
.special-event-screen .upcoming-batters {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 16px;
}
.special-event-screen .upcoming-batters .upcoming-batter {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.special-event-screen .upcoming-batters .upcoming-batter .batter-order {
  font-size: 24px;
  font-weight: 700;
  color: var(--sys-featured-gotd-edge);
  min-width: 30px;
}
.special-event-screen .upcoming-batters .upcoming-batter .batter-photo img {
  width: 50px;
  height: 50px;
  border-radius: var(--avatar-radius);
}
.special-event-screen .upcoming-batters .upcoming-batter .batter-details .batter-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--sys-color-text-primary);
  margin-bottom: 4px;
}
.special-event-screen .upcoming-batters .upcoming-batter .batter-details .batter-stats {
  font-size: 13px;
  color: var(--sys-color-text-secondary);
  text-transform: uppercase;
}
.special-event-screen .event-player-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.special-event-screen .event-player-photo {
  margin-bottom: 15px;
}
.special-event-screen .event-player-info .event-player-name {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 8px;
}
.special-event-screen .event-player-info .event-player-detail {
  font-size: 18px;
  color: var(--sys-color-text-secondary);
  margin-bottom: 16px;
}
.special-event-screen .event-player-info .event-player-stats {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}
.special-event-screen .event-player-info .event-player-stats .stat {
  text-align: center;
}
.special-event-screen .event-player-info .event-player-stats .stat .stat-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sys-color-text-secondary);
  margin-bottom: 5px;
}
.special-event-screen .event-player-info .event-player-stats .stat .stat-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.sub-event {
  padding: 16px;
  background: var(--sys-color-hover);
  border-left: 4px solid var(--sys-featured-gotd-edge);
}
.sub-event .sub-event-content .sub-event-type {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sys-color-text-secondary);
  margin-bottom: 8px;
}
.sub-event .sub-event-content .sub-event-description {
  font-size: 15px;
  font-weight: 500;
}

.extra-play {
  padding: 12px 16px;
  margin-top: 12px;
  background: var(--sys-color-hover);
  border-left: 3px solid var(--sys-featured-gotd-edge);
  display: flex;
  gap: 12px;
  align-items: center;
}
.extra-play .extra-notation {
  font-size: 12px;
  font-weight: 700;
  color: var(--sys-featured-gotd-edge);
  min-width: 40px;
}
.extra-play .extra-description {
  font-size: 12px;
  font-weight: 500;
  flex: 1;
}

.game-end {
  text-align: center;
  padding: 40px 16px;
}
.game-end h2 {
  font-size: 27px;
  margin-bottom: 30px;
  font-weight: 700;
}
.game-end .final-score {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 400px;
  margin: 0 auto;
}
.game-end .team-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  background-color: var(--sys-color-hover);
  border-radius: var(--radius);
  font-size: 18px;
  font-weight: 600;
}
.game-end .team-score .score {
  font-size: 24px;
  font-weight: 700;
}

.game-end .game-end-final {
  max-width: 460px;
  margin: 0 auto 24px;
}
.game-end .team-final {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sys-color-border);
  opacity: 0.55;
}
.game-end .team-final:last-child {
  border-bottom: 0;
}
.game-end .team-final--won {
  opacity: 1;
  font-weight: 700;
}
.game-end .team-final .team-name {
  font-size: 18px;
  text-align: left;
}
.game-end .team-final .team-runs {
  font-size: 33px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.game-end .game-end-linescore {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 auto 24px;
}
.game-end .game-end-linescore table {
  margin: 0 auto;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.game-end .game-end-linescore th, .game-end .game-end-linescore td {
  padding: 4px 8px;
  text-align: center;
  min-width: 22px;
}
.game-end .game-end-linescore th {
  font-weight: 600;
  opacity: 0.6;
}
.game-end .game-end-linescore .ls-team {
  text-align: left;
  font-weight: 700;
  opacity: 1;
  padding-right: 8px;
}
.game-end .game-end-linescore .ls-total {
  font-weight: 700;
  background-color: var(--sys-color-hover);
}
.game-end .game-end-linescore thead th:first-child + th {
  border-left: 0;
}
.game-end .game-end-linescore .ls-x {
  opacity: 0.35;
}
.game-end .game-end-recap {
  max-width: 560px;
  margin: 0 auto 24px;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
.game-end .game-end-recap p {
  margin: 0 0 8px;
}
.game-end .game-end-recap p:last-child {
  margin-bottom: 0;
}
.game-end .game-end-decisions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.game-end .decision {
  font-size: 12px;
}
.game-end .decision-tag {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: var(--radius);
  background-color: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-weight: 700;
  font-size: 9px;
  text-align: center;
}
.game-end .decision-record {
  opacity: 0.6;
}
.game-end .decision--none {
  opacity: 0.5;
  font-style: italic;
}
.game-end .game-end-moment {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
  border-radius: var(--radius);
  background-color: var(--sys-color-hover);
}
.game-end .moment-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.55;
  margin-bottom: 6px;
}
.game-end .moment-desc {
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 6px;
}
.game-end .moment-swing {
  font-size: 12px;
  opacity: 0.6;
}

.score-moments {
  touch-action: manipulation;
}

.moments-position {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.moments-bars {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.moments-bar {
  flex: 1 1 0;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--sys-color-border);
}
.moments-bar.is-seen, .moments-bar.is-current {
  background: var(--sys-color-primary);
}

.moments-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  cursor: pointer;
}
.moments-stage:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--space-1);
  border-radius: var(--radius-small);
}

.moment {
  grid-area: 1/1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.moment.is-current {
  visibility: visible;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .moment {
    transition: none;
  }
}

.moment--matchup,
.moment--final {
  justify-content: center;
  gap: var(--space-4);
}

.moment-kicker {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-muted);
  text-align: center;
}

.moment-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}

.moment-inning {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}

.moment-count {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.moment-outs {
  display: inline-flex;
  gap: 3px;
}

.moment-out {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--sys-color-text-secondary);
  border-radius: 50%;
}
.moment-out.is-on {
  border-color: var(--sys-color-text-primary);
  background: var(--sys-color-text-primary);
}

.moment-bases {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 20px;
}

.moment-base {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--sys-color-text-secondary);
  background: transparent;
  transform: rotate(45deg);
}
.moment-base.is-on {
  border-color: var(--sys-color-primary);
  background: var(--sys-color-primary);
}

.moment-base--second {
  top: 1px;
  left: 9.5px;
}

.moment-base--third {
  top: 9px;
  left: 2px;
}

.moment-base--first {
  top: 9px;
  left: 17px;
}

.moment-score {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-primary);
}
.moment-score b {
  margin-left: var(--space-2);
  font-weight: 700;
}
.moment-score .moment-score-team {
  display: inline-flex;
  align-items: baseline;
}
.moment-score .is-changed b {
  color: var(--sys-color-primary);
}
.moment.is-running .moment-score .is-changed b {
  color: inherit;
}

.moment-roll {
  display: inline-block;
  height: 1.4em;
  overflow: hidden;
  line-height: 1.4em;
  vertical-align: bottom;
}

.moment-roll-track {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.moment-roll-track > span {
  height: 1.4em;
}

.moment-roll--up .moment-roll-track {
  animation: moment-roll-up 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.moment-roll--down .moment-roll-track {
  animation: moment-roll-down 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes moment-roll-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
@keyframes moment-roll-down {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .moment-roll-track {
    animation: none;
  }
}
.moment-photo {
  display: block;
  flex: none;
  width: var(--moment-photo, 48px);
  height: var(--moment-photo, 48px);
  border-radius: var(--avatar-radius);
  background-color: var(--sys-color-hover);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.moment-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
}

.moment-runners {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.moment-runner b {
  margin-right: 2px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--sys-color-text-muted);
}

.moment-duelist {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}
.moment-duelist .moment-photo {
  margin-bottom: var(--space-1);
}

.moment-vs {
  align-self: center;
  margin-top: calc(-1 * var(--space-5));
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--sys-color-text-muted);
  text-transform: uppercase;
}

.moment-person-role {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}

.moment-person-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}

.moment-play {
  min-height: calc(3 * 1.4em + 2 * var(--space-1));
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.moment-play p {
  margin: 0 0 var(--space-1);
}
.moment-play p:nth-last-child(n+4) {
  display: none;
}
.moment-play p:last-child {
  margin-bottom: 0;
  font-weight: 600;
  color: var(--sys-color-text-primary);
}
.moment-play.is-playing p {
  display: none;
}
.moment-play.is-playing p:last-child {
  font-weight: 400;
  color: var(--sys-color-text-secondary);
}
.moment-play.is-playing p.is-shown {
  display: block;
  animation: moment-line-in 0.25s ease-out both;
}
.moment-play.is-playing p.is-current {
  font-weight: 600;
  color: var(--sys-color-text-primary);
}

.moment-play-end {
  margin-left: 2px;
  font-size: 0.7em;
  vertical-align: 0.1em;
  color: var(--sys-color-primary);
}

@keyframes moment-line-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .moment-play.is-playing p.is-shown {
    animation: none;
  }
}
.moment-swing {
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  text-align: center;
  transition: opacity 0.3s ease-out;
}
.moment-swing .marker {
  margin-right: var(--space-1);
}
.moment.is-running .moment-swing {
  visibility: hidden;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .moment-swing {
    transition: none;
  }
}
.moment-swing .moment-swing-team {
  font-weight: 700;
  color: var(--sys-color-text-primary);
}

.moment-clubs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.moment-club {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.moment-club img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.moment-club-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}
.moment-club-name span {
  display: block;
  font-weight: 400;
  color: var(--sys-color-text-secondary);
}

.moment-club-name,
.moment-ballpark {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}

.moment-ballpark {
  margin-top: calc(-1 * var(--space-2));
  text-align: center;
}

.moment-at {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.moment--feat {
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius);
  background: var(--sys-featured-gotd-bg);
  text-align: center;
}
.moment--feat .moment-kicker {
  color: var(--sys-featured-gotd-edge);
}

.moment-feat-glyph {
  font-size: 40px;
  line-height: 1;
  color: var(--sys-featured-gotd-edge);
}

.moment-feat-headline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--sys-color-text-primary);
}

.moment-feat-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.moment-feat-face {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}
.moment-feat-face img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.moment-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.moment-final-team {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.moment-final-team img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.moment-final-team b {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.moment-final-team.is-winner {
  font-weight: 600;
  color: var(--sys-color-text-primary);
}

.moment-line {
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.moment-line th, .moment-line td {
  padding: var(--space-1) var(--space-2);
  text-align: right;
}
.moment-line th:first-child {
  text-align: left;
}

.moment-decisions {
  display: grid;
  gap: var(--space-1);
}

.moment-decision {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.moment-decision-score {
  margin-left: var(--space-1);
  font-weight: 400;
  color: var(--sys-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.moment-more {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  text-align: center;
}

.moments-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.moments-controls [data-moments-prev] {
  justify-self: start;
}
.moments-controls [data-moments-next] {
  justify-self: end;
}

.scoreboard-days {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.scoreboard-days::-webkit-scrollbar {
  display: none;
}

.scoreboard-day {
  flex: 1 0 auto;
  min-width: 96px;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background: var(--sys-color-surface);
  color: var(--sys-color-text-secondary);
  text-align: center;
  text-decoration: none;
}
.scoreboard-day:hover {
  background-image: linear-gradient(var(--sys-color-hover), var(--sys-color-hover));
  text-decoration: none;
}
.scoreboard-day.is-current {
  border-color: var(--sys-color-primary);
  background: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
}

.scoreboard-day-name {
  display: block;
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: inherit;
}

.scoreboard-day-date {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  color: inherit;
}

.scoreboard-day-games {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: inherit;
  opacity: 0.85;
}

.scoreboard-games {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  margin-bottom: var(--space-6);
}

.scoreboard-game {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .scoreboard-game {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sp-gotd,
.sp-rivalry {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-small);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  text-transform: uppercase;
}

.sp-gotd {
  background: var(--sys-color-warning-subtle);
  color: var(--sys-color-warning-text);
}

.sp-rivalry {
  background: var(--sys-color-info-subtle);
  color: var(--sys-color-info-text);
}

calendar {
  display: block;
}
calendar month {
  display: block;
  margin-bottom: var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
}
calendar table {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
calendar tr {
  border-bottom: 0;
}
calendar td {
  padding: 2px;
  text-align: center;
}
calendar a {
  text-decoration: none;
}
calendar .cal-today {
  border-radius: var(--radius-small);
  background: var(--sys-color-selected);
}
calendar .cal-highlight {
  border-radius: var(--radius-small);
  background: var(--sys-color-primary);
}
calendar .cal-highlight a {
  color: var(--sys-color-on-primary);
}

.score-attendance-link::after {
  content: attr(data-name);
}

.game-score table {
  margin-bottom: 0;
}
.game-score th {
  padding: 0 6px 2px;
  border: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}
.game-score td {
  padding: 2px 6px;
  border: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
}
.game-score tr {
  border: 0;
}
.game-score .score-final {
  font-weight: 700;
}

.game-score td,
.score-final {
  font-variant-numeric: tabular-nums;
}

.game-recap {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.game-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.game-links a {
  display: inline-block;
  padding: 4px var(--space-2);
  border-radius: var(--radius-small);
  background: var(--sys-color-selected);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.game-links a:hover {
  background-image: linear-gradient(var(--sys-color-hover), var(--sys-color-hover));
  text-decoration: none;
}

.game-players {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.game-vital,
.game-section {
  display: block;
  margin-bottom: var(--space-1);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
}

.game-section {
  margin-top: var(--space-4);
}

.game-vital-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}

.game-data {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.game-highlights-title {
  font-weight: 600;
}

.game-injuries div,
.game-highlights div {
  margin-bottom: var(--space-1);
}

@media (min-width: 900px) {
  .game-column {
    padding-left: var(--space-4);
    border-left: 1px solid var(--sys-color-border);
  }
}

.player-thumb-50px {
  margin-bottom: 0;
}

.comments {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--sys-color-selected);
}

.landing-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
  margin: 0 auto;
}

.landing-left {
  grid-column: span 6;
}

.landing-right {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.landing-container > .grid-col-1 {
  grid-column: span 1;
}
.landing-container > .grid-col-2 {
  grid-column: span 2;
}
.landing-container > .grid-col-3 {
  grid-column: span 3;
}
.landing-container > .grid-col-4 {
  grid-column: span 4;
}
.landing-container > .grid-col-5 {
  grid-column: span 5;
}
.landing-container > .grid-col-6 {
  grid-column: span 6;
}
.landing-container > .grid-col-7 {
  grid-column: span 7;
}
.landing-container > .grid-col-8 {
  grid-column: span 8;
}
.landing-container > .grid-col-9 {
  grid-column: span 9;
}
.landing-container > .grid-col-10 {
  grid-column: span 10;
}
.landing-container > .grid-col-11 {
  grid-column: span 11;
}
.landing-container > .grid-col-12 {
  grid-column: span 12;
}

@media (max-width: 1199.98px) {
  .landing-container > .grid-col-9 {
    grid-column: span 8;
  }
  .landing-container > .grid-col-10 {
    grid-column: span 8;
  }
  .landing-container > .grid-col-11 {
    grid-column: span 8;
  }
  .landing-container > .grid-col-12 {
    grid-column: span 8;
  }
}
@media (max-width: 899.98px) {
  .landing-container > .grid-col-1 {
    grid-column: span 4;
  }
  .landing-container > .grid-col-2 {
    grid-column: span 4;
  }
  .landing-container > .grid-col-3 {
    grid-column: span 4;
  }
  .landing-container > .grid-col-4 {
    grid-column: span 4;
  }
  .landing-container > .grid-col-5 {
    grid-column: span 4;
  }
  .landing-container > .grid-col-6 {
    grid-column: span 4;
  }
  .landing-container > .grid-col-7 {
    grid-column: span 4;
  }
  .landing-container > .grid-col-8 {
    grid-column: span 4;
  }
  .landing-container > .grid-col-9 {
    grid-column: span 4;
  }
  .landing-container > .grid-col-10 {
    grid-column: span 4;
  }
  .landing-container > .grid-col-11 {
    grid-column: span 4;
  }
  .landing-container > .grid-col-12 {
    grid-column: span 4;
  }
}
@media (max-width: 1199.98px) {
  .landing-container {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .landing-container .landing-left,
.landing-container .landing-right,
.landing-container .right-content-row,
.landing-container .right-3col {
    display: contents;
  }
  .landing-container .landing-left > *,
.landing-container .landing-right > *,
.landing-container .right-3col > * {
    order: 5;
    grid-column: 1/-1;
    min-width: 0;
  }
  .landing-container .landing-right > :not(.right-content-row) {
    order: 0;
  }
  .landing-container .landing-right > .landing-header {
    order: 2;
  }
  .landing-container .landing-left > :first-child {
    order: 1;
  }
  .landing-container .right-3col > .scoreboard {
    order: 2;
  }
  .landing-container .right-3col > .chatter {
    order: 3;
  }
  .landing-container .landing-left > :not(:first-child) {
    order: 4;
  }
  .landing-container > :not(.landing-left):not(.landing-right) {
    order: 6;
  }
}
@media (max-width: 899.98px) {
  .landing-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    padding: 0 var(--space-2);
  }
}
.right-3col,
.content-2col,
.content-4col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.right-content-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.content-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 1199.98px) {
  .content-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bottom-stats-container {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (max-width: 1199.98px) {
  .bottom-stats-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 899.98px) {
  .bottom-stats-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.landing-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: var(--space-1);
}

.landing-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-4);
}
.landing-top > * {
  margin-top: 0;
  margin-bottom: 0;
}

.landing-top:has(> *) {
  margin-bottom: var(--space-4);
}

.landing-header__online-wrap {
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}

.landing-header__quiet {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
  text-align: left;
}

.scoreboard .card-head {
  flex-wrap: wrap;
  gap: var(--space-2);
}
.scoreboard .card-head .button-row {
  gap: var(--space-2);
  margin-left: auto;
}

.scoreboard-filter {
  margin: 0 0 var(--space-3);
  max-width: 100%;
}

.yard-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius-small);
  background: var(--sys-surface-grouped);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}
.yard-strip:hover {
  background: var(--sys-color-hover);
}

.yard-strip-length {
  margin-left: auto;
  color: var(--sys-color-text-muted);
}

.scoreboard[data-view=condensed] .scoreboard-majors,
.scoreboard[data-view=condensed] .scoreboard-minors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
}
.scoreboard[data-view=condensed] .scoreboard-minors {
  display: none;
}

.score-row {
  display: grid;
  grid-template-columns: 1fr 1fr 6.5em;
  align-items: center;
  gap: 2px var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius-small);
  background: var(--sys-color-surface);
  color: var(--sys-color-text-primary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.score-row:is(a):hover {
  background: var(--sys-color-hover);
}

.game.is-mine .score-row {
  border-color: var(--sys-color-primary);
}

.score-row-team {
  display: grid;
  grid-template-columns: 3.4em auto;
  justify-content: start;
  align-items: baseline;
  gap: var(--space-1);
  font-weight: 600;
}

.score-row-val {
  font-variant-numeric: tabular-nums;
}

.score-row-win {
  font-weight: 700;
}

.score-row:has(.score-row-win) .score-row-team:not(.score-row-win) {
  color: var(--sys-color-text-secondary);
  font-weight: 500;
}

.score-row-extra {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  gap: var(--space-2);
  color: var(--sys-color-text-muted);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.score-row-innings {
  white-space: nowrap;
}

.score-row-notes {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.game.is-mine .score-row,
.game.rivals .score-row,
.game.gotd .score-row {
  border-width: 2px;
  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
}

.game.rivals .score-row {
  border-color: var(--sys-featured-rivalry-edge);
}

.game.gotd .score-row {
  border-color: var(--sys-featured-gotd-edge);
}

.scoreboard[data-view=expanded] .scoreboard-majors,
.scoreboard[data-view=expanded] .scoreboard-minors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.scoreboard[data-view=expanded] .scoreboard-minors {
  display: none;
}

.score-game {
  overflow: hidden;
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius-small);
  background: var(--sys-color-surface);
}

.score-game-inner {
  padding: var(--space-3);
}

.game.is-mine .score-game,
.game.rivals .score-game,
.game.gotd .score-game {
  border-width: 2px;
}

.game.is-mine .score-game {
  border-color: var(--sys-color-primary);
}

.game.rivals .score-game {
  border-color: var(--sys-featured-rivalry-edge);
}

.game.gotd .score-game {
  border-color: var(--sys-featured-gotd-edge);
}

.score-game-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-primary);
}

.score-game-band--gotd {
  background: var(--sys-featured-gotd-bg);
}

.score-game-table {
  width: 100%;
}
.score-game-table td {
  padding: 3px var(--space-1);
}

.score-game-logo {
  width: 36px;
}

.score-game-runs {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scoreboard .recap {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.scoreboard .links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.scoreboard .link-boxscore,
.scoreboard .link-playbyplay {
  font-weight: 600;
}
.scoreboard .innings {
  color: var(--sys-color-text-muted);
}
.scoreboard .comments {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.scoreboard .author {
  color: var(--sys-color-text-muted);
}
.scoreboard .hide-cell {
  display: none;
}
@media (min-width: 1200px) {
  .scoreboard .hide-cell {
    display: table-cell;
  }
}

.score-game-comments {
  margin-top: var(--space-2);
}

.scoreboard-minors {
  display: none;
}

.cell-hide {
  display: none;
}
@media (min-width: 1536px) {
  .cell-hide {
    display: table-cell;
  }
}

.landing-simple {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface);
}

.landing-comment-others {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.landing-toggle-comment {
  display: none;
}

.bucket-2 {
  background-color: var(--sys-surface-secondary-tint);
}
.bucket-2 .additional {
  background-color: transparent !important;
  color: var(--sys-color-text-primary);
}
.bucket-2 .bottom-table tr {
  border-bottom-color: var(--sys-color-border);
}

.title-tier-4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  letter-spacing: -0.05em;
  line-height: 1.1;
}

.title-tier-6 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 700;
}

.title-tier-4 a,
.title-tier-6 a {
  color: inherit;
  text-decoration: none;
}
.title-tier-4 a:hover,
.title-tier-6 a:hover {
  text-decoration: underline;
}

.team-name-weighted .team-name-city {
  font-weight: 700;
}
.team-name-weighted .team-name-nickname {
  font-weight: 400;
}

.bottom-table {
  width: 100%;
  border-collapse: collapse;
}
.bottom-table tr {
  border-bottom: 1px solid var(--table-rule-row);
}
.bottom-table tr:last-child {
  border-bottom: none;
}
.bottom-table td {
  padding: var(--space-1) 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.bottom-table td a {
  color: var(--sys-color-text-primary);
  text-decoration: none;
}
.bottom-table td a:hover {
  color: var(--sys-color-link);
}
.bottom-table .bottom-value {
  color: var(--sys-color-primary);
  font-weight: 600;
  text-align: right;
}

.thumbnails-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.usage-section {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.usage-section table {
  min-width: 100%;
}

.powerpoll-table .rank {
  width: 34px;
  text-align: center;
  line-height: 1;
}
.powerpoll-table .logo img {
  display: block;
  width: 22px;
  height: 22px;
}
.powerpoll-table .moved {
  width: 30px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
.powerpoll-table .powerpoll-up {
  color: var(--sys-color-success-text);
}
.powerpoll-table .powerpoll-down {
  color: var(--sys-color-error-text);
}
.powerpoll-table .powerpoll-split td {
  border-top: 2px solid var(--table-rule-top);
}

.rb-rank {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.rb-rank .fa-wreath-laurel {
  font-size: 22px;
  color: var(--sys-color-text-muted);
}
.rb-rank .rb-rank-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--sys-color-text-primary);
}
.rb-rank.rb-rank-1 .fa-wreath-laurel {
  color: #DAA520;
}

.icon-comments {
  display: inline;
  margin: 0 3px 0 0;
  padding: var(--space-1);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-selected);
  color: var(--sys-color-text-secondary);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 8px;
  line-height: 9px;
}

.landing-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.landing-left > * {
  min-width: 0;
}

.landing-left > .card,
.landing-right > .card,
.content-4col > .card,
.content-2col > .card,
.right-3col > .card,
.bottom-stats-container > .card,
.journal-spotlight > .card {
  margin-bottom: 0;
}

.card.journal-card asset {
  margin: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card.journal-card description {
  margin: 0 0 var(--space-2);
}

.trivia-question,
.overunder-question {
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
}

.trivia-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
}

.trivia-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.trivia-results {
  width: 100%;
  margin-bottom: var(--space-3);
}
.trivia-results td {
  padding: var(--space-1) var(--space-2);
  vertical-align: top;
}

.trivia-check {
  width: 20px;
  color: var(--sys-color-success-text);
}

.trivia-tally {
  width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.trivia-owners {
  width: 50%;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.trivia-correct {
  background-color: var(--sys-color-success-subtle);
}

.trivia-correct .trivia-name {
  font-weight: 700;
}

.trivia-explanation {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-grouped);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.trivia-explanation p,
.trivia-explanation ul,
.trivia-explanation ol {
  margin: 0 0 var(--space-2);
}
.trivia-explanation ul,
.trivia-explanation ol {
  padding-left: var(--space-4);
}
.trivia-explanation > :last-child {
  margin-bottom: 0;
}

.trivia-credit {
  margin-left: auto;
}

.overunder-results {
  display: flex;
  gap: var(--space-2);
}

.overunder-side {
  flex: 1;
  padding: var(--space-2);
  border-radius: var(--radius-small);
}

.overunder-winner {
  background-color: var(--sys-color-success-subtle);
}

.overunder-label {
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.overunder-owners {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.trade-vote[data-surface=inverse] .photo-circle-60 {
  border-color: var(--sys-color-border);
}

.random-player {
  display: flow-root;
}

.random-player-thumb {
  float: right;
  margin: 0 0 var(--space-2) var(--space-3);
}

.random-player-team {
  margin-bottom: var(--space-2);
}

.landing-reviews {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.landing-reviews .movie-container.movie-container {
  padding: 0;
  border-radius: 0;
  background: none;
}
.landing-reviews .movie-container + .movie-container {
  padding-top: var(--space-4);
  border-top: 1px solid var(--sys-color-border);
}

.trade-block-card .card-head,
.trade-block-card .card-actions {
  justify-content: center;
}

.trade-block-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

.trade-block-note {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.landing-actions-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 2px 0;
}

.landing-bucket-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.landing-mini {
  flex: 0 0 calc((100% - var(--space-2)) / 2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-2);
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-grouped);
}
.landing-mini name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-secondary);
  text-align: center;
}
.landing-mini data {
  display: block;
  font-size: 18px;
  line-height: 21px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.powerpoll-points {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.owner-question {
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.owner-answer {
  padding-left: var(--space-3);
  border-left: 2px solid var(--sys-color-border);
}

.card.landing-birthday {
  background-color: var(--sys-color-primary);
  background-image: url(/objects/images/birthday-backdrop.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom left;
  color: var(--sys-color-on-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}
.card.landing-birthday .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card.landing-birthday .birthday-owner {
  margin-bottom: var(--space-3);
}
.card.landing-birthday .name {
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.card.landing-chatter .talk {
  margin: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--sys-color-border);
  border-radius: 0;
  background: none;
}

.battle .card-head {
  justify-content: center;
}

.battle-stats {
  width: 100%;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.battle-stats td {
  padding: 1px 0;
}

.battle-rating {
  text-align: center;
}

.battle-note {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
  text-align: center;
}

.draft-on-clock {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--radius);
  background-color: var(--sys-surface-primary-tint);
  text-align: center;
}

.draft-attendees-form {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-small);
  background-color: var(--sys-surface-grouped);
}

.draft-attendees-question {
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.draft-attendees-date {
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.draft-attendees-links {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.draft-attendees-arrive {
  margin-top: var(--space-2);
}

.draft-attendees-section + .draft-attendees-section {
  margin-top: var(--space-4);
}

.draft-attendees-heading {
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.draft-attendees-thumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-1);
}

.draft-attendee-thumb {
  flex-shrink: 0;
}
.draft-attendee-thumb .owner-thumb-50px {
  margin: 0;
}

.draft-attendees-names {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.dfa-results-tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-5);
}
@media (max-width: 899.98px) {
  .dfa-results-tiers {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dfa-results-tiers .card-section-title {
  text-align: center;
}

.dfa-results-players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.dfa-results-player {
  position: relative;
  width: 100px;
  min-height: 160px;
  text-align: center;
}

.dfa-results-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface-solid);
}

.dfa-results-first,
.dfa-results-last {
  line-height: 1.25;
}

.dfa-results-first {
  margin-top: var(--space-1);
  font-weight: 600;
}

.dfa-results-position {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
}

.online-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.online-part {
  flex-shrink: 0;
  text-align: center;
}
.online-part a {
  display: block;
}
.online-part a:hover {
  opacity: 0.8;
}
.online-part .owner-thumb-32px,
.online-part .owner-thumb-50px {
  margin: 0;
}

.online-part--recent .owner-thumb-32px,
.online-part--recent .owner-thumb-50px {
  box-shadow: 0 0 0 2px var(--sys-color-surface-solid), 0 0 0 4px var(--sys-color-success);
}

.online-ago {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--sys-color-success-text);
}

.landing-header__online {
  flex: 1;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.landing-header__online .online-part--recent .owner-thumb-32px,
.landing-header__online .online-part--recent .owner-thumb-50px {
  box-shadow: 0 0 0 2px var(--sys-color-bg), 0 0 0 4px var(--sys-color-success);
}

.online-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background-color: var(--sys-marker-neutral-bg);
  color: var(--sys-marker-neutral-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
  cursor: default;
}

.online-part--wide,
.online-part--more-wide {
  display: none;
}

@media (min-width: 1200px) {
  .online-part--wide,
.online-part--more-wide {
    display: block;
  }

  .online-part--more-narrow {
    display: none;
  }
}
.chatter .chatter-move,
.chatter .chatter-clink {
  float: left;
  display: inline-block;
  margin: 0 var(--space-2);
}
.chatter .chatter-move a,
.chatter .chatter-clink a {
  text-decoration: none;
}
.chatter .chatter-action {
  float: right;
  display: inline-block;
}
.chatter .talk {
  position: relative;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface);
  word-wrap: break-word;
}
.chatter .talk .chatter-copy {
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.chatter .talk .chatter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.chatter .talk .chatter-owner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}
.chatter .talk .chatter-owner-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.chatter .talk .chatter-owner-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.chatter .talk .chatter-owner-time {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.chatter .talk .chatter-heart {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  white-space: nowrap;
}
.chatter .talk .chatter-delete {
  opacity: 0.5;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.chatter .talk .chatter-delete:hover {
  opacity: 1;
}
.chatter .entry {
  margin-bottom: var(--space-4);
}
.chatter .chatter-small {
  height: 36px;
}
.chatter .chatter-rest {
  display: none;
}
.chatter .owner {
  float: left;
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.chatter .owner a {
  color: var(--sys-color-text-secondary);
  font-weight: 600;
}
.chatter textarea {
  width: 100%;
  height: 90px;
  margin-bottom: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--sys-color-border-strong);
  border-radius: var(--radius);
  background-color: var(--sys-color-input-bg);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.chatter .copy {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
}

.chatter-loadmore-wrap {
  text-align: center;
}

.chatter-loadmore {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-secondary);
  text-decoration: none;
}
.chatter-loadmore:hover {
  color: var(--sys-color-text-primary);
}
.chatter-loadmore.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.chatter-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
  width: 100%;
}
@media (min-width: 1200px) {
  .chatter-page {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.chatter-page-main,
.chatter-page-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.chatter-page-title {
  margin: 0;
}

.chatter-page-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chatter-board .title {
  margin-bottom: var(--space-3);
  font-weight: 700;
}
.chatter-board table {
  width: 100%;
}
.chatter-board td {
  padding: var(--space-1) 0;
  vertical-align: top;
}
.chatter-board .r {
  text-align: right;
  white-space: nowrap;
}
.chatter-board .chatter-board-body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.4;
}
.chatter-board .chatter-board-meta {
  margin-top: 2px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--sys-color-text-muted);
}

.chatter-link {
  margin-left: var(--space-1);
  color: var(--sys-color-link);
}

.chatter-link-btn,
.chatter-move-btn {
  display: inline-block;
  margin-right: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.chatter-link-btn a,
.chatter-move-btn a {
  color: var(--sys-color-text-secondary);
}
.chatter-link-btn a:hover,
.chatter-move-btn a:hover {
  color: var(--sys-color-text-primary);
}

.chatter-content-move {
  display: none;
}

#chatter-link-field,
#chatter-link-text {
  display: none;
}

.link-card-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-primary);
  overflow-wrap: anywhere;
}

.link-card-meta {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.link-card-bonus {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--sys-color-link);
  text-decoration: none;
}
.link-card-bonus:is(span) {
  color: var(--sys-color-text-secondary);
}

.link-card-reply > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--sys-color-link);
  cursor: pointer;
  list-style: none;
}
.link-card-reply > summary::-webkit-details-marker {
  display: none;
}
.link-card-reply[open] > summary {
  margin-bottom: var(--space-2);
}

.legend-section {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
  font-family: var(--font-serif);
}
.legend-section:first-child {
  margin-top: 0;
}

.legend-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.legend-name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}

.legend-year {
  margin: 0;
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-secondary);
}

.legend-vote {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.legend-awards {
  width: 100%;
  margin: var(--space-2) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--sys-color-border);
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.legend-awards li {
  display: flex;
  gap: var(--space-2);
  padding: 1px 0;
}

.legend-award-year {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--sys-color-text-muted);
}

.memoriam {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

.memoriam-card .card-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}
@media (max-width: 899.98px) {
  .memoriam-card .card-body {
    flex-direction: column;
    align-items: center;
  }
}

.memoriam-portrait {
  flex: none;
}

.memoriam-text {
  min-width: 0;
  max-width: 68ch;
}
.memoriam-text h4 {
  margin-bottom: var(--space-1);
}
.memoriam-text p {
  margin-bottom: var(--space-3);
}
.memoriam-text p:last-child {
  margin-bottom: 0;
}
@media (max-width: 899.98px) {
  .memoriam-text {
    text-align: left;
  }
}

.tl-wrap {
  --tl-column: 640px;
  width: 100%;
  max-width: var(--tl-column);
  margin-inline: auto;
}
@media (max-width: 1199.98px) {
  .tl-wrap {
    --tl-column: 100%;
  }
}

.tl-day + .tl-day {
  margin-top: var(--space-6);
}

.tl-day__header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  background: var(--sys-color-bg);
  border-bottom: 1px solid var(--sys-color-border);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--sys-color-text-primary);
}

.tl-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tl-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.tl-card {
  --tl-accent: var(--sys-color-text-muted);
  padding: var(--card-pad);
  border-bottom-width: var(--elevation-surface);
}

.tl-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.tl-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  color: var(--tl-accent);
}
.tl-card__badge .fa,
.tl-card__badge .fas,
.tl-card__badge .far,
.tl-card__badge .fa-solid {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: calc(16px * 0.8);
  line-height: 1;
}

.tl-card__time {
  flex: none;
  margin-left: auto;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tl-card__sub {
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.tl-card__title {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}
.tl-card__title a {
  color: var(--sys-color-link);
}

.tl-card__copy {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  overflow-wrap: break-word;
}
.tl-card__copy a {
  color: var(--sys-color-link);
}
.tl-card__copy p:last-child {
  margin-bottom: 0;
}

.tl-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.tl-dim {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.tl-link {
  margin-left: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-link);
}

.tl-card--score,
.tl-card--highlight {
  --tl-accent: var(--chart-5-ink);
}

.tl-card--trade,
.tl-card--transaction,
.tl-card--block,
.tl-card--auction,
.tl-card--injury {
  --tl-accent: var(--chart-3-ink);
}

.tl-card--journal,
.tl-card--review,
.tl-card--dailyshow,
.tl-card--chatter,
.tl-card--calendar,
.tl-card--player {
  --tl-accent: var(--chart-2-ink);
}

.tl-card--poll,
.tl-card--vote,
.tl-card--question,
.tl-card--pickem,
.tl-card--trivia {
  --tl-accent: var(--chart-1-ink);
}

.tl-card--deployment,
.tl-card--thumbnail,
.tl-card--birthday {
  --tl-accent: var(--chart-4-ink);
}

.tl-owner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.tl-owner .owner-thumb-32px {
  flex: none;
  margin: 0;
}

.tl-owner__name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-replies {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.tl-replies__count {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sys-color-text-secondary);
  white-space: nowrap;
}

.tl-replies__bonus {
  font-variant-numeric: tabular-nums;
}

.tl-replies__avatars {
  display: flex;
  align-items: center;
}
.tl-replies__avatars > a {
  position: relative;
  display: block;
  margin-left: -8px;
}
.tl-replies__avatars > a:first-child {
  margin-left: 0;
}
.tl-replies__avatars > a:hover {
  z-index: 1;
}
.tl-replies__avatars .owner-thumb-32px {
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: var(--avatar-radius);
  box-shadow: 0 0 0 2px var(--surface-current);
}

.tl-replies__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--sys-marker-neutral-bg);
  color: var(--sys-marker-neutral-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--surface-current);
}

.tl-marks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  margin-left: var(--space-2);
}

.tl-mark {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tl-mark--new {
  color: var(--sys-marker-new-text);
}

.tl-mark--update {
  color: var(--sys-marker-update-text);
}

.tl-mark--nsfw {
  color: var(--sys-marker-nsfw-text);
}

.tl-mark--archive {
  color: var(--sys-marker-archive-text);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.tl-hearts {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-marker-update-text);
  white-space: nowrap;
}
.tl-hearts a {
  color: inherit;
}

.tl-scoreboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 599.98px) {
  .tl-scoreboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 419.98px) {
  .tl-scoreboard {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tl-game {
  display: block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius-small);
  background: var(--sys-surface-grouped);
  color: var(--sys-color-text-primary);
  text-decoration: none;
}
.tl-game:hover {
  background-image: linear-gradient(var(--sys-color-hover), var(--sys-color-hover));
}
.tl-game .photo-circle-30 {
  width: 20px;
  height: 20px;
  margin: 0;
}

.tl-game__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 2px 0;
}
.tl-game__row.is-win {
  font-weight: 700;
}

.tl-game__team {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.tl-game__abbr {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-game__score {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.tl-trade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 599.98px) {
  .tl-trade {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tl-trade__side {
  min-width: 0;
}

.tl-trade__team {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.tl-trade__team .photo-circle-30 {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
}

.tl-trade__gets {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.tl-trade__gets div {
  padding: 1px 0;
}
.tl-trade__gets a {
  color: var(--sys-color-link);
}

.tl-txns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 599.98px) {
  .tl-txns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tl-txn-group {
  min-width: 0;
}

.tl-txn-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 700;
}
.tl-txn-group__head .fa {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: calc(16px * 0.8);
  line-height: 1;
  color: var(--sys-color-text-muted);
}

.tl-txn-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tl-txn-list li {
  padding-left: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.6;
}
.tl-txn-list a {
  color: var(--sys-color-link);
}
.tl-txn-list .tl-dim {
  margin-left: var(--space-1);
}

.tl-journal__img {
  width: 100%;
  height: 180px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-small);
  background-position: center;
  background-size: cover;
}

.tl-review {
  display: flex;
  gap: var(--space-4);
}

.tl-review__poster {
  flex: none;
  width: 72px;
  height: 108px;
  border-radius: var(--radius-small);
  background-position: center;
  background-size: cover;
}

.tl-review__body {
  min-width: 0;
}

.tl-review__stars {
  margin: var(--space-1) 0 var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.tl-review__by {
  margin-top: var(--space-2);
}

.yard-start {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: auto;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
}
.yard-start .fa {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: calc(16px * 0.8);
  line-height: 1;
}

.tl-auction,
.tl-block,
.tl-player {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.tl-auction {
  align-items: center;
}

.tl-auction__photo,
.tl-block__photo,
.tl-player__photo {
  flex: none;
}
.tl-auction__photo .player-circle-60,
.tl-block__photo .player-circle-60,
.tl-player__photo .player-circle-60 {
  width: 48px;
  height: 48px;
  margin: 0;
  border-width: 2px;
}

.tl-player__photo .player-circle-60 {
  width: 60px;
  height: 60px;
}

.tl-auction__body,
.tl-block__body,
.tl-player__body {
  min-width: 0;
}

.tl-auction__player,
.tl-block__player,
.tl-player__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}
.tl-auction__player a,
.tl-block__player a,
.tl-player__name a {
  color: var(--sys-color-link);
}

.tl-auction-win {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--tl-accent);
}

.tl-block .tl-card__copy,
.tl-player .tl-card__copy {
  margin-top: var(--space-2);
}

.tl-deploy__body {
  white-space: pre-line;
}

.tl-deploy__list {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.tl-deploy__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.tl-deploy__item + .tl-deploy__item {
  border-top: 1px solid var(--sys-color-border);
}

.tl-deploy__at {
  flex: none;
  min-width: 64px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tl-deploy__msg {
  flex: 1 1 auto;
  min-width: 0;
}

.tl-highlight-group + .tl-highlight-group {
  margin-top: var(--space-4);
}

.tl-highlight-group__head {
  margin-bottom: var(--space-1);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
}

.tl-highlight-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-highlight {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--sys-color-border);
}
.tl-highlight:last-child {
  border-bottom: 0;
}

.tl-highlight__icon {
  flex: none;
  width: 18px;
  text-align: center;
  color: var(--tl-accent);
}

.tl-highlight__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.tl-highlight__title {
  font-weight: 700;
}

.tl-highlight__who a {
  color: var(--sys-color-link);
}

.tl-highlight__link {
  flex: none;
  align-self: center;
  margin-left: auto;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-link);
  white-space: nowrap;
}

.tl-highlight.is-gold .tl-highlight__icon,
.tl-highlight.is-gold .tl-highlight__title {
  color: var(--sys-featured-gotd-edge);
}

.tl-injury-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tl-injury-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--sys-color-border);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.6;
}
.tl-injury-list li:last-child {
  border-bottom: 0;
}
.tl-injury-list a {
  color: var(--sys-color-link);
}

.tl-injury__who {
  min-width: 0;
}

.tl-injury__detail {
  flex: none;
  text-align: right;
  white-space: nowrap;
}

.tl-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: var(--space-3);
}

.tl-thumb {
  display: block;
}
.tl-thumb:hover .tl-thumb__img {
  opacity: 0.85;
}

.tl-thumb__img {
  width: 100%;
  aspect-ratio: 1/1;
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius-small);
  background-position: center;
  background-size: cover;
}

.tl-birthday {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.tl-birthday + .tl-birthday {
  margin-top: var(--space-3);
}
.tl-birthday .owner-thumb-32px {
  flex: none;
  margin: 0;
}

.tl-birthday__copy {
  min-width: 0;
}

.tl-birthday__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}

.tl-poll {
  margin: var(--space-3) 0;
}

.tl-poll__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.tl-poll__row + .tl-poll__row {
  margin-top: var(--space-1);
}

.tl-poll__label {
  flex: 0 0 35%;
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.tl-poll__label a {
  color: var(--sys-color-link);
}

.tl-poll__bar {
  flex: 1 1 auto;
}

.tl-poll__count {
  flex: 0 0 28px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tl-poll__row--leader .tl-poll__label {
  font-weight: 700;
}
.tl-poll__row--leader .tl-poll__count {
  color: var(--sys-color-text-primary);
  font-weight: 700;
}

.tl-trivia__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.tl-trivia__option {
  justify-content: flex-start;
  width: 100%;
  height: auto;
  padding: var(--space-2) var(--space-3);
  border-color: var(--sys-color-border-strong);
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
}
.tl-trivia__option:hover {
  border-color: var(--tl-accent);
  color: var(--tl-accent);
}

.tl-trivia__results {
  width: 100%;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}
.tl-trivia__results td {
  padding: var(--space-1) var(--space-2);
  vertical-align: top;
}

.tl-trivia__check {
  width: 20px;
  color: var(--sys-color-success-text);
}

.tl-trivia__name {
  width: 100%;
}

.tl-trivia__tally {
  width: 32px;
  color: var(--sys-color-text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tl-trivia__owners {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.tl-trivia__correct .tl-trivia__name {
  font-weight: 700;
}

.tl-trivia__explanation {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}
.tl-trivia__explanation a {
  color: var(--sys-color-link);
}
.tl-trivia__explanation p:last-child {
  margin-bottom: 0;
}

.tl-loadmore-wrap {
  margin: var(--space-5) 0 var(--space-7);
  text-align: center;
}

.tl-loadmore {
  min-width: 220px;
}

.tl-loading {
  display: flex;
  justify-content: center;
  padding: var(--space-3);
}

.journal-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .journal-spotlight {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.journal-card {
  margin-bottom: 0;
}
.journal-card .inside {
  display: block;
  height: 100%;
}
.journal-card asset {
  display: block;
  min-height: 200px;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-2);
  border-radius: var(--radius) var(--radius) 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
@media (max-width: 899.98px) {
  .journal-card asset {
    min-height: 140px;
  }
}
.journal-card name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}
.journal-card name a {
  font-weight: 700;
}
@media (max-width: 899.98px) {
  .journal-card name {
    font-size: 15px;
  }
}
.journal-card description {
  display: block;
  margin: 6px 0;
}
.journal-card icons {
  display: block;
  margin-top: var(--space-1);
}

.journal-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.journal-type {
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--sys-color-text-muted);
}

.journal-table {
  margin-bottom: 0;
}
.journal-table .marker {
  margin-left: 6px;
}

.journal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
@media (min-width: 900px) {
  .journal-hero {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.journal-recent {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
@media (min-width: 600px) {
  .journal-recent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .journal-recent {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.journal-recent .journal-card asset {
  min-height: 140px;
}
.journal-recent .journal-card name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
}

.journal-nav {
  display: flex;
  justify-content: space-between;
  margin: var(--space-4) 0;
}
.journal-nav a {
  font-weight: 600;
  color: var(--sys-color-link);
}

.movie-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius);
  background-color: var(--sys-color-surface);
}

.movie-image {
  width: 100%;
  min-height: 180px;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.movie-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.movie-container .movie-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
}

.movie-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
  line-height: 1.2;
}
.movie-body .author {
  color: var(--sys-color-text-muted);
}

.movie-stars {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.battle-matchup {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.battle-card {
  flex: 1;
  padding: var(--space-2);
  border: 2px solid var(--sys-color-border);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.2s ease;
}
.battle-card:hover {
  border-color: var(--sys-color-primary);
}

.battle-name {
  padding-bottom: var(--space-1);
  font-weight: 700;
}

.battle-vs {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--sys-color-text-muted);
}

.my-page .my-section {
  min-width: 0;
}

.my-page .landing-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.my-section .myteam-nav {
  margin-bottom: 0;
}
.my-section .card-mini-container {
  margin: 0;
}
.my-section > .card {
  margin-bottom: 0;
}

.myteam-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.myteam-nav-pages,
.myteam-nav-trade {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: var(--space-1);
}
.myteam-nav-pages a,
.myteam-nav-trade a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  color: var(--sys-color-link);
  text-decoration: none;
}
.myteam-nav-pages a:hover,
.myteam-nav-trade a:hover {
  background-color: var(--sys-color-hover);
}

@media (max-width: 1199.98px) {
  .my-page .landing-left > .my-section-upcoming {
    order: 2;
    grid-column: span 8;
  }
  .my-page .landing-left > .my-section-auctions {
    order: 3;
    grid-column: span 8;
  }
  .my-page .landing-left > .my-section-rosternav {
    order: 4;
    grid-column: span 8;
  }
  .my-page .landing-left > .my-section-totals {
    order: 4;
    grid-column: span 8;
  }
  .my-page .landing-left > .my-section-pitching {
    order: 5;
    grid-column: span 8;
  }
  .my-page .landing-left > .my-section-catching {
    order: 6;
    grid-column: span 8;
  }
  .my-page .landing-right > .right-content-row {
    order: 7;
    grid-column: span 8;
  }
  .my-page .landing-right > .my-section-calendar {
    order: 8;
    grid-column: span 8;
  }
  .my-page .landing-left > .my-section-injuries {
    order: 9;
    grid-column: span 8;
  }
}
@media (max-width: 899.98px) {
  .my-page .landing-left > .my-section-upcoming {
    grid-column: span 4;
  }
  .my-page .landing-left > .my-section-auctions {
    grid-column: span 4;
  }
  .my-page .landing-left > .my-section-rosternav {
    grid-column: span 4;
  }
  .my-page .landing-left > .my-section-totals {
    grid-column: span 4;
  }
  .my-page .landing-left > .my-section-pitching {
    grid-column: span 4;
  }
  .my-page .landing-left > .my-section-catching {
    grid-column: span 4;
  }
  .my-page .landing-left > .my-section-injuries {
    grid-column: span 4;
  }
  .my-page .landing-right > .right-content-row {
    grid-column: span 4;
  }
  .my-page .landing-right > .my-section-calendar {
    grid-column: span 4;
  }
}
.chart-frame {
  position: relative;
  min-width: 0;
}
.chart-frame canvas {
  display: block;
  max-width: 100%;
}

.chart-frame-spark {
  height: 72px;
}

.dropzone,
.uploader-drop {
  position: relative;
  display: block;
  padding: var(--space-7) var(--space-5);
  border: 2px dashed var(--sys-color-border-strong);
  border-radius: var(--radius);
  background-color: var(--sys-surface-grouped);
  text-align: center;
  cursor: pointer;
}
.dropzone:hover,
.uploader-drop:hover {
  border-color: var(--sys-color-primary);
  background-color: var(--sys-surface-primary-tint);
}
.dropzone.is-over,
.uploader-drop.is-over {
  border-color: var(--sys-color-primary);
  background-color: var(--sys-surface-primary-tint);
}
.dropzone:focus-within,
.uploader-drop:focus-within {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.dropzone-label,
.uploader-drop-title {
  display: block;
  color: var(--sys-color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  cursor: pointer;
}

.dropzone-note,
.uploader-drop-note {
  margin-top: var(--space-2);
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.dropzone-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-3);
}

.dropzone-image {
  max-width: 250px;
  max-height: 250px;
  border-radius: var(--radius-small);
}

.dropzone-file {
  color: var(--sys-color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.dropzone-error:empty {
  display: none;
}

.dropzone-error {
  margin-top: var(--space-2);
  color: var(--sys-color-error-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.snapshot-still,
.snapshot-gone {
  display: block;
  padding: var(--space-1) var(--space-2);
  border-left: 2px solid transparent;
}

.snapshot-still + .snapshot-still,
.snapshot-still + .snapshot-gone,
.snapshot-gone + .snapshot-still,
.snapshot-gone + .snapshot-gone {
  margin-top: 2px;
}

.snapshot-gone {
  border-left-color: var(--sys-color-border-strong);
  background-color: var(--sys-surface-grouped);
  color: var(--sys-color-text-secondary);
}
.snapshot-gone a {
  color: var(--sys-color-text-secondary);
}

.site-footer {
  margin-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.site-footer-columns {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) {
  .site-footer-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .site-footer-columns {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.site-footer-title {
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-serif);
  font-weight: 600;
}

.site-footer-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  margin-inline: calc(-1 * var(--space-2));
  padding-inline: var(--space-2);
  border-radius: var(--radius-small);
  color: var(--sys-color-link);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
}
.site-footer-link [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: calc(16px * 0.8);
  line-height: 1;
}
.site-footer-link:hover {
  background: var(--sys-color-hover);
  color: var(--sys-color-link);
  text-decoration: none;
}
.site-footer-link[aria-current=page] {
  background: var(--sys-color-selected);
  color: var(--sys-color-primary);
  font-weight: 600;
}

.site-footer-divider {
  height: 1px;
  margin: var(--space-6) 0 var(--space-5);
  border: 0;
  background: var(--sys-color-border);
}

.site-footer-legal {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.site-footer-services .nav-counter {
  margin-left: calc(5px - var(--space-1));
}
.site-footer-services .nav-counter:empty {
  display: none;
}

.site-footer-services {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-1) 0 calc(-1 * var(--space-1)) -15px;
  padding: var(--space-1) 0;
  list-style: none;
  clip-path: inset(0 0 0 6px);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.site-footer-services li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.site-footer-services li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sys-color-text-muted);
}
.site-footer-services a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-1);
  border-radius: var(--radius-small);
  color: var(--sys-color-link);
  text-decoration: none;
}
.site-footer-services a:hover {
  background: var(--sys-color-hover);
  text-decoration: none;
}
.site-footer-services [class*=fa-] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: calc(16px * 0.8);
  line-height: 1;
}

.site-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-3);
}

.site-footer-speed {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-muted);
}

.site-footer-streak {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sys-color-text-secondary);
}

.site-footer-action {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--sys-color-link);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
}
.site-footer-action:hover {
  background: var(--sys-color-hover);
  color: var(--sys-color-link);
  text-decoration: none;
}

@media (min-width: 900px) {
  .c1 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 6.5%;
  }

  .c2 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 15%;
  }

  .c3 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 23.5%;
  }

  .c4 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 32%;
  }

  .c5 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 40.5%;
  }

  .c6 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 49%;
  }

  .c7 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 57.5%;
  }

  .c8 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 66%;
  }

  .c9 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 74.5%;
  }

  .c10 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 83%;
  }

  .c11 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 91.5%;
  }

  .c12 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 2%;
    width: 100%;
  }

  .x1 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 8.3333333333%;
  }

  .x2 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 16.6666666667%;
  }

  .x3 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 25%;
  }

  .x4 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 33.3333333333%;
  }

  .x5 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 41.6666666667%;
  }

  .x6 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 50%;
  }

  .x7 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 58.3333333333%;
  }

  .x8 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 66.6666666667%;
  }

  .x9 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 75%;
  }

  .x10 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 83.3333333333%;
  }

  .x11 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 91.6666666667%;
  }

  .x12 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 100%;
  }

  .e1 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 12.5%;
  }

  .e2 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 25%;
  }

  .e3 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 37.5%;
  }

  .e4 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 50%;
  }

  .e5 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 62.5%;
  }

  .e6 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 75%;
  }

  .e7 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 87.5%;
  }

  .e8 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 100%;
  }

  .e9 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 112.5%;
  }

  .e10 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 125%;
  }

  .e11 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 137.5%;
  }

  .e12 {
    position: relative;
    float: left;
    margin-bottom: 24px;
    text-align: left;
    margin-left: 0;
    width: 150%;
  }

  .cf {
    clear: both;
    margin-left: 0;
  }

  .fl {
    float: left;
  }
}
.cl {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.cll {
  clear: left;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.sp {
  margin-right: 10px;
}

.cno {
  margin-bottom: 0;
}

.cme {
  margin-bottom: 9px;
}

.cr {
  text-align: right;
}

.cc {
  text-align: center;
}

.mt6 {
  margin-top: 6px;
}

.mt12 {
  margin-top: 12px;
}

.no {
  margin-bottom: 0;
}

.buffer {
  height: 21px;
}

.buffer-mid {
  height: 15px;
}

.dim {
  color: var(--sys-color-text-muted);
}

.fr {
  float: right;
}

.player-circle-mini,
.player-circle-tiny,
.photo-circle-30,
.team-thumb-32px {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--radius-pill);
}

.player-circle-mini {
  width: 50px;
  height: 50px;
}

.player-circle-mini,
.player-circle-tiny {
  border-radius: var(--avatar-radius);
}

.player-circle-tiny {
  width: 24px;
  height: 24px;
  margin: 0 auto;
}

.photo-circle-30 {
  width: 30px;
  height: 30px;
}

.team-thumb-32px,
.player-thumb-no-32px {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border-radius: 12px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}

.team-thumb-32px {
  background-size: contain;
}

.player-thumb-no-32px {
  background-size: cover;
  border-radius: var(--avatar-radius);
}

.player-thumb-32px {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 auto var(--space-3);
  border-radius: var(--avatar-radius);
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.team-thumb-50px,
.player-thumb-no-50px {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 12px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}

.team-thumb-50px {
  background-size: contain;
}

.player-thumb-no-50px {
  background-size: cover;
  border-radius: var(--avatar-radius);
}

.player-thumb-50px {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0 auto var(--space-3);
  border-radius: var(--avatar-radius);
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.team-thumb-75px,
.player-thumb-no-75px {
  position: relative;
  width: 75px;
  height: 75px;
  margin: 0 auto;
  border-radius: 12px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}

.team-thumb-75px {
  background-size: contain;
}

.player-thumb-no-75px {
  background-size: cover;
  border-radius: var(--avatar-radius);
}

.player-thumb-75px {
  position: relative;
  width: 75px;
  height: 75px;
  margin: 0 auto var(--space-3);
  border-radius: var(--avatar-radius);
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.team-thumb-100px,
.player-thumb-no-100px {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 12px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}

.team-thumb-100px {
  background-size: contain;
}

.player-thumb-no-100px {
  background-size: cover;
  border-radius: var(--avatar-radius);
}

.player-thumb-100px {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto var(--space-3);
  border-radius: var(--avatar-radius);
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.team-thumb-150px,
.player-thumb-no-150px {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 12px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}

.team-thumb-150px {
  background-size: contain;
}

.player-thumb-no-150px {
  background-size: cover;
  border-radius: var(--avatar-radius);
}

.player-thumb-150px {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto var(--space-3);
  border-radius: var(--avatar-radius);
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.team-thumb-200px,
.player-thumb-no-200px {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 12px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}

.team-thumb-200px {
  background-size: contain;
}

.player-thumb-no-200px {
  background-size: cover;
  border-radius: var(--avatar-radius);
}

.player-thumb-200px {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto var(--space-3);
  border-radius: var(--avatar-radius);
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.team-thumb-250px,
.player-thumb-no-250px {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 12px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}

.team-thumb-250px {
  background-size: contain;
}

.player-thumb-no-250px {
  background-size: cover;
  border-radius: var(--avatar-radius);
}

.player-thumb-250px {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto var(--space-3);
  border-radius: var(--avatar-radius);
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.team-thumb-32px {
  width: 32px;
  height: 32px;
  background-size: contain;
  border-radius: 0;
}

.player-circle-60, .photo-circle-60,
.player-circle-90, .photo-circle-90,
.player-circle-120, .photo-circle-120,
.player-circle-180, .photo-circle-180,
.player-circle-medium, .photo-circle-medium,
.player-circle-full, .photo-circle-full,
.player-circle-xfull, .photo-circle-xfull,
.player-circle-dfa {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0 auto;
}

.player-circle-60, .photo-circle-60 {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  border: 6px solid var(--sys-surface-elevated);
}

.owner-thumb-32px {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border-radius: var(--avatar-radius);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.owner-thumb-50px {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: var(--avatar-radius);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.owner-thumb-100px {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: var(--avatar-radius);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.owner-thumb-150px {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: var(--avatar-radius);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.owner-thumb-200px {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: var(--avatar-radius);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.owner-thumb-250px {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: var(--avatar-radius);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.owner-image-tiny {
  width: 24px;
  border: 0;
  border-radius: var(--avatar-radius);
}

.link-start {
  display: inline-block;
  margin-right: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background-color: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.link-start:hover {
  background-color: var(--sys-color-link);
}

img.owner-photo-large {
  display: block;
  width: 110px;
}

img.owner-photo-medium {
  display: block;
  width: 60px;
}

img.owner-photo-rules {
  display: block;
  width: 80px;
}

img.owner-photo-comments {
  display: block;
  width: 48px;
}

img.owner-photo-small {
  width: 34px;
}

img.owner-photo-plain {
  display: block;
}

img.owner-photo-large,
img.owner-photo-medium,
img.owner-photo-rules,
img.owner-photo-comments,
img.owner-photo-small {
  border-radius: var(--avatar-radius);
}

img.ic {
  display: block;
  width: 100%;
}

.watchlist-open:hover {
  color: var(--sys-color-link);
}
.watchlist-open:active {
  color: var(--sys-color-text-primary);
}

.player-circle-90, .photo-circle-90 {
  width: 90px;
  height: 90px;
  border-radius: 45px;
  border: 6px solid var(--sys-surface-elevated);
}

.player-circle-120, .photo-circle-120 {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  border: 6px solid var(--sys-surface-elevated);
}

.player-circle-180, .photo-circle-180 {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  border: 6px solid var(--sys-surface-elevated);
}

.player-circle-medium, .photo-circle-medium {
  width: 90px;
  height: 90px;
  border-radius: 45px;
}

.player-circle-full, .photo-circle-full {
  width: 120px;
  height: 120px;
  border-radius: 60px;
}

.player-circle-xfull, .photo-circle-xfull {
  width: 250px;
  height: 250px;
  border-radius: 125px;
}

.player-circle-dfa {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

.player-circle-60,
.player-circle-90,
.player-circle-120,
.player-circle-180,
.player-circle-medium,
.player-circle-full,
.player-circle-xfull,
.player-circle-dfa {
  border-radius: var(--avatar-radius);
}

.teams-circle-tiny,
.teams-circle-mini {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.teams-circle-tiny {
  width: 32px;
  height: 32px;
  border-radius: var(--avatar-radius);
}

.teams-circle-mini {
  width: 50px;
  height: 50px;
  border-radius: var(--avatar-radius);
  margin: 0 auto;
}

.avatar-logo {
  border-radius: 50%;
}

.layout-main input[type=text]:not(.input),
.layout-main input[type=number]:not(.input),
.layout-main input[type=password]:not(.input),
.layout-main input[type=email]:not(.input),
.layout-main input[type=date]:not(.input),
.layout-main input[type=time]:not(.input),
.layout-main input[type=search]:not(.input),
.layout-main textarea:not(.input),
.layout-main select:not(.input) {
  display: block;
  width: 100%;
  margin-bottom: var(--space-2);
  padding: 6px var(--space-2);
  border: 1px solid var(--sys-color-border-strong);
  border-radius: var(--radius-small);
  background-color: var(--sys-color-input-bg);
  color: var(--sys-color-text-primary);
  font-family: inherit;
  font-size: 16px;
}
@media (min-width: 900px) {
  .layout-main input[type=text]:not(.input),
.layout-main input[type=number]:not(.input),
.layout-main input[type=password]:not(.input),
.layout-main input[type=email]:not(.input),
.layout-main input[type=date]:not(.input),
.layout-main input[type=time]:not(.input),
.layout-main input[type=search]:not(.input),
.layout-main textarea:not(.input),
.layout-main select:not(.input) {
    font-size: 15px;
  }
}
.layout-main textarea:not(.input) {
  min-height: 96px;
}
.layout-main td > :is(input, textarea, select):not(.input):last-child {
  margin-bottom: 0;
}

input[type=text].thin {
  padding: 4px 6px;
  font-size: 12px;
}

input[type=text].short {
  width: 33%;
}

input[type=submit]:not(.button),
.submit:not(.button),
.button-submit:not(.button),
.button-submit-thin,
.thumbnail-upload {
  display: inline-block;
  width: auto;
  padding: 6px var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  background-color: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
}
input[type=submit]:not(.button):hover,
.submit:not(.button):hover,
.button-submit:not(.button):hover,
.button-submit-thin:hover,
.thumbnail-upload:hover {
  background-image: linear-gradient(var(--sys-color-press), var(--sys-color-press));
  text-decoration: none;
}

input[type=submit].submit-thin,
input[type=submit].submit-slim,
.submit.slim,
.button-submit-thin {
  padding: 3px var(--space-2);
}

.submit.light {
  border-color: var(--sys-color-border-strong);
  background-color: var(--sys-color-input-bg);
  background-image: none;
  color: var(--sys-color-link);
}

input[type=submit].submit-quick {
  width: 75%;
  margin-bottom: var(--space-3);
  border: 0;
  background-color: var(--sys-color-hover);
  background-image: none;
  color: var(--sys-color-text-primary);
  text-align: left;
  white-space: normal;
}
input[type=submit].submit-quick:hover {
  background-color: var(--sys-color-selected);
  background-image: none;
  color: var(--sys-color-text-primary);
}

.light {
  color: var(--sys-color-text-primary);
  font-weight: 300;
}

.light + table,
.light + .statistics {
  margin-top: var(--space-2);
}

.loading-wait {
  display: none;
  text-align: center;
}

.sheet-stack table + table {
  margin-top: var(--space-5);
}

.sheet-links a {
  display: block;
  margin-bottom: var(--space-1);
  padding: var(--space-1);
  color: var(--sys-color-link);
  text-decoration: none;
}
.sheet-links a:hover {
  text-decoration: underline;
}

.sheet-column-card {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--sys-color-border);
  border-bottom-width: var(--elevation-overlay);
  border-radius: var(--radius);
  background: var(--sys-color-surface);
  --surface-current: var(--sys-color-surface-solid);
}
.sheet-column-card h2,
.sheet-column-card month {
  display: block;
  margin-bottom: var(--space-2);
  font: 700 12px/16px var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sys-color-text-muted);
}

.bar,
.break {
  margin-bottom: var(--space-3);
}

.break-thin {
  margin-bottom: var(--space-2);
}

.split {
  margin-bottom: var(--space-6);
}

.split-line {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--sys-color-border);
}

.b1 {
  padding-right: var(--space-4);
}

.bucket {
  display: block;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius);
}

.bucket-1 {
  border-bottom: 2px solid var(--sys-color-border);
  background: var(--sys-color-surface);
}

tr.nobar,
td.nobar {
  border: 0;
}

.buffer-small {
  height: 9px;
}

.icon-dfa-hit,
.icon-dfa-lock {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 1px var(--space-1);
  border-radius: var(--radius-small);
  background-color: var(--sys-marker-neutral-bg);
  color: var(--sys-marker-neutral-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.trade-gap {
  margin-left: var(--space-5);
}

.trade-block-buffer {
  height: var(--space-7);
}

.watchlist-chain {
  position: relative;
  margin-left: 0;
  list-style: none;
}

.player-queue {
  padding: var(--space-5);
  border-radius: var(--radius);
  background-color: var(--sys-surface-grouped);
}

.create-choices .card-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

.icon-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--sys-color-border);
  border-radius: var(--radius);
  background: var(--sys-color-surface-solid);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  color: var(--sys-color-text-primary);
  text-decoration: none;
}
.icon-buttons span {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: calc(24px * 0.8);
  line-height: 1;
  color: var(--sys-color-primary);
}
.icon-buttons:hover {
  background: var(--sys-color-hover);
  color: var(--sys-color-text-primary);
  text-decoration: none;
}