/*
  The election page (election.html): the hero's numbers, the gauges and the map's frame, the House
  list, the trade panel, the bet slip, the portfolio and the confirm before locking. Every size,
  colour, radius and duration is a token from site.css; the party colours come from tokens.css.
  Party blue and red only ever mean the parties: errors use the theme's --danger.
*/

/* MARK: - Party marks: a small pill for a side, text in a party's colour, and the flip stripes */

.vote {
  /* How far the sticky column sits below the floating nav pill: its top, its height and a gap */
  --ticket-top: calc(var(--space-m) + 48px + var(--space-xl));
}

.party-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: var(--space-xxs) var(--space-s);
  border-radius: 999px;
  background: var(--dem-strong);
  color: var(--on-party);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.4;
}
.party-chip.party-r { background: var(--rep-strong); }
.party-chip.party-t { background: var(--tossup); color: var(--on-tossup); }
.party-text-d { color: var(--dem-text, var(--dem-strong)); }
.party-text-r { color: var(--rep-text, var(--rep-strong)); }
.party-text-t { color: var(--text); }

/* A flip is marked as the map marks it: thin light stripes, bottom left to top right, over the
   favourite's colour */
.flip-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xxs) var(--space-s);
  border-radius: 999px;
  /* Fainter stripes than the map's, so the word on them stays clear */
  --stripe: color-mix(in srgb, var(--on-party) 30%, transparent);
  background: repeating-linear-gradient(135deg, var(--stripe) 0 1px, transparent 1px 4px), var(--dem-strong);
  color: var(--on-party);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.flip-tag.party-r { background: repeating-linear-gradient(135deg, var(--stripe) 0 1px, transparent 1px 4px), var(--rep-strong); }

/* MARK: - Hero: the player's money and the time left */

.vote-hero .wrap { gap: var(--space-xl); }
.vote-hero .lede { max-width: 48ch; }
.vote-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  width: 100%;
  margin: var(--space-l) 0 0;
}
.vote-stat {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}
.vote-stat dt { color: var(--text-faint); }
.vote-stat dd { margin: 0; }
.vote-stat-value {
  font-size: var(--text-title);
  font-weight: 700;
  letter-spacing: var(--track-title);
  line-height: 1.08;
  white-space: nowrap;
}
.vote-stat-note { font-size: var(--text-small); letter-spacing: var(--track-small); color: var(--text-muted); max-width: 32ch; }
.is-closed [data-stat="clock"] { color: var(--text-muted); }
@media (max-width: 720px) {
  .vote-stats { grid-template-columns: 1fr; gap: 0; }
  .vote-stat { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-l); padding: var(--space-m) 0; }
  .vote-stat dt { align-self: center; }
  .vote-stat-value { grid-column: 2; grid-row: 1; text-align: right; }
  .vote-stat-note { grid-column: 1 / -1; }
}

/* A warning under the hero: storage that won't save, or prices that didn't load */
.vote-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  max-width: var(--reading-width);
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: var(--text-small);
  color: var(--text-muted);
}
.vote-notice[hidden] { display: none; }
.vote-notice strong { color: var(--text); }
.vote-notice svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--danger); }

/* MARK: - Layout: the page's sections beside the sticky bet slip on a wide screen */

.vote-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.vote-main { min-width: 0; }
.vote-main > .section-first { padding-top: 0; }
@media (min-width: 1100px) {
  .vote-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: var(--space-xxl);
    align-items: start;
  }
}

/* MARK: - Control: the two gauge cards */

.vote-gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
.vote-gauge { min-width: 0; }
@media (max-width: 720px) {
  .vote-gauges { grid-template-columns: 1fr; }
}

/* MARK: - The map's switch */

.vote-map-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-xl);
  margin-bottom: var(--space-xl);
}
.vote-map-bar .segmented button { min-width: 112px; }
.vote-map-count { margin: 0; }
.vote-map { min-width: 0; }
@media (max-width: 520px) {
  .vote-map-bar .segmented { width: 100%; }
}

/* MARK: - The House list: one ruled row per district, the whole row a button */

