/* Best Seats topics picks modal (topics.js): only what modal.css does not
   already style. Scoped to .bst-modal (BSTopicsModal's dialog). --bst-c is
   the topic's pin colour from the Best Seats hub map. */

/* ── The switcher: Tyler's filter rail, compact ─────────────────────────── */
.bsv.bst-modal .bst-switch{
   position: sticky; top: 0; z-index: 3;
   margin: -8px 0 14px;
   padding: 8px 0;
   background: #fff;
   box-shadow: 0 1px 0 rgba(0, 36, 72, .08);
}
.bsv.bst-modal .bst-switch-rail{
   display: flex; flex-wrap: wrap; gap: 8px;
}
.bsv.bst-modal .bst-chip{
   --bst-c: #2E6BD6;
   display: inline-flex; align-items: center; gap: 7px;
   min-height: 36px;
   padding: 6px 12px 6px 10px;
   border: 0; border-radius: 999px;
   background: #fff;
   box-shadow: inset 0 0 0 1.5px rgba(0, 36, 72, .16);
   box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bst-c) 35%, #fff);
   color: var(--bst-c);
   color: color-mix(in srgb, var(--bst-c) 82%, #000);
   font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2;
   white-space: nowrap;
   cursor: pointer;
   transition: background .12s ease, box-shadow .12s ease, color .12s ease;
}
.bsv.bst-modal .bst-chip:hover{
   background: color-mix(in srgb, var(--bst-c) 9%, #fff);
   box-shadow: inset 0 0 0 1.5px var(--bst-c);
}
.bsv.bst-modal .bst-chip:focus-visible{ outline: 2px solid var(--bst-c); outline-offset: 2px; }
.bsv.bst-modal .bst-chip.is-on{
   background: var(--bst-c);
   box-shadow: 0 2px 8px rgba(7, 18, 41, .18);
   box-shadow: 0 2px 8px color-mix(in srgb, var(--bst-c) 40%, transparent);
   color: #fff;
}
.bsv.bst-modal .bst-chip-dot{
   width: 9px; height: 9px; border-radius: 50%;
   box-shadow: inset 0 0 0 2.5px currentColor;
}
.bsv.bst-modal .bst-chip-n{
   min-width: 20px; padding: 1px 6px; border-radius: 999px;
   background: rgba(0, 36, 72, .07);
   background: color-mix(in srgb, var(--bst-c) 12%, #fff);
   font-size: 11.5px; font-weight: 700; text-align: center;
}
.bsv.bst-modal .bst-chip.is-on .bst-chip-n{ background: rgba(255, 255, 255, .24); }
/* Nothing listed for this game: still choosable (its write-up is there). */
.bsv.bst-modal .bst-chip.is-empty:not(.is-on){ opacity: .55; }

/* Narrow: one row that scrolls, edge to edge. */
@media (max-width: 719px){
   .bsv.bst-modal .bst-switch{ margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 0; }
   .bsv.bst-modal .bst-switch-rail{
      flex-wrap: nowrap; overflow-x: auto;
      padding-right: 16px;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
   }
   .bsv.bst-modal .bst-switch-rail::-webkit-scrollbar{ display: none; }
   .bsv.bst-modal .bst-chip{ scroll-snap-align: start; }
}

/* ── Picks + group panels ───────────────────────────────────────────────── */
.bsv.bst-modal .bst-intro{ margin: -4px 0 12px; font-size: 13px; }
.bsv.bst-modal .bst-note-btns{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.bsv.bst-modal .bst-label{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bsv.bst-modal .bst-label > span:first-child{ overflow: hidden; text-overflow: ellipsis; }
.bsv.bst-modal .bst-sub{ font-size: 12px; font-weight: 400; color: rgba(0, 36, 72, .65); }

.bsv.bst-modal .bst-group{ padding: 2px 0 12px; }
.bsv.bst-modal .bst-where{ margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.bsv.bst-modal .bst-points{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bsv.bst-modal .bst-points li{ position: relative; padding-left: 20px; font-size: 13px; line-height: 1.4; }
.bsv.bst-modal .bst-points li::before{
   content: ''; position: absolute; left: 3px; top: 4px; width: 9px; height: 5px;
   border-left: 2px solid #1a8754; border-bottom: 2px solid #1a8754; transform: rotate(-45deg);
}
.bsv.bst-modal .bst-shown{ margin: 0; font-size: 13px; }
.bsv.bst-modal .bst-unlisted{ margin: 10px 2px 0; font-size: 12.5px; line-height: 1.45; }

/* ── The long-form copy at the foot ─────────────────────────────────────── */
.bsv.bst-modal .bst-about{
   margin-top: 28px;
   padding-top: 18px;
   border-top: 1px solid rgba(0, 36, 72, .1);
}
.bsv.bst-modal .bst-about-body{ font-size: 15px; line-height: 1.6; }
.bsv.bst-modal .bst-about-body img{ max-width: 100%; height: auto; }

/* ── From the Best Seats guide (.bst-bsg; Keith, 2026-11-01) ───────────────
   The switcher's chips light grey with no outline until selected; the picks
   as a ranked table (# · seats + what it is · price · See Ticket) instead of
   cards. */
.bsv.bst-modal.bst-bsg .bst-chip:not(.is-on){ background: #F4F4F4; box-shadow: none; }
.bsv.bst-modal.bst-bsg .bst-chip:not(.is-on):hover{ background: #EAEAEA; box-shadow: none; }
.bsv.bst-modal.bst-bsg .bst-chip:not(.is-on) .bst-chip-n{ background: #fff; }
.bsv.bst-modal.bst-bsg .bst-table{ width: 100%; border-collapse: collapse; font-size: 15px; margin: 4px 0 8px; }
.bsv.bst-modal.bst-bsg .bst-table thead th{
   text-align: start; padding: 0 12px 8px 0; border-bottom: 1px solid #C9D0DA;
   font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-70, #5F6B7A);
}
.bsv.bst-modal.bst-bsg .bst-table tbody th,
.bsv.bst-modal.bst-bsg .bst-table tbody td{ text-align: start; vertical-align: middle; padding: 14px 12px 14px 0; border-bottom: 1px solid #E4E7EC; }
.bsv.bst-modal.bst-bsg .bst-table .bst-t-rank{ width: 44px; padding-right: 12px; }
.bsv.bst-modal.bst-bsg .bst-t-rank > span{
   display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
   background: #F2F4F7; color: var(--color-primary, #002448); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.bsv.bst-modal.bst-bsg .bst-t-seats{ font-weight: 700; color: var(--color-primary, #002448); }
.bsv.bst-modal.bst-bsg .bst-t-tag{ display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--color-70, #5F6B7A); }
.bsv.bst-modal.bst-bsg .bst-t-tag--pick{ font-weight: 700; color: var(--color-brand, #0067CE); }
.bsv.bst-modal.bst-bsg .bst-t-price > span:first-child{ font-size: 16px; font-weight: 800; color: var(--color-primary, #002448); }
.bsv.bst-modal.bst-bsg .bst-t-notes{ display: block; margin-top: 2px; font-size: 12px; color: var(--color-70, #5F6B7A); }
.bsv.bst-modal.bst-bsg .bst-table .bst-t-go{ width: 1%; padding-right: 0; text-align: end; white-space: nowrap; }
.bsv.bst-modal.bst-bsg .bst-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Narrow: each pick a row of two lines, See Ticket on the right. */
@media (max-width: 719px){
   .bsv.bst-modal.bst-bsg .bst-table thead{ display: none; }
   .bsv.bst-modal.bst-bsg .bst-table tbody tr{
      display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: 'rank seats go' 'rank price go';
      column-gap: 12px; padding: 12px 0; border-bottom: 1px solid #E4E7EC;
   }
   .bsv.bst-modal.bst-bsg .bst-table tbody th,
   .bsv.bst-modal.bst-bsg .bst-table tbody td{ padding: 0; border: 0; }
   .bsv.bst-modal.bst-bsg .bst-table .bst-t-rank{ grid-area: rank; width: auto; padding: 0; align-self: start; }
   .bsv.bst-modal.bst-bsg .bst-t-seats{ grid-area: seats; }
   .bsv.bst-modal.bst-bsg .bst-t-price{ grid-area: price; }
   .bsv.bst-modal.bst-bsg .bst-table .bst-t-go{ grid-area: go; width: auto; align-self: center; }
}