/* Lines chips: the ONE look of a sportsbook's lines as a chip (since
   2026-11-01, Zach's design, set on the Player Stats lines bar and carried to
   the Odds page). A chip is a book (its logo and name on top, its Over above
   its Under, each a line and a price) or a summary in front of the books
   (Best, Hold, Sharp: a thin dashed edge, no fill, lighter labels, not
   clickable). The chosen chip (the book whose line a chart draws) is blue;
   the best price a side sits on yellow; the Sharp chip is blue (stronger
   when a book beats the sharp price by 2% or more); a divider is 3px of the
   muted grey. Nothing changes colour on hover (Zach).

   Two pages read it, each with its own markup under these classes:
   - Player Stats' lines bar under its filters (player-props-dfs/includes/
     ps-matchup-view.php #ps-props-strip, renderPropsStripHtml() in
     ps-core.js): a chip is a <tr> of a flex tbody, its label a <td>, its
     body a <td>, a divider a <tr>; the bar's own frame, title and flex
     layout, and the rules that keep front.css's row tints off its rows, are
     in styles/player-props-dfs.css.
   - The Odds page's Games and Props tables (odds-tracker.js chipCells();
     Zach, 2026-11-01: the one table, scrolling sideways at every width,
     each cell's content in a chip): the table carries .tmb-chips
     (odds-body.php) and a chip is a <div> wrapped round a cell's content;
     the book's name stays in the column header, so a chip there has no
     label, and the cells' own typography (a game's two sides, Best, Hold,
     Sharp, Middle), the yellow on its best prices and its dividers are
     odds-tracker.css's, in the same tokens.
   Every rule is scoped under .tmb-chips, the container both pages set, so
   nothing here styles a table cell outside a chip view. Colours are tokens
   (styles/tokens.css). A rule that both pages need goes here, never a copy
   in either page's stylesheet. */

.tmb-chips .tmb-chip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    cursor: pointer;
    border: 1px solid var(--tmb-gray-600);   /* Zach: #666, the same on hover */
    border-radius: 6px;
    background: #fff;
}
.tmb-chips .tmb-chip.tmb-chip-sel { border-color: var(--tmb-blue); background: var(--tmb-blue-50); }
.tmb-chips .tmb-chip-sel .tmb-chip-label span { color: var(--tmb-blue-800); }

/* the label: the book's logo and name, or the summary's word */
.tmb-chips .tmb-chip-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--tmb-gray-700);
    white-space: nowrap;
    padding: 7px 8px 0 !important;   /* Zach: the logo was too close to the top */
    text-align: center;
}
.tmb-chips .tmb-chip-label img {
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: -3px;
    width: 14px;
    height: 14px;
}

/* the body: the Over and the Under, one above the other (Zach: condensed,
   like the matchup page's); the chart icon (scripts/line-movement.js) at
   its right edge */
.tmb-chips .tmb-chip-body {
    display: block !important;
    position: relative;
    padding: 1px 8px 4px !important;
}
.tmb-chips .tmb-chip-body:has(> .chart-icon) { padding-right: 22px !important; }
.tmb-chips .tmb-chip-body > .chart-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
/* On hover the shared rule (line-movement.css) scales the icon, which would
   replace the centring translate and drop it half its height (Zach,
   2026-11-01: it "drops"): here it keeps its place and grows in place. */
.tmb-chips .tmb-chip-body:hover > .chart-icon,
.tmb-chips .lm-active > .chart-icon,
.tmb-chips .tmb-chip-body > .chart-icon:hover {
    transform: translateY(-50%) scale(1.15);
}
.tmb-chips .tmb-chip-side {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--tmb-gray-700);
}
.tmb-chips .tmb-chip-line { font-weight: 600; color: var(--tmb-gray-900); }
.tmb-chips .tmb-chip-price { font-variant-numeric: tabular-nums; }
/* the best price a side, on yellow */
.tmb-chips .tmb-chip-price.tmb-chip-best { background: var(--tmb-warning-bg); padding: 0 4px; border-radius: 3px; }
/* a price that is the book's deep link (odds-tracker.js betLinkHtml, the
   Player Stats renderer's priceHtml): the dotted underline is the only tell */