.race-list-head,
.race-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 2.4fr) minmax(0, 2fr) minmax(0, 1.6fr) 16px;
  column-gap: var(--space-l);
  align-items: center;
}
.race-list-head {
  padding: 0 var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--rule);
}
.race-list { list-style: none; margin: 0; padding: 0; }
.race-list li { border-bottom: 1px solid var(--rule); }
.race-empty { padding: var(--space-l) 0; color: var(--text-muted); }
.race-row {
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: var(--space-m) var(--space-s);
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-out), transform var(--dur-settle) var(--spring);
}
.race-where, .race-who { display: grid; min-width: 0; }
.race-code { font-weight: 700; letter-spacing: var(--track-small); transition: color var(--dur-quick) var(--ease-out); }
.race-state, .race-seat { font-size: var(--text-small); color: var(--text-muted); }
.race-people { font-size: var(--text-small); overflow-wrap: anywhere; }
.race-odds { display: flex; align-items: center; gap: var(--space-s); }
.race-chance { font-weight: 700; }
.race-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.race-tag {
  display: inline-flex;
  padding: 1px var(--space-s);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--outline);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.race-tag-slip { box-shadow: inset 0 0 0 1px var(--action); color: var(--action); }
.race-go { width: 16px; height: 16px; color: var(--text-faint); transition: transform var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); }
.race-row.is-selected { background: var(--surface-muted); box-shadow: inset 3px 0 0 var(--action); }
.race-row.is-selected .race-go { color: var(--action); }
@media (hover: hover) and (pointer: fine) {
  .race-row:hover { background: var(--surface-muted); }
  .race-row:hover .race-code { color: var(--action); }
  .race-row:hover .race-go { color: var(--text); transform: translateX(3px); }
}
.race-row:active { transform: scale(0.99); transition-duration: var(--dur-press); transition-timing-function: var(--ease-out); }
.race-row:focus-visible { outline-offset: -2px; }
@media (max-width: 720px) {
  .race-list-head { display: none; }
  .race-list { border-top: 1px solid var(--rule); }
  .race-row {
    grid-template-columns: minmax(0, 1fr) auto 16px;
    grid-template-areas: "where odds go" "who tags go";
    row-gap: var(--space-xs);
  }
  .race-where { grid-area: where; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-s); }
  .race-who { grid-area: who; }
  .race-odds { grid-area: odds; justify-self: end; }
  .race-tags { grid-area: tags; justify-self: end; }
  .race-go { grid-area: go; }
}

/* MARK: - The ticket: the trade panel over the slip. A sticky column on a wide screen */

.ticket-peek, .ticket-scrim, .ticket-grab, .ticket-close { display: none; }
@media (min-width: 1100px) {
  .ticket {
    position: sticky;
    top: var(--ticket-top);
    z-index: 2;
  }
  .ticket-sheet {
    position: relative;
    max-height: calc(100vh - var(--ticket-top) - var(--space-l));
    max-height: calc(100dvh - var(--ticket-top) - var(--space-l));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-xl);
    border-radius: var(--radius-large);
    background: var(--surface-raised);
    box-shadow: var(--shadow-float);
  }
}

