/* NBA Forecast — broadsheet shell and basketball-scale season browser.

   Identity colours/logos and the probability wash are deliberately separate:
   club colour identifies; the shared grey-to-blue ramp quantifies. */

/* Three scales govern this stylesheet. Every size, gap, and grey below is one
   of them — never a fresh literal. Extend a scale here rather than inventing a
   one-off value; the regression suite enforces the type scale. */
:root {
  --nb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  /* type: chrome and labels. Serif prose keeps its own sizes. */
  --nb-t-micro: 0.48rem;    /* deltas, seed labels */
  --nb-t-small: 0.56rem;    /* meta lines, scoreboard heads */
  --nb-t-label: 0.64rem;    /* legends, datelines, date headings */
  --nb-t-control: 0.7rem;   /* buttons, abbreviations, scores */
  --nb-t-figure: 0.76rem;   /* probability numerals */
  --nb-t-cell: 0.95rem;     /* probability table body; shrinks with viewport */

  /* spacing */
  --nb-s-0: 0.1rem;
  --nb-s-1: 0.2rem;
  --nb-s-2: 0.3rem;
  --nb-s-3: 0.4rem;
  --nb-s-4: 0.55rem;
  --nb-s-5: 0.7rem;

  /* text ink: four steps, delegated to ink.css so both themes track together */
  --nb-ink-1: var(--ink);
  --nb-ink-2: var(--ink-soft);
  --nb-ink-3: var(--ink-mute);
  --nb-ink-4: var(--ink-faint);

  --nb-blue: #1f5fa8;
  --nb-blue-bright: #3e82c8;
  --nb-heat-hi: #2a78d6;
  --nb-heat-lo: #8d887e;
  --nb-nil-line: rgba(109, 103, 94, 0.45);
  --nb-rise: #2f6b4f;
  --nb-fall: #a33a2b;
  --nb-rule: color-mix(in srgb, var(--ink) 17%, transparent);
  --nb-rule-strong: color-mix(in srgb, var(--ink) 56%, transparent);
  --nb-wash: color-mix(in srgb, var(--ink) 4.2%, transparent);
  --nb-wash-deep: color-mix(in srgb, var(--ink) 7.5%, transparent);
  --nb-control-height: 2.05rem;
}

/* A custom property resolves on the element that declares it, so --club has to
   be declared on the elements that actually receive the inline --club-light /
   --club-dark pair from applyInk(). Declaring it only on :root computed it
   there — where the pair is unset — and every descendant inherited plain ink,
   which silently drained the club colour out of picks, winners, and row
   hovers. */
.nb-pick,
.nb-row,
.nb-detail {
  --club: var(--club-light, var(--ink));
}

:root[data-theme="dark"] :is(.nb-pick, .nb-row, .nb-detail) {
  --club: var(--club-dark, var(--ink));
}

:root[data-theme="dark"] {
  --nb-blue: #6aa9ea;
  --nb-blue-bright: #8fc2f3;
  --nb-heat-hi: #3987e5;
  --nb-heat-lo: #6b665e;
  --nb-nil-line: rgba(148, 143, 133, 0.42);
  --nb-rise: #6fbf95;
  --nb-fall: #e0796a;
  --nb-rule: color-mix(in srgb, var(--ink) 19%, transparent);
  --nb-rule-strong: color-mix(in srgb, var(--ink) 62%, transparent);
  --nb-wash: color-mix(in srgb, var(--ink) 5.2%, transparent);
  --nb-wash-deep: color-mix(in srgb, var(--ink) 9%, transparent);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 20rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1rem;
  line-height: 1.42;
}

button,
select,
input {
  accent-color: color-mix(in srgb, var(--nb-blue) 76%, var(--ink));
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
.nb-row:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}

.nb-wrap {
  width: min(100%, 78rem);
  margin: 0 auto;
  padding: 0.85rem clamp(0.75rem, 2.2vw, 1.35rem) 2.6rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* masthead */

.nb-masthead {
  position: relative;
}

.m-rule {
  margin: 0 0 2px;
  border: 0;
  border-top: 1px solid var(--nb-rule);
}

.nb-masthead-inner {
  display: block;
  padding: 0.42rem 5.1rem 0.46rem 0;
}

.nb-masthead h1 {
  min-width: 0;
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.008em;
  line-height: 1;
}

.nb-rule-word {
  font-weight: 500;
  font-style: italic;
}

.nb-nav {
  display: flex;
  align-items: center;
  margin-top: 0.35rem;
}

.nb-home {
  color: var(--ink-mute);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

.nb-home:hover {
  color: var(--ink);
}

@media (min-width: 40rem) {
  .nb-masthead-inner {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--nb-s-5);
  }

  .nb-nav {
    gap: var(--nb-s-5);
    margin-top: 0;
  }

  .nb-nav::before {
    content: "";
    width: 1px;
    height: 0.85rem;
    background: var(--nb-rule-strong);
  }
}

.toggle-rail {
  position: absolute;
  right: 0;
  bottom: var(--nb-s-3);
  display: grid;
  grid-template-columns: repeat(2, 2rem);
  gap: var(--nb-s-3);
}

.theme-toggle,
.nb-info-toggle {
  display: grid;
  width: 2rem;
  height: 2rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--nb-rule);
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  color: inherit;
  cursor: pointer;
}

.theme-toggle svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.nb-info-toggle {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1rem;
  font-style: italic;
  font-weight: 600;
}

.nb-info-toggle-inline {
  width: 1.28rem;
  height: 1.28rem;
  flex: 0 0 auto;
  font-size: var(--nb-t-figure);
}

