.predictions { margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: clip; }
.prediction-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 24px; padding: 24px 36px; cursor: pointer; list-style: none; }
.prediction-summary::-webkit-details-marker { display: none; }
.prediction-summary:hover { background: #f8faf8; }
.prediction-summary:focus-visible { outline-offset: -4px; }
.prediction-title { font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.prediction-update { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.prediction-update time { white-space: nowrap; }
.prediction-value { text-align: right; font-variant-numeric: tabular-nums; }
.prediction-value-label { display: block; min-height: 18px; line-height: 18px; white-space: nowrap; color: var(--muted); font-size: 12px; }
.prediction-value-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }
#predicted-rating { font-size: 36px; font-weight: 750; letter-spacing: -.04em; line-height: 1.1; }
.prediction-delta { padding: 5px 8px; border-radius: 5px; background: #d9efd9; color: #145c34; font-size: 18px; font-weight: 650; }
.prediction-delta.is-negative { background: #fbe1dc; color: #962e26; }
.prediction-chevron { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.prediction-disclosure[open] > summary .prediction-chevron { transform: rotate(180deg); }
.prediction-body { margin: 0 36px; border-top: 1px solid var(--line); }
.prediction-form { padding: 20px 0 24px; }
.predictions p { line-height: 1.55; }
.prediction-note { margin-top: 16px; color: var(--muted); font-size: 12px; }
.predictions button { min-height: 44px; padding: 9px 14px; border: 1px solid #b4c5ba; border-radius: 6px; background: var(--paper); color: var(--green); font-size: 14px; font-weight: 600; }
.predictions button:hover { background: var(--light-green); }
.predictions .prediction-add { background: var(--green); color: white; border-color: var(--green); }
.predictions .prediction-add:hover { background: #0b523d; }
.predictions .prediction-reset { border-color: transparent; }
.round-editor { position: relative; display: grid; grid-template-columns: minmax(160px, 1fr) minmax(240px, .8fr); align-items: center; gap: 20px; min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.round-editor.is-imported { background: #f4f8f5; border-color: transparent; }
.round-editor:not(.is-imported) { grid-template-columns: minmax(90px, 1fr) 156px minmax(220px, .9fr); align-items: end; gap: 16px; }
.round-editor:not(.is-imported) .round-caption { display: flex; align-items: center; min-height: 32px; line-height: 16px; }
.round-editor + .round-editor { margin-top: 8px; }
.round-caption { min-width: 0; font-size: 14px; line-height: 1.4; }
.round-caption > time { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.round-caption small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.round-fields { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(64px, .65fr) 28px; align-items: end; gap: 12px; }
.round-editor label { min-width: 0; font-size: 12px; color: var(--muted); }
.round-editor input { display: block; width: 100%; min-width: 0; height: 32px; padding: 4px 8px; margin-top: 6px; border: 1px solid #b4c5ba; border-radius: 6px; background: white; color: var(--ink); font-size: 14px; }
.round-editor input[type="number"] { appearance: textfield; }
.round-editor input::-webkit-inner-spin-button, .round-editor input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.round-date { display: block; min-width: 0; }
.round-date input::-webkit-datetime-edit { padding: 0; }
.round-date input::-webkit-calendar-picker-indicator { margin-left: 4px; padding: 0; opacity: .65; cursor: pointer; }
.round-editor input[readonly] { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; }
.round-editor input:user-invalid { border-color: #a23e2e; }
.predictions .remove-round { display: grid; place-items: center; width: 28px; min-height: 28px; height: 28px; margin-bottom: 2px; padding: 0; color: var(--muted); }
.remove-round svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.prediction-actions { display: flex; align-items: center; gap: 12px; }
.projected-rounds:has(.round-editor) + .prediction-actions { margin-top: 20px; }
.prediction-status { margin: 0 36px 20px; color: var(--muted); font-size: 13px; }
.prediction-error { margin: 0 36px 20px; padding: 14px 16px; border: 1px solid #e8c0b7; border-radius: 7px; background: #fff5f1; color: #843526; font-size: 13px; }
.prediction-error button { margin: 10px 6px 0 0; }
@media (min-width: 761px) and (max-width: 1000px) {
  .round-editor { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 760px) {
  .prediction-summary { grid-template-columns: minmax(0, 1fr) auto 20px; gap: 16px; padding: 20px; }
  .prediction-title { display: contents; font-size: 20px; }
  .prediction-title > span:first-child { grid-column: 1 / 3; grid-row: 1; }
  .prediction-chevron { grid-column: 3; grid-row: 1; }
  .prediction-update { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; margin: 0; font-size: 12px; }
  .prediction-value { grid-column: 2 / 4; grid-row: 2; }
  #predicted-rating { font-size: 32px; }
  .prediction-delta { font-size: 16px; }
  .prediction-body { margin: 0 20px; }
  .round-editor { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .round-editor:not(.is-imported) { grid-template-columns: minmax(0, 1fr) 156px; gap: 12px; }
  .round-editor input { font-size: 16px; }
  .round-fields { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr) 28px; }
  .prediction-actions { flex-wrap: wrap; }
  .prediction-add { flex-grow: 1; }
  .prediction-status, .prediction-error { margin-left: 20px; margin-right: 20px; }
}