/* On a phone or a tablet: a pill in the corner, clear of the theme dots, that opens into a sheet */
@media (max-width: 1099px) {
  .ticket-peek {
    position: fixed;
    z-index: 45;
    right: var(--margin);
    bottom: var(--space-l);
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    height: 48px;
    max-width: calc(100vw - var(--margin) * 2 - 132px);
    padding: 0 var(--space-s) 0 var(--space-l);
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
    box-shadow: var(--shadow-float), inset 0 0 0 1px var(--rule);
    color: var(--text);
    font: inherit;
    font-size: var(--text-small);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--dur-settle) var(--spring), opacity var(--dur-quick) var(--ease-out), visibility 0s;
  }
  .ticket-peek-count {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-s);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-muted);
  }
  .has-lines .ticket-peek-count { background: var(--ink); color: var(--on-ink); }
  .ticket-peek-total { overflow: hidden; text-overflow: ellipsis; margin-right: var(--space-s); }
  .ticket-peek-total:empty { display: none; }
  .ticket-peek:active { transform: scale(0.97); transition-duration: var(--dur-press); }
  .is-open .ticket-peek { opacity: 0; visibility: hidden; transition: opacity var(--dur-quick) var(--ease-out), visibility 0s var(--dur-quick); }

  .ticket-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: color-mix(in srgb, var(--plum) 45%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-move) var(--ease-out), visibility 0s var(--dur-move);
  }
  .ticket-sheet {
    position: fixed;
    z-index: 60;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 640px;
    margin: 0 auto;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-l) var(--margin) calc(var(--space-xl) + env(safe-area-inset-bottom));
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    background: var(--surface-raised);
    box-shadow: var(--shadow-pop);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--dur-move) var(--ease-in), visibility 0s var(--dur-move);
  }
  .is-open .ticket-scrim { opacity: 1; visibility: visible; transition: opacity var(--dur-move) var(--ease-out); }
  .is-open .ticket-sheet { transform: none; visibility: visible; transition: transform var(--dur-settle) var(--spring); }
  .ticket-grab {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto var(--space-l);
    border-radius: 999px;
    background: var(--outline);
  }
  .ticket-close {
    display: inline-grid;
    place-items: center;
    position: absolute;
    top: var(--space-m);
    right: var(--space-m);
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--dur-quick) var(--ease-out), transform var(--dur-settle) var(--spring);
  }
  .ticket-close svg { width: 16px; height: 16px; }
  .ticket-close:active { transform: scale(0.94); transition-duration: var(--dur-press); }
  /* The sheet's own close does the trade panel's job here */
  .ticket-sheet .trade-close { display: none; }
  .trade-head, .slip-head { padding-right: 48px; }
  .trade:not([hidden]) + .slip .slip-head { padding-right: 0; }
  html.sheet-open { overflow: hidden; }
  /* Room at the foot of the page, so the pill never sits over the last line */
  .vote .vote-fine { padding-bottom: calc(48px + var(--space-xl)); }
}
@media (hover: hover) and (pointer: fine) {
  .ticket-close:hover, .trade-close:hover { background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--outline); }
}

/* MARK: - The trade panel */

.trade {
  display: grid;
  gap: var(--space-l);
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--rule);
}
.trade[hidden] { display: none; }
.trade-head { position: relative; display: grid; gap: var(--space-xs); padding-right: 48px; }
.trade-kind { margin: 0; color: var(--text-faint); }
.trade-title { outline: none; }
.trade-title:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: var(--radius-small); }
.trade-odds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); font-size: var(--text-small); color: var(--text-muted); }
.trade-close {
  display: inline-grid;
  place-items: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-out), transform var(--dur-settle) var(--spring);
}
.trade-close svg { width: 14px; height: 14px; }
.trade-close:active { transform: scale(0.94); transition-duration: var(--dur-press); }

/* The two sides: an outlined card each, filled in its party's colour once picked */
.trade-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
.trade-side {
  --party: var(--dem-strong);
  --party-text: var(--dem-text, var(--dem-strong));
  display: grid;
  gap: var(--space-xxs);
  min-width: 0;
  padding: var(--space-m) var(--space-l);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--outline);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), transform var(--dur-settle) var(--spring);
}
.trade-side.party-r { --party: var(--rep-strong); --party-text: var(--rep-text, var(--rep-strong)); }
.trade-side-name { font-size: var(--text-small); font-weight: 600; overflow-wrap: anywhere; }
.trade-side-price { font-size: var(--text-title); font-weight: 700; letter-spacing: var(--track-title); line-height: 1.08; color: var(--party-text); }
.trade-side[aria-checked="true"] { background: var(--party); box-shadow: none; color: var(--on-party); }
.trade-side[aria-checked="true"] .trade-side-price { color: var(--on-party); }
@media (hover: hover) and (pointer: fine) {
  .trade-side[aria-checked="false"]:hover { box-shadow: inset 0 0 0 2px var(--party); }
}
.trade-side:active { transform: scale(0.97); transition-duration: var(--dur-press); transition-timing-function: var(--ease-out); }

/* A dollar amount: the sign sits inside the field, the figures line up */
.trade-stake { display: grid; gap: var(--space-s); }
.trade-stake-label { color: var(--text-faint); }
.stake-field {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 48px;
  padding: 0 var(--space-l);
  border-radius: var(--radius-small);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--outline);
  transition: box-shadow var(--dur-quick) var(--ease-out);
}
.stake-field:focus-within { box-shadow: inset 0 0 0 2px var(--action); }
.stake-field:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--danger); }
.stake-field:has(:disabled) { opacity: 0.5; }
.stake-dollar { color: var(--text-faint); font-weight: 600; }
.stake-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.trade-stake .stake-field .stake-input { font-size: var(--text-lede); }

