/* ══════════════════════════════════════════════════════════════════════════
   THE PROP SLIP AND ADD TO SLIP (2026-09-29). Shared by the props page and /widgets.

   The slip panel (prop-slip.js) and its number chips moved here from props.css unchanged, so
   /widgets can carry the same slip without loading the props page's own stylesheet. With them,
   the one Add to slip button every prop surface uses (slip-add.js), the slip as a drop target
   while a prop is dragged, and the Choose a plan card an add opens for an account without the
   slip (slip-gate.js).

   The site's tokens, so both themes follow. The only new colours are the Over and Under edges,
   the props page's hit and miss, declared here for both themes because /widgets does not load
   props.css.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --slip-over: #79d45c;
  --slip-over-lit: #a6ef8b;
  --slip-under: #ff7a4d;
}
:root[data-theme="light"] {
  --slip-over: #3f9c28;
  --slip-over-lit: #2f7d1c;
  --slip-under: #d1481c;
}

/* ---- THE PROP SLIP (2026-09-26; prop-slip.js) ------------------------------------
   Docked bottom-left on a wide screen, clear of the chat tab and the support button on the right;
   a full-width sheet at the bottom of a phone. Solid panel, brass edge, the legs in a list. */
.pp-slip {
  position: fixed; left: 16px; bottom: 16px; z-index: 40;
  width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 12px 14px; border: 1px solid var(--brass); border-radius: var(--radius);
  background: var(--panel); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  font-family: var(--ui, inherit);
}
.pp-slip[hidden] { display: none; }
.pp-slip__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.pp-slip__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 0; border: 0; background: none; color: var(--text); font: 600 15px/1.2 inherit; cursor: pointer; }
.pp-slip__count { padding: 2px 8px; border-radius: var(--radius); background: var(--metal-gold, var(--brass)); color: var(--btn-gilt-text); font-size: 12px; }
.pp-slip__at { color: var(--muted); font-size: 12px; font-weight: 500; }
.pp-slip__acts { display: flex; align-items: center; gap: 6px; }
.pp-slip__clear, .pp-slip__rm { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: none; color: var(--muted); font: 600 12px/1 inherit; cursor: pointer; }
.pp-slip__clear:hover, .pp-slip__rm:hover { border-color: var(--brass); color: var(--brass); }
/* AUTO-BUILD wears the gilt, the one call to action on the slip. */
.pp-slip__auto {
  min-height: 36px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--btn-gilt-line, var(--brass)); border-radius: var(--radius);
  background: var(--btn-gilt-bg); color: var(--btn-gilt-text); font: 700 13px/1 inherit;
}
.pp-slip__auto:disabled { opacity: .7; cursor: progress; }
/* The one or two built slips, as a pair of toggles above the legs. */
.pp-slip__built { display: flex; gap: 6px; margin-top: 10px; }
.pp-slip__pick {
  min-height: 32px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-pill, 999px); background: none; color: var(--muted); font: 600 12px/1 inherit;
}
.pp-slip__pick[aria-pressed="true"] { border-color: var(--brass); background: var(--bg-lift); color: var(--text); }
.pp-slip__legs { display: grid; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }
/* A leg: the picture, then who and what with his estimated hit under it, and Remove at the end. */
.pp-slip__leg {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 3px 0 0 var(--slip-over);
}
.pp-slip__leg--under { box-shadow: inset 3px 0 0 var(--slip-under); }
.pp-slip__pic {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden;
  border-radius: 50%; border: 1px solid var(--line); background: var(--bg-lift);
}
/* One picture, drawn by playerImage() (player-image.js): a headshot, a club logo where there is
   no headshot (pimg--logo), or initials. The SVG fills the circle and is centred by its own
   viewBox, so all three sit the same size, centred, and the face is already cut from the middle
   of ESPN's picture on our side (src/espn.js, location=center). */