.tmb-chips a.betslip-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.tmb-chips a.betslip-link:hover { color: var(--tmb-blue); text-decoration-style: solid; }

/* the summary chips: Best, Hold, Sharp, before the books, not clickable;
   quieter than a book's chip: a thin dashed edge, no fill, lighter labels,
   the figures at the books' weight */
.tmb-chips .tmb-chip-sum { cursor: default; border: 1.5px dashed var(--tmb-gray-600); border-radius: 8px; background: transparent; }
.tmb-chips .tmb-chip-sum .tmb-chip-label,
.tmb-chips .tmb-chip-sum .tmb-chip-label span {
    color: var(--tmb-gray-500);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.56rem;
    font-weight: 600;
}
.tmb-chips .tmb-chip-sum .tmb-chip-side { color: var(--tmb-gray-600); }
.tmb-chips .tmb-chip-sum .tmb-chip-line { font-weight: 500; color: var(--tmb-gray-700); }
.tmb-chips .tmb-chip-sum .tmb-chip-price.tmb-chip-best { font-weight: 600; }
.tmb-chips .tmb-chip-at { font-size: 0.6rem; color: var(--tmb-gray-500); }
.tmb-chips .tmb-chip-sum .tmb-chip-at { text-align: center; }
.tmb-chips .tmb-chip-none { color: var(--tmb-gray-500); }
.tmb-chips .tmb-chip-big {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--tmb-gray-700);
    text-align: center;
    padding: 4px 0 2px;
    font-variant-numeric: tabular-nums;
}
.tmb-chips .tmb-chip-big.tmb-chip-arb { color: var(--tmb-green-700); }
/* the Sharp chip on blue, stronger (and solid-edged) when a book beats the
   sharp price by 2% or more */
.tmb-chips .tmb-chip.tmb-chip-sharp { background: var(--tmb-blue-50); border-color: var(--tmb-blue-300); }
.tmb-chips .tmb-chip-sharp .tmb-chip-label span, .tmb-chips .tmb-chip-sharp .tmb-chip-line { color: var(--tmb-blue-800); }
.tmb-chips .tmb-chip.tmb-chip-sharp.tmb-chip-flagged { background: var(--tmb-blue-100); border-style: solid; }
/* a divider between chips (after Consensus, and after the summary chips):
   3px of the muted grey */
.tmb-chips .tmb-chip-divider {
    display: block;
    flex: 0 0 3px;
    align-self: stretch;
    margin: 2px 1px;
    background: var(--tmb-gray-600);
    border-radius: 2px;
    cursor: default;
}
.tmb-chips .tmb-chip-divider td { display: none; }
/* a little air between the summary chips and the books either side */
.tmb-chips .tmb-chip:not(.tmb-chip-sum) + .tmb-chip-sum,
.tmb-chips .tmb-chip-sum + .tmb-chip:not(.tmb-chip-sum) { margin-left: 4px; }

/* the bet slip's Track + (scripts/bet-slip.js): faint until the chip is hovered */
.tmb-chips .tmb-chip .trk-add { opacity: .45; }
.tmb-chips .tmb-chip:hover .trk-add { opacity: 1; }

/* A price that moved on the last refresh: the board marks its cell
   .odds-changed (odds-tracker.js) and the cell flashes yellow behind the
   chip (odds-tracker.css, odds-flash). The chip flashes too, a lighter
   yellow over the same 6 seconds, then goes back to its own background
   (no end frame: the animation hands the chip's colour back). Zach,
   2026-11-01. */
@keyframes tmb-chip-flash {
    0%, 83% { background-color: color-mix(in srgb, var(--tmb-yellow) 22%, #fff); }
}
.tmb-chips .odds-changed > .tmb-chip {
    animation: tmb-chip-flash 6s ease-out;
}