.warning {
  margin: 0.7rem 0;
  padding: 0.52rem 0.7rem;
  border-left: 3px solid color-mix(in srgb, #b4531b 72%, var(--ink));
  background: var(--nb-wash);
  font-size: 0.9rem;
}

/* Sits flush on the control tray as its top edge rather than floating as a
   separate band. */
.nb-press {
  height: 2px;
  margin: var(--nb-s-4) 0 0;
  overflow: hidden;
  background: var(--nb-rule);
}

.nb-press.is-running {
  background:
    linear-gradient(
      90deg,
      var(--nb-rule) 0 38%,
      var(--nb-blue) 45% 55%,
      var(--nb-rule) 62% 100%
    );
  background-size: 260% 100%;
  animation: nb-press-run 1.05s linear infinite;
}

@keyframes nb-press-run {
  from { background-position: 100% 0; }
  to { background-position: -160% 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nb-press.is-running { animation: none; }
}

/* control tray */

.nb-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nb-s-4) 1.25rem;
  min-height: 3rem;
  padding: 0.46rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--nb-rule) 62%, transparent);
  background: color-mix(in srgb, var(--nb-wash) 72%, transparent);
}

.nb-controls-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nb-s-3) 1rem;
}

.nb-controls-scenario {
  margin-left: auto;
  justify-content: flex-end;
}

.nb-fieldset,
.nb-field {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--nb-s-3);
}

.nb-legend,
.nb-col-note {
  color: var(--nb-ink-2);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
}

/* Every button inside one segment shares that segment's widest label, so the
   models line up with each other and the sample counts with each other,
   without either group borrowing the other's width. */
.nb-segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.nb-btn,
.nb-filter-trigger {
  min-height: var(--nb-control-height);
  padding: 0.16rem 0.58rem;
  border: 1px solid var(--nb-rule);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--nb-mono);
  font-size: var(--nb-t-control);
  line-height: 1.2;
  cursor: pointer;
}

.nb-segment .nb-btn + .nb-btn {
  border-left: 0;
}

.nb-btn[aria-pressed="true"] {
  background: var(--nb-wash-deep);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--nb-blue) 72%, var(--ink));
  font-weight: 600;
}

.nb-btn:disabled {
  cursor: default;
  opacity: 0.43;
}

.nb-btn-plain {
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--nb-ink-4);
  text-underline-offset: 0.2em;
}

.nb-btn.is-long {
  border-color: color-mix(in srgb, #b4531b 62%, var(--ink));
}

.nb-scenario {
  margin: 0;
  font-family: var(--nb-mono);
  font-size: var(--nb-t-control);
}

.nb-section-nav {
  display: none;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.7rem;
  border-block: 1px solid var(--nb-rule);
}

.nb-section-nav button {
  min-height: 2.3rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nb-section-nav button + button {
  border-left: 1px solid var(--nb-rule);
}

/* section heads */

.nb-almanac {
  margin-top: 1.2rem;
}

.nb-probabilities,
.nb-schedule {
  min-width: 0;
}

.nb-schedule {
  margin-top: 1.6rem;
  container: nb-schedule / inline-size;
}

.nb-col-head {
  display: flex;
  min-height: 2.15rem;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nb-s-3) 0.85rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--nb-rule-strong);
}

.nb-heading-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--nb-s-3);
}

.nb-col-head h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.8vw, 1.55rem);
  font-weight: 600;
  line-height: 1.1;
}

.nb-dateline,
.nb-key {
  margin: 0;
  color: var(--nb-ink-2);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
}

.nb-dateline {
  flex: 1 1 24rem;
}

.nb-sep {
  padding: 0 0.28rem;
  opacity: 0.55;
}

.nb-sim-state[data-state="running"] {
  color: var(--nb-blue);
}

.nb-key {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: var(--nb-s-3);
  white-space: nowrap;
}

.nb-key-ramp {
  display: block;
  width: 5.5rem;
  height: 8px;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--nb-heat-hi) 60%, var(--paper)),
      color-mix(in srgb, var(--nb-heat-lo) 22%, var(--paper))
    );
}

.nb-schedule-head .nb-col-note {
  margin-left: auto;
  text-transform: none;
}

/* probability tables */

#tableRoot {
  display: grid;
  gap: 1rem;
}

.nb-league {
  min-width: 0;
  margin-top: 0.86rem;
}

.nb-league h3 {
  display: flex;
  margin: 0 0 0.1rem;
  align-items: center;
  gap: var(--nb-s-4);
  color: var(--nb-ink-2);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-control);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.nb-league h3::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--nb-rule);
  transform: translateY(-0.12em);
}

.nb-league-mark {
  display: inline-grid;
  width: var(--league-mark-size, 1rem);
  height: var(--league-mark-size, 1rem);
  flex: 0 0 var(--league-mark-size, 1rem);
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
}