.pp-slip__pic > svg, .pp-slip__pic > img { display: block; width: 100%; height: 100%; }
.pp-slip__body { grid-column: 2; display: grid; gap: 1px; min-width: 0; }
.pp-slip__who { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.pp-slip__who em { color: var(--muted); font-style: normal; font-weight: 500; font-size: 12px; }
.pp-slip__what { font-size: 13px; }
.pp-slip__hit { grid-column: 2; display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; }
.pp-slip__rm { grid-column: 3; grid-row: 1 / span 2; }
.pp-slip__sum { margin: 10px 0 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
/* The footer: four numbers, two by two. */
/* The first column is wider: it holds Est. EV and its "per $10". */
.pp-nums.pp-slip__nums { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 6px; margin: 0 0 6px; }
.pp-slip__nums .pp-num { flex-wrap: wrap; border-radius: var(--radius); white-space: normal; }
/* THE BET SIZE AND WHAT IT RETURNS. A "$" field and "To win $X", laid out on the same two
   columns as the numbers above so the pills line up. 16px on the field so an iPhone does not
   zoom the page when it is tapped. */
.pp-slip__summary { display: grid; gap: 0; }
.pp-slip__bet { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 6px; margin: 0 0 6px; align-items: stretch; }
.pp-slip__stake {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 30px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-lift);
}
.pp-slip__cur { flex: none; color: var(--muted); font: 700 13px/1 var(--ui, inherit); }
.pp-slip__amt {
  width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--text);
  font: 800 16px/1.2 var(--mono, inherit); font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.pp-slip__amt:focus { outline: none; }
.pp-slip__amt::-webkit-outer-spin-button, .pp-slip__amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-slip__stake:focus-within { border-color: var(--brass); }
.pp-slip__towin {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 5px; min-height: 30px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-lift);
  color: var(--muted); font: 600 12px/1.2 var(--ui, inherit);
}
.pp-slip__fine { margin: 0 0 6px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.pp-slip__status { margin: 0; color: var(--muted); font-size: 12px; }
.pp-slip__status:empty { display: none; }
.pp-slip button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .pp-slip { left: 0; right: 0; bottom: 0; width: auto; max-height: 60vh; border-radius: var(--radius) var(--radius) 0 0; border-width: 1px 0 0; }
  /* Opened on a phone it sits above the chat tab and the support button (chrome.css 46 to 49). */
  .pp-slip.is-open { z-index: 55; }
  .pp-slip:not(.is-open) { padding-top: 8px; padding-bottom: 8px; }
}
/* The bar says it opens: a chevron on the toggle that turns when it is open. */
.pp-slip__toggle::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass);
  transform: rotate(-135deg); transition: transform 160ms ease;
}
.pp-slip.is-open .pp-slip__toggle::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .pp-slip__toggle::after { transition: none; } }
/* The support button stands on the slip rather than over it, while the slip is on screen. */
body:has(.pp-slip:not([hidden])) .sf-support { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 641px) { body:has(.pp-slip:not([hidden])) .sf-support { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
.pp-slip__src { display: block; color: var(--muted); font-size: 11px; }

/* ---- NUMBER CHIPS (2026-09-27) ------------------------------------------------------------------
   The slip's footer and the day's picks: a short label, a number, sometimes a unit ("Est. EV
   +$1.24 per $10"). A positive estimate is lit; one at or below zero is muted. */
.pp-nums { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pp-num {
  display: inline-flex; align-items: baseline; gap: 5px; min-height: 30px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill, 999px); background: var(--bg-lift);
  color: var(--muted); font: 600 12px/1.2 var(--ui, inherit); white-space: nowrap;
}
.pp-num__k, .pp-num__u { color: var(--muted); }
.pp-num__u { font-size: 11px; }
.pp-num__v { color: var(--text); font: 800 13px/1.2 var(--mono, inherit); font-variant-numeric: tabular-nums; }
.pp-num--up { border-color: var(--brass); }
.pp-num--up .pp-num__v { color: var(--slip-over-lit); }
.pp-num--down .pp-num__v { color: var(--muted); }


/* ---- ADD TO SLIP (2026-09-29; slip-add.js) ---------------------------------------------------
   One button on every prop that could be a leg: "Add Over 239.5", edged in the side's colour, a
   plus that turns into a tick once the prop is on the slip ("On your slip", dimmed but still
   focusable). 44px tall wherever a finger presses it; a compact one in a row that already prints
   the line is 36px only on a wide screen with a mouse. On a computer it can be picked up and
   dropped on the slip. */
.sf-adds { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-add {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--brass-deep, var(--line)); border-radius: 10px; background: var(--bg-lift);
  box-shadow: inset 3px 0 0 var(--slip-over); color: var(--text);
  font: 700 13px/1.15 var(--display, inherit), sans-serif; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer;
}
.sf-add--under { box-shadow: inset 3px 0 0 var(--slip-under); }
.sf-add:hover { border-color: var(--brass); }
.sf-add:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sf-add[data-slip-drag] { cursor: grab; }
.sf-add[data-slip-drag]:active { cursor: grabbing; }
.sf-add__main { min-width: 0; overflow-wrap: anywhere; }
/* The plus, drawn: two bars in the brass. */
.sf-add__mark { position: relative; flex: none; width: 14px; height: 14px; }
.sf-add__mark::before, .sf-add__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px;
  background: var(--brass); transform: translate(-50%, -50%);
}
.sf-add__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
/* On the slip: a tick, the face muted. */
.sf-add.is-on { border-style: dashed; background: none; color: var(--muted); cursor: default; }
.sf-add.is-on .sf-add__mark::before { left: 1px; top: 7px; width: 5px; transform: rotate(45deg); }
.sf-add.is-on .sf-add__mark::after { left: 4px; top: 6px; width: 10px; transform: rotate(-45deg); }
.sf-add--compact { min-height: 36px; padding: 0 10px; font-size: 12px; }
@media (pointer: coarse), (max-width: 900px) { .sf-add--compact { min-height: 44px; } }

/* THE SLIP AS A DROP TARGET: while a prop is dragged it shows, even empty, edged and saying so. */
.pp-slip.is-drop { outline: 2px dashed var(--brass); outline-offset: 3px; }
.pp-slip.is-over { outline-style: solid; background: var(--bg-lift); }
.pp-slip__drop {
  margin: 10px 0 0; padding: 12px 10px; border: 1px dashed var(--brass); border-radius: var(--radius);
  color: var(--text); font-size: 13px; font-weight: 600; text-align: center;
}
.pp-slip.is-over .pp-slip__drop { border-style: solid; }
@media (prefers-reduced-motion: no-preference) { .pp-slip { transition: outline-color 120ms ease; } }

/* THE BAR ON A PHONE KEEPS ITS OWN ROOM. Shut, the slip is a bar across the bottom of the screen;
   the page ends above it, so the last line of the page is never under it. */
@media (max-width: 640px) {
  body:has(.pp-slip:not([hidden]):not(.is-open)) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* A press nothing answered (slip-add.js): one short line over the bottom of the page. */
.sf-add-note {
  position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  max-width: calc(100vw - 32px); margin: 0; padding: 10px 14px; transform: translateX(-50%);
  border: 1px solid var(--brass); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 13px;
}
.sf-add-note[hidden] { display: none; }

/* ---- THE CHOOSE A PLAN CARD (2026-09-29; slip-gate.js) ---------------------------------------
   What an add opens for an account without the slip: a native dialog, the site's panel, the two
   ways in as the site's buttons, and "Not now". */
.sf-gate {
  width: min(440px, calc(100vw - 32px)); max-width: none; padding: 0;
  border: 1px solid var(--brass); border-radius: var(--radius); background: var(--panel); color: var(--text);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}
.sf-gate::backdrop { background: rgba(0, 0, 0, .55); }
.sf-gate__box { display: grid; gap: 10px; padding: 20px 20px 14px; }
.sf-gate__h { margin: 0; font: 700 1.1rem/1.3 var(--display, inherit), sans-serif; }
.sf-gate__p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.sf-gate__do { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sf-gate__go { min-height: 44px; }
.sf-gate__close {
  justify-self: start; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: 600 13px/1 var(--ui, inherit); text-decoration: underline; text-underline-offset: 3px;
}
.sf-gate__close:focus-visible, .sf-gate__go:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .sf-gate__go { flex: 1 1 auto; justify-content: center; text-align: center; }
}