/* "How accurate are my forecasts?" (forecasts.html). Tokens and the score
   tiles / tables come from tbf.css; this file only lays out the pieces that
   page alone has. */

.sc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sc-head h2 { margin: 0; }
.sc-head .seg { flex-wrap: wrap; }

.sc-building { text-align: center; }
.sc-building .num { font-size: var(--fs-xl); color: var(--text); }

.sc-vs th[scope="row"], .scorecard #scorecard th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }
.tbf-table td.num, .tbf-table th.num { text-align: right; }

.sc-words { margin: 6px 0 14px; padding-left: 1.2em; }
.sc-words li { margin: 4px 0; line-height: 1.45; }

.sc-busts { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 10px; }
.sc-bust { background: var(--raise); border: 1px solid var(--line); border-left: 3px solid var(--bad-text); border-radius: 10px; padding: 10px 12px; }
.sc-bust .note { margin-top: 4px; }
.sc-note { margin-top: 6px; font-size: var(--fs-sm); color: var(--text); }

.method-list { margin: 8px 0 12px; padding-left: 1.2em; }
.method-list li { margin: 5px 0; line-height: 1.5; }

.sc-counts { margin-top: 14px; }

#method { margin-top: 18px; }
#method p { line-height: 1.6; max-width: 75ch; }
#method p + p { margin-top: 10px; }
#scorecard tbody th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--text); }

/* A value left as the NWS forecast: on the record, not graded. */
.sc-nws { color: var(--dim); }
.sc-nws sup { font-size: .62em; letter-spacing: .04em; margin-left: 2px; font-weight: 600; }