.nb-league-mark img {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:root[data-theme="dark"] .nb-league-mark {
  border-color: color-mix(in srgb, #f6f3ec 22%, transparent);
  background: color-mix(in srgb, #f6f3ec 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 24%, transparent);
}

:root[data-theme="dark"] .nb-league-mark img {
  filter: saturate(0.92) brightness(0.96)
    drop-shadow(0 0 1px color-mix(in srgb, #f6f3ec 32%, transparent));
}

.nb-table {
  width: 100%;
  margin: 0.1rem 0 0;
  border-collapse: collapse;
  font-size: var(--nb-t-cell);
  table-layout: fixed;
}

.nb-table th,
.nb-table td {
  height: auto;
  padding: 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--nb-mono);
  text-align: center;
  vertical-align: middle;
}

.nb-table thead th {
  height: auto;
  padding: 0.5rem 0.3rem 0.4rem;
  color: var(--nb-ink-2);
  font-size: var(--nb-t-label);
  font-weight: 400;
  letter-spacing: 0.13em;
  line-height: 1.7;
  text-transform: uppercase;
  white-space: nowrap;
  border-top: 2px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
}

.nb-col-club {
  text-align: left !important;
}

.nb-col-record {
  width: 4.4rem;
}

.nb-col-prob,
.nb-odds {
  width: 4.3rem;
}

.nb-sort {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.nb-sort[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.nb-label-short {
  display: none;
}

.nb-row {
  cursor: pointer;
}

.nb-row:hover > .nb-club,
.nb-row[aria-expanded="true"] > .nb-club {
  box-shadow: inset 3px 0 0 var(--club);
}

.nb-row.is-in-field > td {
  background: var(--paper-raised);
}

.nb-row.is-in-field > .nb-club {
  box-shadow: inset 2px 0 0 var(--hairline-strong);
}

.nb-row.is-in-field:hover > .nb-club,
.nb-row.is-in-field[aria-expanded="true"] > .nb-club {
  box-shadow: inset 3px 0 0 var(--club);
}

.nb-club {
  min-width: 10.5rem;
  padding: 0 !important;
  text-align: left !important;
}

.nb-club-inner {
  display: flex;
  min-width: 0;
  padding: 0.42rem 0.4rem 0.42rem 0.5rem;
  align-items: center;
  gap: var(--nb-s-4);
  white-space: nowrap;
}

.nb-team-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-s-1);
  line-height: 1;
  vertical-align: middle;
}

.nb-mark {
  display: inline-grid;
  width: var(--mark-size);
  height: var(--mark-size);
  flex: 0 0 var(--mark-size);
  place-items: center;
}

.nb-mark img {
  display: block;
  grid-area: 1 / 1;
  width: var(--mark-glyph-size);
  height: var(--mark-glyph-size);
  object-fit: contain;
}

.nb-mark-fallback {
  grid-area: 1 / 1;
}

:is(.nb-mark, .nb-league-mark) .nb-mark-vintage {
  display: none;
}

:root[data-mark-style="vintage"] :is(.nb-mark, .nb-league-mark) .nb-mark-current {
  display: none;
}

:root[data-mark-style="vintage"] :is(.nb-mark, .nb-league-mark) .nb-mark-vintage {
  display: block;
}

.nb-model-note {
  margin: var(--nb-s-3) 0;
  color: var(--nb-ink-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
}

.nb-team-abbr {
  display: inline-block;
  min-width: calc(3ch + 0.3em);
  flex: none;
  color: var(--nb-ink-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-control);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
}

.nb-team-nick {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.7;
}

.nb-div {
  margin-left: auto;
  padding-left: 0.5rem;
  color: var(--nb-ink-3);
  font-size: var(--nb-t-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.nb-proj {
  width: 4.4rem;
  padding: 0.32rem 0.3rem !important;
  color: var(--nb-ink-2);
  font-size: var(--nb-t-figure);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.nb-proj.is-projected {
  color: var(--ink);
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 38%, transparent);
  cursor: help;
}

.nb-record-current,
.nb-record-projected {
  display: block;
}

.nb-record-projected {
  margin-top: 0.12rem;
  color: var(--nb-ink-3);
  font-size: var(--nb-t-small);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.nb-odds {
  position: relative;
  min-width: 3.15rem;
  padding: 0.5rem 0.42rem !important;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  font-size: var(--nb-t-figure);
  line-height: 1.7;
  text-align: center;
}

.nb-tint {
  position: absolute;
  z-index: -1;
  inset: 1px;
  background:
    color-mix(in srgb, var(--nb-heat-hi) var(--heat-p, 0%), var(--nb-heat-lo));
  opacity: var(--heat-a, 0.18);
  transition: background-color 350ms ease, opacity 350ms ease;
}

.nb-num {
  position: relative;
  z-index: 1;
  font-weight: 400;
  white-space: nowrap;
}

.nb-odds.is-zero {
  background: transparent;
}

.nb-odds.is-zero .nb-tint {
  opacity: 1 !important;
  background-color: transparent;
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0 7px,
      var(--nb-nil-line) 7px 8px
    ),
    linear-gradient(
      color-mix(in srgb, var(--nb-heat-lo) 20%, transparent),
      color-mix(in srgb, var(--nb-heat-lo) 20%, transparent)
    );
}

.nb-odds.is-zero .nb-num {
  color: var(--nb-ink-3);
}

.nb-odds.is-lock .nb-num {
  font-weight: 400;
}

.nb-delta {
  position: absolute;
  z-index: 2;
  top: 0.12rem;
  left: 0.14rem;
  padding: 0 0.08rem;
  border-radius: 1px;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  color: var(--nb-ink-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-micro);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  opacity: 0.94;
  pointer-events: none;
}

.nb-delta.is-rise { color: var(--nb-rise); }
.nb-delta.is-fall { color: var(--nb-fall); }

.nb-cut > th,
.nb-cut > td {
  border-bottom: 2px solid var(--hairline-strong);
}

.nb-detail > td {
  height: auto;
  padding: 0;
  border-bottom-color: var(--nb-ink-4);
  background: color-mix(in srgb, var(--nb-wash) 56%, transparent);
}

.nb-detail.nb-cut > td {
  border-bottom-color: var(--hairline-strong);
}

.nb-row[aria-expanded="true"] + .nb-detail > td {
  box-shadow: inset 3px 0 0 var(--club);
}

.nb-seed-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--nb-s-2);
  padding: 0.26rem 0.32rem 0.34rem;
  background: color-mix(in srgb, var(--nb-wash) 56%, transparent);
}

.nb-seed-cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 2.9rem;
  padding-inline: var(--nb-s-2);
  border-left: 1px solid var(--nb-rule);
  grid-template-rows: 1em 1.2em 3px;
  align-content: center;
  gap: var(--nb-s-0);
  text-align: center;
}

.nb-seed-cell.is-row-start {
  border-left: 0;
}

.nb-seed-cell::after {
  content: "";
  grid-row: 3;
  width: 100%;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--nb-blue) 80%, var(--paper)) 0 var(--detail-p, 0%),
      color-mix(in srgb, var(--ink) 10%, transparent) var(--detail-p, 0%) 100%
    );
  opacity: var(--detail-a, 0.2);
}

.nb-seed-label {
  overflow: hidden;
  color: var(--nb-ink-3);
  font-size: var(--nb-t-micro);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.nb-seed-label-compact {
  display: none;
}

.nb-seed-value {
  font-size: var(--nb-t-label);
  font-weight: 400;
}

.nb-context {
  display: none;
}

/* schedule scaffold and final picker share this surface */

.nb-schedule-tools,
.nb-filter {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nb-s-4) 0.8rem;
  min-height: 2.9rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--nb-rule);
}