.trade-quick { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.trade-chip {
  min-height: 36px;
  padding: var(--space-xs) var(--space-m);
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--text);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-out), transform var(--dur-settle) var(--spring);
}
@media (hover: hover) and (pointer: fine) {
  .trade-chip:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--outline-marked); }
}
.trade-chip:active:not(:disabled) { transform: scale(0.95); transition-duration: var(--dur-press); }
.trade-chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* The quote: what the stake buys, laid out as two by two */
.trade-quote {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--space-l);
  margin: 0;
  padding: var(--space-l);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.trade-quote div { display: grid; gap: var(--space-xxs); min-width: 0; }
.trade-quote dt { font-size: var(--text-small); color: var(--text-muted); overflow-wrap: anywhere; }
.trade-quote dd { margin: 0; font-size: var(--text-body); font-weight: 700; }
.trade-problem { font-size: var(--text-small); color: var(--danger); }
.trade-problem[hidden] { display: none; }
.trade-add { width: 100%; }
.trade-add:disabled, .slip-lock:disabled { opacity: 0.4; cursor: not-allowed; }
.trade-add:disabled:active, .slip-lock:disabled:active { transform: none; }
.trade-notes { display: grid; gap: var(--space-xs); }
.trade-notes:empty { display: none; }
.trade-note { display: flex; gap: var(--space-s); font-size: var(--text-small); color: var(--text-muted); }
.trade-note svg, .slip-rule svg, .portfolio-empty svg { width: 14px; height: 14px; flex: none; margin-top: 4px; }

/* MARK: - The bet slip */

.slip { display: grid; gap: var(--space-l); }
.slip-head { display: flex; align-items: center; gap: var(--space-m); }
.slip-title { outline: none; }
.slip-title:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: var(--radius-small); }
.slip-count {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-s);
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--text-small);
  font-weight: 700;
}
.slip-count[hidden] { display: none; }
.slip-empty { font-size: var(--text-small); color: var(--text-muted); }
.slip-empty[hidden], .slip-foot[hidden], .slip-message[hidden] { display: none; }
.slip-lines { list-style: none; margin: 0; padding: 0; }
.slip-lines:empty { display: none; }
.slip-line {
  --party: var(--dem-strong);
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m) 0;
  border-top: 1px solid var(--rule);
  transition: background-color var(--dur-settle) var(--ease-out), box-shadow var(--dur-settle) var(--ease-out);
}
.slip-line.party-r { --party: var(--rep-strong); }
/* A line just added glows faintly in its party's colour, then settles */
.slip-line.is-new {
  background: color-mix(in srgb, var(--party) 10%, transparent);
  box-shadow: -8px 0 0 color-mix(in srgb, var(--party) 10%, transparent), 8px 0 0 color-mix(in srgb, var(--party) 10%, transparent);
  transition: none;
}
.slip-line-top { display: flex; align-items: flex-start; gap: var(--space-s); }
.slip-line-name {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-small);
}
.slip-line-name:disabled { cursor: default; color: var(--text-muted); }
.slip-line-race { overflow-wrap: anywhere; text-decoration: underline transparent; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-quick) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .slip-line-name:not(:disabled):hover .slip-line-race { text-decoration-color: currentColor; }
}
.slip-line-remove {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: -6px -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), transform var(--dur-settle) var(--spring);
}
.slip-line-remove svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .slip-line-remove:hover { background: var(--surface); color: var(--text); }
}
.slip-line-remove:active { transform: scale(0.9); transition-duration: var(--dur-press); }
.slip-line-side { font-size: var(--text-small); color: var(--text-muted); }
.slip-line-stake { display: flex; align-items: center; gap: var(--space-m); }
.slip-line-label { font-size: var(--text-small); color: var(--text-faint); }
.stake-field-small { flex: 1; max-width: 200px; height: 40px; padding: 0 var(--space-m); }
.slip-line-quote { font-size: var(--text-small); color: var(--text-muted); }
.slip-line-quote.is-problem { color: var(--danger); }

