/* Board (#/): the election-night home (js/views/board.js and js/views/board/*). Every class carries the .bd- prefix.
   Shared pieces (.card, .btn, .seg-toggle, .chip, .badge, .tag, .meter, .data, .toolbar, .field) and variables come from app.css.
   Colours that depend on a margin or probability come from js/core/colors.js (via the components); the party tones here are the
   CSS variables app.css generates from the same file. */

.bd-status,
.bd-needles,
.bd-main,
.bd-strip {
  margin-bottom: 16px;
}

/* ---- status line ----------------------------------------------------------------------------------------------------------- */
.bd-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--grey);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13.5px;
}
.bd-status[data-phase='counting'] {
  border-left-color: var(--accent);
}
.bd-phase {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.bd-status[data-phase='counting'] .bd-phase {
  color: var(--accent);
}
.bd-status-text {
  color: var(--muted);
  min-width: 0;
}

/* ---- shared card header / footer ------------------------------------------------------------------------------------------- */
.bd-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 10px;
}
.bd-card-note {
  font-size: 13px;
}
.bd-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}

/* ---- needle cards + latest alerts -------------------------------------------------------------------------------------------- */
.bd-needles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 16px;
  align-items: stretch;
}
.bd-nc {
  display: flex;
  flex-direction: column;
}
.bd-nc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.bd-nc-head h2 {
  margin-right: auto;
}
.bd-nc-sub {
  flex-basis: 100%;
  order: 3;
  font-size: 12.5px;
}
.bd-nc[data-early='1'] .bd-nc-sub {
  color: var(--accent);
}
.bd-nc-link {
  font-size: 13px;
}
.bd-nc-gauge {
  margin: 2px 0 4px;
}
.bd-nc-empty {
  padding: 36px 8px;
  text-align: center;
}
.bd-nc-tally {
  margin-top: auto;
}
.bd-tally-bar {
  position: relative;
  display: flex;
  height: 16px;
  margin-top: 20px;
  border-radius: 5px;
  background: var(--surface-3);
}
.bd-tally-bar i {
  display: block;
  min-width: 2px;
  /* WCAG 1.4.11: the holdover / fixed / projected / undecided shades are close in tone, so every segment is drawn with an edge that clears 3:1 on the card */
  box-shadow: inset 0 0 0 1px var(--muted);
}
.bd-tally-bar i:first-of-type {
  border-radius: 5px 0 0 5px;
}
.bd-tally-bar i:last-of-type {
  border-radius: 0 5px 5px 0;
}
.bd-tally-bar .d-hold {
  background: var(--seg-d-fixed);
}
.bd-tally-bar .d-fixed {
  background: var(--seg-d-likely);
}
.bd-tally-bar .d-called {
  background: var(--seg-d-called);
}
.bd-tally-bar .un {
  background: var(--seg-uncalled);
}
.bd-tally-bar .r-called {
  background: var(--seg-r-called);
}
.bd-tally-bar .r-fixed {
  background: var(--seg-r-likely);
}
.bd-tally-bar .r-hold {
  background: var(--seg-r-fixed);
}
.bd-tally-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--text);
}
.bd-tally-mark span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 1px;
  font-size: 11px;
  font-weight: 700;
}
.bd-tally-nums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
}
.bd-tn dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bd-tn dd {
  margin: 0;
  font-size: 22px;
  font-weight: 750;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bd-tn-D dd {
  color: var(--d);
}
.bd-tn-R {
  text-align: right;
}
.bd-tn-R dd {
  color: var(--r);
}
.bd-tn-U {
  text-align: center;
}
.bd-nc-decide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.bd-dec-label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bd-dec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bd-dec {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bd-dec:hover {
  background: var(--surface-3);
  text-decoration: none;
}
.bd-dec span {
  color: var(--muted);
}
.bd-dec-D {
  border-left-color: var(--d-fill);
}
.bd-dec-R {
  border-left-color: var(--r-fill);
}

.bd-latest {
  display: flex;
  flex-direction: column;
}
.bd-al-list {
  flex: 1 1 0;
  min-height: 280px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  overscroll-behavior: contain;
}
.bd-al {
  border-top: 1px solid var(--line-soft);
}
.bd-al:first-child {
  border-top: 0;
}
.bd-al-link {
  display: block;
  padding: 8px 6px 8px 8px;
  border-left: 3px solid transparent;
  color: var(--text);
  font-size: 13.5px;
}
a.bd-al-link:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.bd-al-D .bd-al-link {
  border-left-color: var(--d-fill);
}
.bd-al-R .bd-al-link {
  border-left-color: var(--r-fill);
}
.bd-al-critical .bd-al-text b {
  color: var(--accent);
}
.bd-al-top {
  display: flex;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
}
.bd-al-top time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bd-latest .empty {
  padding: 22px 4px;
}
.bd-latest .bd-card-foot {
  margin-top: auto;
}

/* ---- map card + races to watch -------------------------------------------------------------------------------------------- */
.bd-main {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.bd-map-seg {
  margin-right: auto;
}
.bd-mapcard .bd-card-head h2 {
  margin-right: 4px;
}
.bd-map-open {
  font-size: 13px;
}
.bd-map-box {
  min-height: 240px;
}
.bd-map-note {
  margin-top: 8px;
  font-size: 12.5px;
}
.bd-mapcard .mx-embed-host {
  max-height: none;
}

.bd-watch {
  display: flex;
  flex-direction: column;
}
.bd-pc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 468px;
  overflow: auto;
  overscroll-behavior: contain;
}
.bd-pc {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 4px 10px 0;
  border-top: 1px solid var(--line-soft);
}
.bd-pc:first-child {
  border-top: 0;
}
.bd-pc-time {
  align-self: start;
  padding: 4px 0;
  border-radius: 8px;
  background: var(--surface-2);
  text-align: center;
  line-height: 1.15;
}
.bd-pc-time b {
  display: block;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.bd-pc-time span {
  color: var(--muted);
  font-size: 11px;
}
.bd-pc-counting .bd-pc-time {
  background: color-mix(in srgb, var(--accent-fill) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-fill) 45%, transparent);
}
.bd-pc-closed .bd-pc-time {
  box-shadow: inset 0 0 0 1px var(--line);
}
.bd-pc.is-next .bd-pc-time {
  box-shadow: inset 0 0 0 1px var(--focus);
}
.bd-pc-status {
  color: var(--muted);
  font-size: 12.5px;
}
.bd-pc-counting .bd-pc-status {
  color: var(--accent);
}
.bd-pc.is-next .bd-pc-status {
  color: var(--text);
  font-weight: 600;
}
.bd-pc-states {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 2px 0 6px;
  font-size: 12px;
}
.bd-pc-states a {
  color: var(--faint);
}
.bd-pc-states a.has-key {
  color: var(--link);
  font-weight: 650;
}
.bd-pc-states sup {
  color: var(--muted);
}
.bd-pc-notes {
  margin: 0 0 6px;
  line-height: 1.35;
}
.bd-pc-races {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bd-rc {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bd-rc:hover {
  background: var(--surface-3);
  text-decoration: none;
}
.bd-rc-D {
  border-left-color: var(--d-fill);
}
.bd-rc-R {
  border-left-color: var(--r-fill);
}
.bd-rc-even {
  border-left-color: var(--mid);
}
.bd-rc.is-settled {
  border-color: var(--accent);
}
.bd-rc-s {
  color: var(--muted);
  font-size: 11px;
}
.bd-rc-proj {
  color: var(--accent);
  font-weight: 700;
}
.bd-rc-tip {
  padding: 0 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-fill) 16%, transparent);
  color: var(--accent);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}
.bd-more {
  min-height: 26px;
  padding: 1px 8px;
}
.bd-pc-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
}

/* ---- key-races strip + table spacing -------------------------------------------------------------------------------------- */
.bd-strip .al-kr-all {
  display: none;
}

/* ---- responsive ------------------------------------------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .bd-needles {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .bd-latest {
    grid-column: 1 / -1;
  }
  .bd-al-list {
    flex: none;
    min-height: 0;
    max-height: 340px;
  }
}
@media (max-width: 980px) {
  .bd-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .bd-pc-list {
    max-height: 420px;
  }
}
@media (max-width: 700px) {
  .bd-needles {
    grid-template-columns: minmax(0, 1fr);
  }
  .bd-pc {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
  }
  .bd-status {
    padding: 8px 12px;
  }
}


/* ---- state picker under the board map ---------------------------------------------------------------------------------------
   The national map has states under 24 px on a phone (CT 9x9, RI 4x6), too small to tap. On touch screens and narrow windows the
   picker below it gives every state its own 44 px target. Hidden on desktop, where the map is the control. */
.bd-statepick {
  display: none;
  margin-top: 10px;
}
.bd-statepick-h {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}
.bd-statepick ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bd-statepick a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.bd-statepick a:hover,
.bd-statepick a:focus-visible {
  background: var(--surface-3);
  border-color: var(--focus);
}
@media (pointer: coarse), (max-width: 760px) {
  .bd-statepick {
    display: block;
  }
}