.nb-field select {
  max-width: min(14rem, 55vw);
  min-height: var(--nb-control-height);
  border: 1px solid var(--nb-rule);
  border-radius: 0;
  background: var(--paper);
  color: inherit;
  font-family: var(--nb-mono);
  font-size: var(--nb-t-control);
}

.nb-check {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-s-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
}

.nb-check input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
}

.nb-picker-inner {
  min-width: 0;
  max-height: min(68vh, 42rem);
  padding-right: 0.28rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-margin-top: 1rem;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

/* The heading stays put while its own day scrolls past, so the reader never
   has to scroll back to find out which date they are looking at. */
.nb-date {
  position: sticky;
  z-index: 1;
  /* Overlap the toolbar rule by one physical CSS pixel. Fractional layout
     positions otherwise expose a hairline of paper between the rule and the
     pinned heading even though their border boxes mathematically touch. */
  top: -1px;
  margin: var(--nb-s-5) 0 var(--nb-s-1);
  padding-top: var(--nb-s-2);
  padding-bottom: var(--nb-s-0);
  border-bottom: 1px solid var(--nb-rule-strong);
  background: var(--paper);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
  font-weight: 600;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.nb-date:first-child {
  margin-top: 0;
}

/* Two columns at most, and only once the panel is genuinely wide enough. The
   old auto-fill packed four cards across a desktop, which is what made a day
   of basketball read as a wall rather than a list. */
.nb-games {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nb-s-1) var(--nb-s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@container nb-schedule (min-width: 42rem) {
  .nb-games {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A game is a line of information, not a card. The two pick buttons are the
   only boxes in the row; the container carries no border or fill of its own,
   which leaves the live-score rule below as the single edge that means
   something. */
.nb-game {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: center;
  gap: var(--nb-s-2);
  padding: var(--nb-s-0) 0;
  overflow: hidden;
}

/* One treatment for "this game is over": recede the text. No container
   opacity — that washed out the winner along with everything else. */
.nb-game.is-final .nb-game-meta {
  color: var(--nb-ink-4);
}

.nb-game.is-current-final .nb-game-meta {
  color: var(--nb-ink-2);
}

.nb-game-meta {
  display: flex;
  min-height: 0;
  margin: 0;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--nb-s-2);
  color: var(--nb-ink-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-small);
  line-height: 1.25;
}

/* Doubleheader / makeup markers. The full prose lives in the title attribute
   and in a visually-hidden span, so nothing is lost by abbreviating here. */
.nb-game-tag {
  flex: none;
  padding: 0 var(--nb-s-0);
  border: 1px solid var(--nb-rule);
  color: var(--nb-ink-4);
  font-size: var(--nb-t-micro);
  letter-spacing: 0.06em;
}

.nb-game-picks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--nb-s-1);
}

.nb-at {
  align-self: center;
  color: var(--nb-ink-4);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
}

.nb-pick {
  display: grid;
  position: relative;
  min-width: 0;
  min-height: 2.05rem;
  padding: var(--nb-s-1) var(--nb-s-2);
  overflow: hidden;
  border: 1px solid var(--nb-rule);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.nb-pick-main {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-s-2);
}

.nb-pick .nb-team-chip {
  min-width: 0;
}

.nb-pick-club,
.nb-pick-score {
  font-family: var(--nb-mono);
  font-size: var(--nb-t-control);
  font-weight: 600;
}

.nb-pick-club { color: var(--club); }

/* One channel per quantity: the numeral is the pregame probability. The
   gradient rail that used to duplicate it under every button is gone. */
.nb-pick-prob-label {
  margin-left: auto;
  color: var(--nb-ink-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-control);
  font-variant-numeric: tabular-nums;
}

.nb-pick[aria-pressed="true"] {
  border-color: var(--club);
  background: color-mix(in srgb, var(--club) 14%, transparent);
  box-shadow: inset 0 -2px 0 var(--club);
}

.nb-pick:disabled {
  cursor: default;
}

.nb-pick.is-winner {
  border-bottom: 2px solid color-mix(in srgb, var(--club) 72%, var(--ink));
  background: color-mix(in srgb, var(--club) 7%, transparent);
  font-weight: 700;
}

.nb-pick.is-winner .nb-pick-score {
  color: var(--ink);
}

.nb-game.has-live-score {
  border-left: 3px solid var(--ink);
  padding-left: var(--nb-s-2);
}

.nb-game.has-live-score .nb-game-meta {
  color: var(--ink);
  font-weight: 700;
}

.nb-pick.is-leading .nb-pick-score {
  color: var(--ink);
  font-weight: 700;
}

.nb-game.has-live-score .nb-pick.is-leading {
  border-bottom-color: color-mix(in srgb, var(--club) 72%, var(--ink));
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--club) 72%, var(--ink));
  background: color-mix(in srgb, var(--club) 6%, transparent);
}