.slip-foot { display: grid; gap: var(--space-m); padding-top: var(--space-l); border-top: 1px solid var(--rule); }
.slip-sums { display: grid; gap: var(--space-xs); margin: 0; font-size: var(--text-small); }
.slip-sums div, .confirm-sums div { display: flex; justify-content: space-between; gap: var(--space-l); }
.slip-sums dt { color: var(--text-muted); }
.slip-sums dd, .confirm-sums dd { margin: 0; font-weight: 600; }
.slip-sums div:first-child { font-size: var(--text-body); }
.slip-sums div:first-child dt { color: var(--text); font-weight: 600; }
.slip-sums div:first-child dd { font-weight: 700; }
.slip-sums .is-short dt, .slip-sums .is-short dd { color: var(--danger); }
.slip-message { font-size: var(--text-small); color: var(--danger); }
.slip-lock { width: 100%; }
.slip-rule { display: flex; gap: var(--space-s); font-size: var(--text-small); color: var(--text-faint); }

/* MARK: - The portfolio: locked bets by race, and what they're worth */

.portfolio-empty {
  display: flex;
  gap: var(--space-s);
  padding: var(--space-l) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--text-muted);
  max-width: 56ch;
}
.holdings { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.holdings thead th {
  padding: 0 0 var(--space-m) var(--space-l);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
  white-space: nowrap;
}
.holdings th.is-bet { padding-left: 0; text-align: left; }
.holdings td { padding: var(--space-m) 0 var(--space-m) var(--space-l); text-align: right; white-space: nowrap; vertical-align: baseline; }
.holding-race th { padding: var(--space-xl) 0 var(--space-xs); text-align: left; font-weight: 400; }
.holding:first-of-type .holding-race th { padding-top: var(--space-l); }
.holding-kind { display: block; color: var(--text-faint); }
.holding-name { font-size: var(--text-lede); font-weight: 700; letter-spacing: var(--track-lede); margin-right: var(--space-m); }
.holding-odds { font-size: var(--text-small); color: var(--text-muted); }
.holding-line th, .holding-line td { border-bottom: 1px solid var(--rule); }
.holding-line th { display: flex; align-items: baseline; gap: var(--space-s); padding: var(--space-m) 0; text-align: left; font-weight: 400; }
.holding-bet { display: grid; }
.holding-side { font-weight: 600; }
.holding-when { font-size: var(--text-small); color: var(--text-faint); }
.holdings tfoot th, .holdings tfoot td { padding-top: var(--space-l); font-weight: 700; text-align: right; }
.holdings tfoot th { text-align: left; }
.portfolio-sums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  margin: var(--space-xxl) 0 0;
}
.portfolio-sums div { display: grid; gap: var(--space-xs); padding-top: var(--space-l); border-top: 1px solid var(--rule); }
.portfolio-sums dt { color: var(--text-faint); }
.portfolio-sums dd { margin: 0; font-size: var(--text-title); font-weight: 700; letter-spacing: var(--track-title); line-height: 1.08; }
.portfolio-sums .is-total { border-top-color: var(--outline-marked); }
@media (max-width: 720px) {
  .holdings thead { display: none; }
  .holdings, .holdings tbody, .holdings tfoot, .holdings tr { display: block; width: 100%; }
  .holding-race th { display: block; }
  .holding-line, .holdings tfoot tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-l);
    padding: var(--space-m) 0;
    border-bottom: 1px solid var(--rule);
  }
  .holding-line th { grid-column: 1 / -1; padding: 0 0 var(--space-s); border: 0; }
  .holdings tfoot th { grid-column: 1 / -1; padding: 0 0 var(--space-s); }
  .holding-line td, .holdings tfoot td { display: flex; justify-content: space-between; gap: var(--space-s); padding: var(--space-xxs) 0; border: 0; font-size: var(--text-small); }
  .holding-line td::before, .holdings tfoot td::before { content: attr(data-label); color: var(--text-faint); font-weight: 400; }
  .holdings tfoot td:empty, .holdings tfoot td[data-label="Contracts"] { display: none; }
  .portfolio-sums { grid-template-columns: 1fr; gap: 0; }
  .portfolio-sums div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding: var(--space-m) 0; }
}

/* MARK: - The confirm before locking in */

