/* common/dashboard-swipe.css — the player-dashboard swipe pill.
   Shared surface for NFL (#player-dashboard.pbpd--nfl) and MLB
   (.mlb-dash-root). The gesture lives in
   js/common/workbench-common/dashboardSwipe.js; the two dashboards differ in
   every other respect, so nothing here may reach outside `.pb-swipe-pill`.

   `touch-action: none` IS THE FEATURE, not a detail. See the module header for
   why the gesture cannot live on the chart card. Nothing scrollable may be
   nested inside this control.

   PHONE ONLY. Both dashboards ship no viewport meta, so a phone lays out on a
   980px canvas and shows ~0.398x of every number here: the 136px height reads
   as ~54px on glass, the 30px labels as ~12px. Dividing before judging a size
   is the house rule — see [[mlb-player-dashboard-mobile]]. */

.pb-swipe-pill { display: none; }

@media (max-width: 1000px) {
  .pb-swipe-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    /* both axes are ours: the page does not scroll from here */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: grab;
    overflow: hidden;
    padding: 34px 30px;
    min-height: 136px;
    /* Rounder than the cards around it (founder 2026-09-12): a pill reads as
       something you act ON, where a 12px card reads as something you read. */
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: #111319;
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    transition: background .15s ease, border-color .15s ease;
  }
  .pb-swipe-pill:active,
  .pb-swipe-pill.is-drag { cursor: grabbing; background: #161922; }
  /* a swap is running. One commit per control, so this state ends when the new
     dashboard replaces the element — it is only visible on a cold swap, where
     the destination's bundle had not finished prefetching. */
  .pb-swipe-pill.is-busy {
    cursor: default;
    opacity: .72;
  }
  .pb-swipe-pill.is-busy .pbsw-act { opacity: .3; }
  .pb-swipe-pill.is-busy .pbsw-thumb {
    animation: pbsw-working 1s ease-in-out infinite;
  }
  @keyframes pbsw-working {
    0%, 100% { transform: translateX(-46px); }
    50%      { transform: translateX(46px); }
  }
  /* armed = past the commit point. The rim says so before you let go. */
  .pb-swipe-pill.is-armed {
    border-color: rgba(0, 211, 189, .5);
    background: rgba(0, 211, 189, .07);
  }

  /* ---- the two ends ----
     Both teal. Unlike the parlay slip's legend, whose right-hand action removes
     a leg and earns red, neither direction here destroys anything. */
  .pb-swipe-pill .pbsw-act {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-teal, #00D3BD);
    opacity: .85;
    transition: opacity .15s ease;
  }
  .pb-swipe-pill .pbsw-arr { font-size: 34px; line-height: 1; }
  /* the end you are heading for lifts; the other recedes */
  .pb-swipe-pill[data-dir="left"]  .pbsw-left,
  .pb-swipe-pill[data-dir="right"] .pbsw-right { opacity: 1; }
  .pb-swipe-pill[data-dir="left"]  .pbsw-right,
  .pb-swipe-pill[data-dir="right"] .pbsw-left  { opacity: .28; }

  /* ---- the middle: a track the thumb runs, over one line of instruction ---- */
  .pb-swipe-pill .pbsw-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .pb-swipe-pill .pbsw-track {
    position: relative;
    display: block;
    width: 100%;
    max-width: 240px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
  }
  .pb-swipe-pill .pbsw-thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62px;
    height: 16px;
    margin: -8px 0 0 -31px;
    border-radius: 999px;
    background: var(--brand-teal, #00D3BD);
    box-shadow: 0 0 18px rgba(0, 211, 189, .45);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1), width .15s ease;
    will-change: transform;
  }
  .pb-swipe-pill.is-armed .pbsw-thumb { box-shadow: 0 0 26px rgba(0, 211, 189, .7); }

  .pb-swipe-pill .pbsw-cap {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .36);
    transition: color .15s ease;
  }
  /* the destination's name, once armed: a name is not an instruction, so it
     drops the caption's uppercase tracking and reads as a label */
  .pb-swipe-pill .pbsw-cap.is-named {
    color: #e6edf3;
    font-size: 25px;
    letter-spacing: .01em;
    text-transform: none;
  }
  .pb-swipe-pill .pbsw-cap.is-refused {
    color: var(--brand-teal, #00D3BD);
    font-size: 21px;
    letter-spacing: .01em;
    text-transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pb-swipe-pill,
  .pb-swipe-pill .pbsw-act,
  .pb-swipe-pill .pbsw-cap,
  .pb-swipe-pill .pbsw-thumb { transition: none; }
}