.nb-game.is-final .nb-pick:not(.is-winner) {
  color: var(--nb-ink-4);
}

/* The count stays quiet between the two automatic scroll boundaries. */
.nb-schedule-foot {
  display: flex;
  margin-top: var(--nb-s-4);
  padding-top: var(--nb-s-2);
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-s-3);
  border-top: 1px solid var(--nb-rule);
}

.nb-schedule-status {
  margin: 0;
  color: var(--nb-ink-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
}

.nb-history-sentinel {
  display: block;
  width: 100%;
  min-height: 1.7rem;
  margin: 0 0 var(--nb-s-1);
  padding: var(--nb-s-1) var(--nb-s-3);
  border: 0;
  border-bottom: 1px solid var(--nb-rule);
  background: transparent;
  color: var(--nb-ink-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-small);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.nb-future-sentinel {
  margin: var(--nb-s-1) 0 0;
}

.nb-history-sentinel:hover {
  color: var(--nb-ink-1);
}

/* full-width, display-only live scoreboard */

.nb-scoreboard {
  container: nb-scoreboard / inline-size;
  margin: 0.6rem 0 0;
  padding: 0.48rem 0.58rem 0.55rem;
  border: 1px solid var(--nb-rule);
  background: color-mix(in srgb, var(--nb-wash) 42%, transparent);
}

.nb-scoreboard[hidden] {
  display: none;
}

.nb-scoreboard-head {
  display: flex;
  margin-bottom: 0.36rem;
  padding-bottom: 0.3rem;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nb-s-4);
  border-bottom: 1px solid var(--nb-rule);
}

.nb-scoreboard-head h2,
.nb-scoreboard-head p {
  margin: 0;
  font-family: var(--nb-mono);
  text-transform: uppercase;
}

.nb-scoreboard-head h2 {
  font-size: var(--nb-t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.nb-scoreboard-head p {
  color: var(--nb-ink-3);
  font-size: var(--nb-t-small);
  letter-spacing: 0.065em;
  text-align: right;
}

.nb-scoreboard.is-delayed .nb-scoreboard-head p {
  color: var(--ink);
}

.nb-scoreboard-games {
  display: grid;
  grid-template-columns: minmax(0, 24rem);
  gap: var(--nb-s-2);
  justify-content: start;
}

.nb-scoreboard-games:where(:has(> .nb-scoreboard-game:nth-child(2))) {
  grid-template-columns: minmax(0, 1fr);
}

@container nb-scoreboard (min-width: 36rem) {
  .nb-scoreboard-games {
    grid-template-columns: repeat(2, minmax(0, 24rem));
  }

  .nb-scoreboard-games:where(:has(> .nb-scoreboard-game:nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container nb-scoreboard (min-width: 54rem) {
  .nb-scoreboard-games {
    grid-template-columns: repeat(3, minmax(0, 24rem));
  }

  .nb-scoreboard-games:where(:has(> .nb-scoreboard-game:nth-child(4))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container nb-scoreboard (min-width: 72rem) {
  .nb-scoreboard-games {
    grid-template-columns: repeat(4, minmax(0, 24rem));
  }

  .nb-scoreboard-games:where(:has(> .nb-scoreboard-game:nth-child(5))) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container nb-scoreboard (min-width: 90rem) {
  .nb-scoreboard-games {
    grid-template-columns: repeat(5, minmax(0, 24rem));
  }

  .nb-scoreboard-games:where(:has(> .nb-scoreboard-game:nth-child(6))) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.nb-scoreboard-game {
  position: relative;
  min-width: 0;
  padding: 0.3rem 0.38rem;
  border: 1px solid var(--nb-rule);
  background: var(--paper);
  overflow: hidden;
}

.nb-scoreboard-game.is-live,
.nb-scoreboard-game.is-delayed,
.nb-scoreboard-game.is-suspended {
  border-left: 3px solid var(--ink);
  padding-left: calc(0.38rem - 2px);
}

@media (prefers-reduced-motion: reduce) {
  .nb-scoreboard-game.is-live .nb-scoreboard-game-head b::before {
    animation: none;
  }
}

.nb-scoreboard-game-head {
  display: flex;
  margin: 0 0 0.2rem;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nb-s-2);
  color: var(--nb-ink-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-small);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.nb-scoreboard-game-head b {
  text-align: right;
}

.nb-scoreboard-game.is-live .nb-scoreboard-game-head b::before {
  content: "";
  display: inline-block;
  width: 0.34rem;
  height: 0.34rem;
  margin-right: 0.28rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.02rem;
  animation: nb-live-pulse 1.8s ease-in-out infinite;
}

@keyframes nb-live-pulse {
  50% { opacity: 0.3; }
}

.nb-scoreboard-team {
  display: flex;
  min-width: 0;
  margin: 0.08rem 0 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nb-s-3);
  color: var(--nb-ink-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
  font-weight: 600;
}

.nb-scoreboard-team.is-winner {
  color: var(--ink);
}

.nb-scoreboard-club {
  display: inline-grid;
  grid-template-columns: 1.15em max-content max-content;
  min-width: 0;
  align-items: center;
  gap: var(--nb-s-1);
  line-height: 1;
}

.nb-scoreboard-club > .nb-mark {
  grid-area: 1 / 2;
}

.nb-scoreboard-club > span:last-child {
  grid-area: 1 / 3;
}

.nb-scoreboard-site {
  grid-area: 1 / 1;
  min-width: 1.05em;
  color: var(--nb-ink-4);
  font-size: var(--nb-t-small);
  text-align: right;
}

.nb-scoreboard-score {
  min-width: 1.4em;
  flex: none;
  font-size: var(--nb-t-figure);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}

/* nested filter (wired in WP-6) */

/* One line at every width, 320px included. Three tracks — club selector,
   completed toggle, today action — and the selector is the only flexible one,
   so it absorbs every squeeze and ellipses its own label instead of pushing an
   action onto a second row. The "Show" legend stays in the markup for the
   trigger's accessible name but is not painted: at 320px it is the difference
   between one row and two, and the selector already reads "All clubs". */
.nb-filter {
  --nb-filter-control-height: var(--nb-control-height);
  display: grid;
  grid-template-columns: minmax(0, 28rem) auto auto;
  justify-content: start;
  align-items: center;
  column-gap: var(--nb-s-3);
}

.nb-filter-menu {
  position: static;
  display: flex;
  min-width: 0;
}

.nb-filter-trigger {
  display: grid;
  width: 100%;
  height: var(--nb-filter-control-height);
  min-height: var(--nb-filter-control-height);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--nb-s-3);
  text-align: left;
}

.nb-filter-trigger > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nb-filter-trigger-mark {
  width: 0.42rem;
  height: 0.42rem;
  transform: rotate(45deg) translateY(-0.1rem);
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.nb-filter-menu.is-open .nb-filter-trigger-mark {
  transform: rotate(225deg) translate(-0.08rem, -0.02rem);
}

.nb-filter-panel {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: 0;
  left: 0;
  max-height: min(31rem, 70vh);
  padding: 0.42rem;
  overflow: auto;
  border: 1px solid var(--nb-rule-strong);
  background: var(--paper);
  box-shadow: 0 0.45rem 1.4rem color-mix(in srgb, #000 18%, transparent);
}

.nb-filter-check {
  display: grid;
  min-height: 2rem;
  grid-template-columns: 1rem minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: var(--nb-s-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
}

.nb-filter-check input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
}

.nb-filter-all {
  border-bottom: 1px solid var(--nb-rule);
  font-weight: 600;
}

.nb-filter-divisions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.nb-filter-division {
  min-width: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.nb-filter-division-head {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  align-items: center;
}

.nb-filter-expand {
  display: grid;
  width: 1.7rem;
  height: 2rem;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
}

.nb-filter-expand span {
  width: 0.4rem;
  height: 0.4rem;
  transform: rotate(-45deg);
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.nb-filter-expand[aria-expanded="true"] span {
  transform: rotate(45deg) translate(-0.08rem, -0.08rem);
}

.nb-filter-division-clubs {
  overflow: hidden;
  color: var(--nb-ink-4);
  font-size: var(--nb-t-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nb-filter-clubs {
  padding: 0 0 0.2rem 2.08rem;
}

.nb-filter-club-check {
  grid-template-columns: 1rem minmax(0, 1fr);
  min-height: 1.72rem;
}

.nb-filter-actions {
  position: sticky;
  bottom: calc(-1 * var(--nb-s-2));
  margin: var(--nb-s-2) calc(-1 * var(--nb-s-2))
    calc(-1 * var(--nb-s-2));
  padding: var(--nb-s-2);
  border-top: 1px solid var(--nb-rule);
  background: var(--paper);
}

.nb-filter-done {
  width: 100%;
  min-height: var(--nb-filter-control-height);
  border-color: var(--nb-rule-strong);
  text-decoration: none;
}

.nb-filter .nb-check {
  min-height: var(--nb-filter-control-height);
  padding: 0;
  border: 1px solid transparent;
  white-space: nowrap;
}

.nb-jump {
  align-self: stretch;
  min-height: var(--nb-filter-control-height);
  padding-inline: var(--nb-s-4);
  border-color: var(--nb-rule-strong);
  text-decoration: none;
  white-space: nowrap;
}

/* The toolbar no longer restructures at any width — see .nb-filter above. The
   named container is still what decides the game grid's column count. */

/* colophon */

.nb-colophon {
  margin-top: 1.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--nb-rule);
}

.nb-colophon-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--nb-s-3);
  color: var(--nb-ink-3);
  font-size: 0.82rem;
  text-align: center;
}

.nb-colophon-line p {
  margin: 0;
}

.nb-colophon-info {
  width: 1.35rem;
  height: 1.35rem;
}

.nb-colophon-actions {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--nb-s-2);
}

.nb-mark-secret {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  color: var(--nb-ink-4);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: var(--nb-t-control);
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.nb-mark-secret span {
  display: block;
  transform: translateY(0.105em);
}

.nb-mark-secret:hover,
.nb-mark-secret:focus-visible,
.nb-mark-secret[data-mark-state="vintage"] {
  color: var(--nb-ink-3);
  border-color: var(--hairline-strong);
  opacity: 1;
}

.nb-mark-secret:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* contextual information dialog */

body.nb-modal-open {
  overflow: hidden;
}

.nb-info-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  padding: clamp(0.65rem, 3vw, 1.6rem);
  place-items: center;
  background: color-mix(in srgb, #07090d 73%, transparent);
}

.nb-info-dialog {
  position: relative;
  width: min(100%, 46rem);
  max-height: min(88vh, 48rem);
  padding: clamp(1rem, 3vw, 1.7rem);
  overflow: auto;
  border: 1px solid var(--nb-rule-strong);
  background: var(--paper);
  box-shadow: 0 1.2rem 3.6rem rgba(0, 0, 0, 0.32);
}

/* The NFL app's close button, verbatim: same circle, same drawn cross, same
   hover and focus treatment. Only the corner offsets differ, because the two
   dialogs have different padding. Keep the two in step — see nfl.css. */
.nb-info-close {
  position: absolute;
  top: 0.55rem;
  right: 0.58rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  cursor: pointer;
}

.nb-info-close:hover {
  color: var(--ink);
  border-color: var(--hairline-strong);
  background: var(--paper-raised);
}

.nb-info-close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* The close cross is drawn, not set: a glyph's ink never centres in its em
   box, so the mark is an SVG whose geometry is symmetric about the circle's
   centre. Identical to the NFL app's — see nfl.css. */
.nb-info-close svg {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.nb-info-dialog header {
  padding-right: 2.4rem;
  border-bottom: 1px solid var(--nb-rule-strong);
}

.nb-info-eyebrow,
.nb-info-kicker,
.nb-info-strap {
  margin: 0;
  color: var(--nb-ink-3);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-label);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.nb-info-dialog h2 {
  margin: 0.08rem 0 0.42rem;
  font-size: clamp(1.7rem, 5vw, 2.35rem);
  font-weight: 600;
  line-height: 1;
}

.nb-info-body {
  font-size: 0.96rem;
  line-height: 1.46;
}

.nb-info-body p {
  margin: 0.55rem 0;
}

.nb-info-body h3 {
  margin: 0.9rem 0 0.12rem;
  font-size: 1.08rem;
}

.nb-info-lede {
  font-size: 1.05rem;
}

.nb-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nb-s-4) 1.25rem;
}

.nb-info-tagline {
  margin-bottom: 0.12rem !important;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 500;
}

.nb-info-strap {
  padding-bottom: 0.42rem;
  border-bottom: 1px solid var(--nb-rule);
  text-transform: none;
}

/* responsive table shedding */

@media (min-width: 64rem) {
  .nb-league {
    margin-top: 0.75rem;
  }
}

@media (max-width: 74rem) {
  /* Once any outcome column is shed, fixed table layout still reserves its
     invisible track. Auto layout removes it; equal min/max bounds keep every
     remaining probability category the same width. */
  .nb-table {
    table-layout: auto;
  }

  .nb-col-prob,
  .nb-odds {
    width: 4.3rem;
    min-width: 4.3rem;
    max-width: 4.3rem;
  }

  .nb-label-full {
    display: none;
  }

  .nb-label-short {
    display: inline;
  }

  .nb-table .is-conf-finals {
    display: none;
  }

  .nb-context.is-conf-finals {
    display: grid;
  }

  .nb-seed-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 2.55rem;
    row-gap: var(--nb-s-1);
    padding: var(--nb-s-1) var(--nb-s-2);
  }

  .nb-seed-cell {
    height: 100%;
    min-height: 0;
  }

}

@media (max-width: 62rem) {
  .nb-controls {
    display: grid;
    padding: 0;
  }

  .nb-controls-group {
    width: 100%;
    min-width: 0;
    padding: 0.46rem 0.62rem;
  }

  .nb-controls-scenario {
    margin: 0;
    border-top: 1px solid var(--nb-rule);
    justify-content: flex-start;
  }

  .nb-section-nav {
    display: grid;
  }
}

@media (max-width: 52rem) {
  .nb-table .is-seed1 {
    display: none;
  }
}

@media (max-width: 44rem) {
  .nb-table .is-finals {
    display: none;
  }

  .nb-team-nick {
    display: none;
  }

  .nb-club {
    min-width: 6.6rem;
  }
}

@media (max-width: 40rem) {
  .nb-probability-head .nb-dateline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-rows: repeat(2, 1.5em);
    line-height: 1.5;
    text-align: left;
  }
  .nb-dateline .nb-dateline-season {
    display: block;
    grid-area: 1 / 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nb-dateline .nb-dateline-simulation {
    display: block;
    grid-area: 2 / 1 / 3 / -1;
    white-space: nowrap;
  }
  .nb-dateline .nb-dateline-pair {
    display: block;
    min-width: 20ch;
    grid-area: 1 / 2;
    white-space: nowrap;
    text-align: right;
  }
  .nb-dateline > .nb-sep,
  .nb-dateline-pair > .nb-sep { display: none; }
  #simCount { display: inline-block; min-width: 11ch; }
  #simError { display: inline-block; min-width: 5ch; }

  :root {
    --nb-control-height: 2.4rem;
    --nb-t-cell: 0.65rem;
  }

  .nb-controls-scenario {
    flex-wrap: nowrap;
    column-gap: var(--nb-s-2);
  }

  .nb-controls-scenario .nb-scenario {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nb-controls-scenario .nb-btn {
    padding-inline: 0.28rem;
    font-size: var(--nb-t-label);
    white-space: nowrap;
  }

  .nb-wrap {
    padding-inline: 0.7rem;
  }

  .nb-masthead-inner {
    min-height: 4.75rem;
    grid-template-columns: minmax(0, 1fr);
    padding-right: 4.95rem;
    align-content: center;
  }

  .nb-masthead h1 {
    font-size: clamp(1.72rem, 9vw, 2.2rem);
  }

  .nb-nav {
    margin-top: 0.33rem;
  }

  .nb-controls-group {
    align-items: center;
  }

  .nb-fieldset {
    flex: 1 1 auto;
  }

  .nb-controls-scenario .nb-scenario {
    flex: 1 1 auto;
  }

  .nb-col-head {
    align-items: center;
  }

  .nb-dateline {
    order: 3;
    flex-basis: 100%;
    line-height: 1.5;
  }

  .nb-key {
    margin-left: auto;
  }

  .nb-table thead th {
    padding-inline: 0.18rem;
  }

  .nb-club-inner {
    padding-inline: 0.28rem;
  }

  .nb-proj,
  .nb-odds {
    padding-inline: 0.18rem !important;
  }

  .nb-div {
    display: none;
  }

  .nb-col-prob,
  .nb-odds {
    width: 3.2rem;
    min-width: 3.2rem;
    max-width: 3.2rem;
  }

  .nb-seed-strip {
    grid-auto-rows: 2.4rem;
  }

  .nb-seed-label-full {
    display: none;
  }

  .nb-seed-label-compact {
    display: block;
  }

  .nb-filter-divisions {
    grid-template-columns: 1fr;
  }

  .nb-filter-panel {
    top: 100%;
  }

  .nb-info-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 35rem) {
  .nb-table .is-division {
    display: none;
  }

  .nb-context.is-division {
    display: grid;
  }

  .nb-col-record,
  .nb-proj {
    width: 3.5rem;
  }
}

@media (max-width: 24rem) {
  :root {
    --nb-t-cell: 0.61rem;
  }

  .nb-table thead th {
    padding-inline: 0.12rem;
  }

  .nb-club-inner {
    padding-inline: 0.2rem;
  }

  .nb-proj,
  .nb-odds {
    padding-inline: 0.12rem !important;
  }

  .nb-club {
    min-width: 5.4rem;
  }

  .nb-team-chip {
    gap: var(--nb-s-1);
  }

  .nb-team-abbr {
    min-width: 3ch;
  }

  .nb-col-prob,
  .nb-odds {
    width: 2.35rem;
    min-width: 2.35rem;
    max-width: 2.35rem;
  }

  .nb-seed-strip {
    padding-inline: 0.18rem;
  }
}

/* landscape workspace: two league tables beside an internally scrolling
   schedule. The schedule's exact height is synchronized to the probability
   surface by app.js; this fallback is stable until that measurement arrives. */
@media (min-width: 88rem) and (min-height: 48rem) {
  :root {
    --nb-control-height: 1.72rem;
  }

  .nb-wrap {
    width: min(100%, 112rem);
    padding-top: 0.62rem;
  }

  .nb-masthead h1 {
    font-size: 2.35rem;
  }

  .nb-controls {
    min-height: 2.5rem;
    padding-block: 0.32rem;
  }

  .nb-almanac {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(20rem, 0.92fr);
    gap: 1rem;
    align-items: start;
    margin-top: 0.82rem;
  }

  .nb-schedule {
    margin-top: 0;
  }

  /* The dashboard viewport is wide but its schedule column is not, so the
     toolbar's own inline-size container decides whether it wraps — no
     dashboard-specific override is needed now that the labels are short. */

  /* Long model descriptions must not lower the schedule's header rule. */
  .nb-schedule-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
  }

  .nb-schedule-head .nb-col-note {
    min-width: 0;
    margin-left: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nb-probability-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
  }

  .nb-dateline {
    min-width: 0;
    text-align: center;
  }

  #tableRoot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nb-s-5);
  }

  /* Two outcome columns are hidden in this condensed workspace. Fixed table
     layout would still reserve their tracks, crushing club/record text and
     making a detail colspan spill into that invisible space. Auto layout
     removes those tracks; identical min/max bounds keep the four visible
     probability categories uniform. */
  .nb-table {
    table-layout: auto;
  }

  .nb-league {
    margin-top: 0.55rem;
  }

  .nb-table th,
  .nb-table td {
    height: auto;
  }

  .nb-table thead th {
    padding: 0.3rem 0.2rem 0.27rem;
  }

  .nb-club-inner {
    gap: var(--nb-s-3);
    padding: 0.2rem 0.28rem 0.2rem 0.35rem;
  }

  .nb-team-abbr {
    min-width: calc(3ch + 0.24em);
    font-size: var(--nb-t-label);
    letter-spacing: 0.08em;
  }

  .nb-team-nick {
    font-size: 0.88rem;
    line-height: 1.05;
  }

  .nb-div {
    padding-left: 0.25rem;
    font-size: var(--nb-t-micro);
    letter-spacing: 0.08em;
  }

  .nb-proj,
  .nb-odds {
    padding: 0.25rem 0.2rem !important;
    font-size: var(--nb-t-label);
    line-height: 1;
  }

  .nb-record-projected {
    margin-top: 0.08rem;
    font-size: var(--nb-t-micro);
  }

  .nb-col-record,
  .nb-proj {
    width: 3.45rem;
  }

  .nb-col-prob,
  .nb-odds {
    width: 3.2rem;
    min-width: 3.2rem;
    max-width: 3.2rem;
  }

  .nb-label-full {
    display: none;
  }

  .nb-label-short {
    display: inline;
  }

  .nb-table .is-seed1,
  .nb-table .is-conf-finals {
    display: none;
  }

  /* Finals stays in the main table; conference finals moves into details. */
  .nb-detail-finals {
    display: none;
  }

  .nb-context.is-conf-finals {
    display: grid;
  }

  .nb-picker-inner {
    max-height: calc(
      var(--dashboard-height, 34.5rem)
      - var(--schedule-chrome-height, 4.75rem)
    );
    padding-right: 0.28rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .nb-games {
    grid-template-columns: 1fr;
  }

  .nb-date:first-child {
    margin-top: 0.5rem;
  }

  .nb-colophon {
    margin-top: 0.75rem;
  }
}

/* NBA detail contents follow visible columns, so row starts are keyed in JS. */
.nb-seed-cell[hidden] { display: none; }
.nb-seed-cell.is-unavailable::after { visibility: hidden; }
.nb-odds.is-unavailable .nb-tint { visibility: hidden; }
.nb-mark-fallback { font-size: var(--nb-t-micro); line-height: 1; }
@media (min-width: 88rem) and (min-height: 48rem) {
  .nb-seed-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.nb-picker-inner { overflow-anchor: none; }

/* Stable mobile forecast metadata; grouping leaves desktop layout intact. */
.nb-dateline-season,
.nb-dateline-simulation { display: contents; }
.nb-dateline,
.nb-dateline b { font-weight: 400; }