/*
  Judges' scorecards (employers?a=scorecards, class.fight_scorecards.php) — a tool in the works,
  pilot only. Nothing here is saved, so there is no JS and no drawer.

  The page borrows what already exists: the surveys hero (svy_*), the how-it-works block and the
  boxes from meetings (cm_*), the process drawer's label (pd_label), the amber in-the-works note
  from tests (tst_ready) and the next-steps cards from emergency alerts (ea_next_*). Only the two
  drawings are its own — the scorecard in the hero and the round-by-round comparison under it.

  sc_ is this file's prefix. css/landing_v2.css already owns sc_doc_*; nothing here starts
  sc_doc_, so the two do not meet.
*/

.sc_num { background: #0f7777; }
.sc_soon[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- the card in the hero */

/* the drawing stands in for the page art, so it takes the art column's width rather than an image's */
.sc_art_wrap { padding: 36px 0; }
.sc_card { width: 100%; max-width: 380px; background: #fff; border: 1px solid #dbe4e6; border-radius: 16px; box-shadow: 0 10px 26px rgba(16, 38, 52, .10); overflow: hidden; }

.sc_card_head { padding: 14px 16px 12px; border-bottom: 1px solid #eef3f3; }
.sc_card_bout { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a9a9f; }
.sc_card_names { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 16px; font-weight: 800; color: #1f3338; }
.sc_name_red { color: #b91c1c; }
.sc_name_blue { color: #1d4ed8; }
.sc_v { font-size: 12px; font-weight: 600; color: #9fb7bb; }

.sc_grid { padding: 4px 8px 8px; }
.sc_row { display: grid; grid-template-columns: 26px 38px 38px minmax(0, 1fr); align-items: center; gap: 6px; padding: 7px 8px; border-radius: 8px; }
.sc_row_head { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9fb7bb; padding-bottom: 2px; }
.sc_row_head .sc_pick { color: #9fb7bb; background: none; border: 0; }
.sc_rn { font-size: 12px; font-weight: 800; color: #8a9a9f; text-align: center; }
.sc_pick { font-size: 14px; font-weight: 800; text-align: center; border-radius: 7px; padding: 4px 0; background: #f2f6f7; color: #56686d; }
.sc_pick_red { background: #fdeaea; color: #b91c1c; }
.sc_pick_blue { background: #e8effd; color: #1d4ed8; }
.sc_pick_open { background: #fff; border: 1.5px dashed #cfdcde; color: #b6c5c8; }
.sc_note { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; color: #9fb7bb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc_note i { flex: none; font-size: 10px; }
.sc_note_live { color: #b07d00; font-weight: 700; }
.sc_row_live { background: #fff8e8; }
.sc_r_red { box-shadow: inset 3px 0 0 #f0b5b5; }
.sc_r_blue { box-shadow: inset 3px 0 0 #b5c6f0; }

.sc_card_foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; background: #f7fbfb; border-top: 1px solid #eef3f3; }
.sc_total { display: flex; align-items: baseline; gap: 7px; }
.sc_total span { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9fb7bb; }
.sc_total b { font-size: 16px; color: #1f3338; }
.sc_keys { display: flex; gap: 4px; }
.sc_key { font-size: 10px; font-weight: 700; color: #56686d; background: #fff; border: 1px solid #dbe4e6; border-radius: 999px; padding: 2px 7px; }

/* ---------------------------------------------------------------- the comparison afterwards */

.sc_cmp { margin-top: 0; }
.sc_cmp_head { font-size: 16px; font-weight: 800; color: #1f3338; }
.sc_cmp_sub { font-size: 13px; color: #8a9a9f; line-height: 1.45; margin: 3px 0 14px; }
.sc_cmp_row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 62px 128px; align-items: center; gap: 10px; padding: 6px 0; }
.sc_cmp_rd { font-size: 13px; font-weight: 700; color: #435b64; }
.sc_cmp_bar { height: 10px; border-radius: 999px; background: #e8effd; overflow: hidden; }
.sc_cmp_red { height: 100%; background: #e26a6a; border-radius: 999px 0 0 999px; }
.sc_cmp_counts { font-size: 12px; font-weight: 800; color: #9fb7bb; text-align: center; white-space: nowrap; }
.sc_cmp_r { color: #b91c1c; }
.sc_cmp_b { color: #1d4ed8; }
.sc_cmp_tag { text-align: right; }
.sc_flag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; background: #e6f3f3; color: #0f7777; }
.sc_flag_split { background: #fff4de; color: #9a6400; }
.sc_cmp_note { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: #435b64; line-height: 1.5; background: #f7fbfb; border: 1px solid #dfe8ea; border-radius: 8px; padding: 10px 12px; margin-top: 14px; }
.sc_cmp_note i { color: #0f7777; margin-top: 2px; flex: none; }

/* ---------------------------------------------------------------- before a round can be scored */

/* two columns that pack rather than pair off - the cards are all different heights, and a grid
   leaves a hole under every short one */
.sc_next_grid { column-count: 2; column-gap: 10px; }
.sc_next_grid .ea_next_card { break-inside: avoid; margin-bottom: 10px; }

@media (max-width: 1100px)
{
  .sc_next_grid { column-count: 1; }
}

@media (max-width: 860px)
{
  .sc_art_wrap { padding: 0 0 18px; }
  .sc_card { max-width: 340px; margin: 0 auto; }
  .sc_cmp_row { grid-template-columns: 62px minmax(0, 1fr) 54px; row-gap: 2px; }
  .sc_cmp_tag { grid-column: 2 / -1; text-align: left; }
}