.predictions-panel {
  grid-column: 1 / -1;
}

.predictions-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 16px;
}

.predictions-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.predictions-context strong {
  font-size: 18px;
  letter-spacing: -.2px;
  color: var(--ink, #102033);
}

.predictions-status-chip {
  padding: 4px 10px;
  border-radius: 20px;
  background: #edf1f7;
  color: var(--muted, #5b6b82);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.predictions-status-chip[data-status="graded"] {
  background: #e6f7f1;
  color: var(--good, #1fa77a);
}

.predictions-status-chip[data-status="frozen"] {
  background: #edf4ff;
  color: var(--blue, #1d4f91);
}

.predictions-status-chip[data-status="partial"] {
  background: #fff3df;
  color: #9a6414;
}

.predictions-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: end;
}

.predictions-toolbar label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted, #5b6b82);
}

.predictions-toolbar select {
  min-width: 140px;
}

.predictions-week-nav {
  display: flex;
  align-items: end;
  gap: 6px;
}

.predictions-week-nav button {
  min-height: 36px;
  min-width: 36px;
  padding: 0;
  border: 1px solid #c7d8f5;
  border-radius: 3px;
  background: #fff;
  color: var(--blue, #1d4f91);
  font-size: 15px;
  line-height: 1;
}

.predictions-week-nav button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.predictions-view-toggle,
.predictions-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.predictions-view-toggle button,
.predictions-category-tabs button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #c7d8f5;
  border-radius: 3px;
  background: #fff;
  color: var(--blue, #1d4f91);
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.predictions-view-toggle button.active,
.predictions-category-tabs button.active {
  background: #edf4ff;
  border-color: #8fb0e0;
}

.predictions-note,
.predictions-empty {
  margin: 0 0 14px;
  color: var(--muted, #5b6b82);
  font-size: 13px;
}

.predictions-accuracy {
  margin: 0 0 16px;
}

.predictions-accuracy-heading {
  margin: 0 0 8px;
  color: var(--muted, #5b6b82);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.predictions-accuracy-grid {
  display: grid;
  /* Compact, content-sized columns instead of stretching to fill the
     full desktop panel width, which is what left a lot of empty space
     inside each card. */
  grid-template-columns: repeat(5, minmax(88px, 132px));
  gap: 1px;
  max-width: 660px;
  background: var(--line, #dce3ed);
  border: 1px solid var(--line, #dce3ed);
}

.predictions-accuracy-card {
  background: #fff;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
}

.predictions-accuracy-card[data-accuracy-category]:hover {
  background: #f7f9fc;
}

.predictions-accuracy-card[data-accuracy-category].is-active {
  background: #edf4ff;
  box-shadow: inset 0 -3px 0 var(--blue, #1d4f91);
}

.predictions-accuracy-card span {
  color: var(--muted, #5b6b82);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.predictions-accuracy-card strong {
  font-size: 20px;
  letter-spacing: -.3px;
  color: var(--ink, #102033);
}

.predictions-accuracy-card small {
  color: var(--muted, #5b6b82);
  font-size: 10px;
}

.predictions-accuracy-card.is-empty strong {
  color: var(--muted, #5b6b82);
}

.predictions-season-line {
  margin: 10px 0 0;
  color: var(--muted, #5b6b82);
  font-size: 11px;
}

.predictions-table th,
.predictions-table td,
.predictions-actual-table th,
.predictions-actual-table td {
  white-space: nowrap;
}

/* `predictions-top-rank` is applied directly to the Rank <td> itself
   (see predictionsCell() usage in app.js), not to an ancestor row, so
   the selector must target the element the class is actually on rather
   than a descendant. */
td.predictions-top-rank {
  color: var(--blue, #1d4f91);
  font-weight: 900;
}

.predictions-player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: normal;
}

.predictions-top10-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 20px;
  background: #f7f9fc;
  border: 1px solid var(--line, #dce3ed);
  color: var(--muted, #5b6b82);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* A real, fully-evaluated zero is still rendered (see
   predictionTop10Badge() in app.js), but with far less visual weight
   than a positive count so rows of zeros don't compete with players
   who actually have Top-10 history. */
.predictions-top10-badge.is-zero {
  padding: 1px 4px;
  background: transparent;
  border-color: transparent;
  color: #a7b1c0;
  font-weight: 600;
}

.predictions-result {
  font-weight: 800;
}

.predictions-result.is-hit {
  color: var(--good, #1fa77a);
}

.predictions-result.is-miss {
  color: #b54750;
}

.predictions-result.is-pending {
  color: var(--muted, #5b6b82);
  font-weight: 600;
}

.predictions-actual-top10 {
  margin-top: 16px;
  border: 1px solid var(--line, #dce3ed);
  border-radius: 4px;
  background: #fbfcfe;
}

.predictions-actual-top10 summary {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--blue, #1d4f91);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  list-style-position: inside;
  /* `<summary>` is natively focusable/clickable. Left alone, some
     browsers draw a heavy default focus ring here that doesn't match
     the restrained borders used everywhere else on this page, so it is
     reset and replaced with the same focus-visible treatment used by
     other collapsible sections in the app. */
  outline: none;
}

.predictions-actual-top10 summary:focus-visible {
  outline: 2px solid var(--blue, #1d4f91);
  outline-offset: 2px;
}

.predictions-actual-top10 summary small {
  color: var(--muted, #5b6b82);
  font-size: 10px;
  font-weight: 700;
  text-transform: none;
}

.predictions-actual-top10[open] summary {
  border-bottom: 1px solid var(--line, #dce3ed);
}

.predictions-actual-top10 .table-wrap {
  padding: 4px 0;
}

.rating-prompt-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 0;
  border-radius: 7px;
  color: var(--ink, #102033);
  box-shadow: 0 28px 80px rgba(8, 25, 53, .28);
}

.rating-prompt-dialog::backdrop {
  background: rgba(10, 22, 40, .42);
}

.rating-prompt-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

body[data-app-page="predictions"] #position-control {
  display: none;
}

@media (max-width: 720px) {
  .predictions-accuracy-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }

  .predictions-toolbar {
    width: 100%;
    justify-content: space-between;
  }

  .predictions-week-nav {
    flex: 1;
  }

  .predictions-view-toggle {
    flex: 1;
    justify-content: flex-end;
  }

  .predictions-table thead,
  .predictions-actual-table thead {
    display: none;
  }

  .predictions-table,
  .predictions-table tbody,
  .predictions-table tr,
  .predictions-table td,
  .predictions-actual-table,
  .predictions-actual-table tbody,
  .predictions-actual-table tr,
  .predictions-actual-table td {
    display: block;
    width: 100%;
  }

  .predictions-table tr,
  .predictions-actual-table tr {
    padding: 10px 4px;
    border-bottom: 1px solid #edf0f4;
  }

  .predictions-table td,
  .predictions-actual-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 12px;
    border-bottom: 0;
    white-space: normal;
    text-align: right;
  }

  .predictions-table td::before,
  .predictions-actual-table td::before {
    content: attr(data-label);
    color: var(--muted, #5b6b82);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
    flex: 0 0 auto;
  }

  .predictions-player-cell {
    justify-content: flex-end;
    flex-wrap: wrap;
    text-align: right;
  }
}