.confirm {
  width: min(480px, calc(100vw - var(--margin) * 2));
  max-height: calc(100dvh - var(--space-xxl));
  padding: 0;
  border: 0;
  border-radius: var(--radius-large);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  overflow: auto;
}
.confirm::backdrop {
  background: color-mix(in srgb, var(--plum) 45%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.confirm[open] { animation: confirm-in var(--dur-settle) var(--spring); }
.confirm[open]::backdrop { animation: fade-in var(--dur-move) var(--ease-out); }
@keyframes confirm-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes fade-in { from { opacity: 0; } }
.confirm-form { display: grid; gap: var(--space-l); padding: var(--space-xxl); }
.confirm-sums { display: grid; gap: var(--space-xs); margin: 0; padding: var(--space-l) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.confirm-sums dt { color: var(--text-muted); }
.confirm-sums .is-total { padding-top: var(--space-xs); font-weight: 700; }
.confirm-sums .is-total dt { color: var(--text); }
.confirm-warning {
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-small);
}
.confirm-warning strong { display: block; color: var(--text); font-size: var(--text-body); }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-s); margin-top: var(--space-s); }
@media (max-width: 520px) {
  .confirm-form { padding: var(--space-xl); }
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .button { width: 100%; }
}

/* MARK: - The small print */

.vote-fine { padding: var(--space-xxl) 0 0; }
.vote-fine .wrap { display: grid; gap: var(--space-s); }
.vote-fine p { max-width: var(--reading-width); font-size: var(--text-small); color: var(--text-muted); }
.vote-fine strong { color: var(--text); }

/* MARK: - Before the prices load, and if they don't */

.js .vote:not(.is-ready) .vote-main [data-house],
.js .vote:not(.is-ready) .vote-map-bar .segmented { visibility: hidden; }
.vote.is-unloaded .vote-layout { display: none; }

/* MARK: - Motion */

@media (prefers-reduced-motion: reduce) {
  .race-row, .race-go, .trade-side, .trade-chip, .trade-close, .ticket-close, .ticket-peek, .ticket-scrim, .ticket-sheet,
  .is-open .ticket-sheet, .is-open .ticket-scrim, .is-open .ticket-peek, .slip-line, .slip-line-remove, .stake-field { transition: none; }
  .confirm[open], .confirm[open]::backdrop { animation: none; }
  .race-row:active, .trade-side:active, .trade-chip:active, .ticket-peek:active, .slip-line-remove:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .ticket-peek { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
  .confirm::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* MARK: - Who's playing: the line under the hero's numbers, and the sign-in dialog */

.vote-player {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-s);
  margin: var(--space-l) 0 0;
  color: var(--text-muted);
  font-size: var(--text-small);
}
.vote-player[hidden] { display: none; }
.vote-player strong { color: var(--text); font-weight: 600; }
.vote-player-out {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.vote-player-out:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 2px; }

.signin-why, .signin-small { margin: 0; color: var(--text-muted); font-size: var(--text-small); }
.signin-x { justify-content: center; gap: var(--space-s); width: 100%; }
.signin-x svg { width: 16px; height: 16px; flex: none; }
.signin-or {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin: 0;
  color: var(--text-faint);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.signin-or::before, .signin-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.signin-field { display: grid; gap: var(--space-xs); }
.signin-label { color: var(--text-faint); font-size: var(--text-small); }
.signin .stake-field:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--danger); }
.signin-error { margin: 0; color: var(--danger); font-size: var(--text-small); }
.signin-error:empty { display: none; }
.signin.is-sending .confirm-form { cursor: progress; }

/* MARK: - The leaderboard */

.board { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.board li {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--space-l);
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--rule);
}
.board li.is-you { font-weight: 600; }
.board-rank { color: var(--text-faint); }
.board-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-total { font-weight: 600; }
.board-pnl { min-width: 9ch; text-align: right; color: var(--text-muted); }
@media (max-width: 599px) {
  .board li { grid-template-columns: 3ch minmax(0, 1fr) auto; }
  .board-pnl { display: none; }
}

/* After a lock-in: the slip says so until something new goes on it */
.slip-done {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius-card);
  background: var(--surface-success);
  color: var(--text-muted);
  font-size: var(--text-small);
}
.slip-done[hidden] { display: none; }
.slip-done strong { color: var(--text); font-size: var(--text-body); }
.slip-done a { color: var(--link); }