/* static/css/market_gaps.css -- the Market Gaps view (Bill, 2026-10-14; templates/partials/_gaps_view.html,
   static/js/market_gaps_app.js). Linked after main.css and slate.css.

   16px floor: every font-size is a --text-* token. The gap chip is coloured by SIZE only (under 2 points neutral,
   2-5 amber outline, over 5 amber fill): a gap is a disagreement, never a recommendation, so no green or red.
   One markup for every width: a grid row on desktop that reflows to a card at 799px and below. */

#view-gaps { flex:1 1 0; min-height:0; overflow-y:auto; width:100%; box-sizing:border-box; }
.mg-view { padding:4px 0 32px; color:var(--text-primary); }
.mg-intro { margin:0 0 12px; font-size:var(--text-sm); color:var(--text-secondary); max-width:70ch; }
.mg-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.mg-sports { display:flex; gap:6px; flex-wrap:wrap; }
.mg-sport { min-height:40px; padding:6px 14px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:none;
  color:var(--text-secondary); font:inherit; font-size:var(--text-sm); font-weight:600; cursor:pointer; }
.mg-sport:hover { color:var(--text-primary); }
.mg-sport.active { border-color:var(--accent); background:var(--accent-muted); color:var(--accent); }
.mg-count { font-size:var(--text-sm); color:var(--text-muted); }
/* Sorting and filters (2026-10-15): a native select, and the minimum gap as a segmented control like the market switch. */
.mg-sort-label { font-size:var(--text-sm); color:var(--text-secondary); }
.mg-sort { min-height:40px; padding:6px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--bg-card); color:var(--text-primary); font:inherit; font-size:var(--text-sm); }
.mg-filters { display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; }
.mg-filter { min-height:40px; padding:6px 14px; border:0; background:none; color:var(--text-secondary); font:inherit;
  font-size:var(--text-sm); font-weight:600; cursor:pointer; }
.mg-filter + .mg-filter { border-left:1px solid var(--border-strong); }
.mg-filter.active { background:var(--accent-muted); color:var(--accent); }
.mg-filter-reset { min-height:40px; margin-left:8px; padding:6px 14px; border:1px solid var(--border-strong); border-radius:var(--radius-pill);
  background:none; color:var(--text-primary); font:inherit; font-size:var(--text-sm); font-weight:600; cursor:pointer; }
/* The market switch (phase 2): one segmented control, set apart from the sport chips by a divider. */
.mg-markets { display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; }
.mg-market { min-height:40px; padding:6px 14px; border:0; background:none; color:var(--text-secondary); font:inherit;
  font-size:var(--text-sm); font-weight:600; cursor:pointer; }
.mg-market + .mg-market { border-left:1px solid var(--border-strong); }
.mg-market.active { background:var(--accent-muted); color:var(--accent); }
.mg-note { margin:0 0 8px; font-size:var(--text-xs); color:var(--text-muted); }
/* A league whose Sharp is held back until its season opens (market_gaps.js SHARP_FROM, 2026-10-15). */
.mg-held { font-size:var(--text-xs); color:var(--text-muted); }
.mg-held-note { margin:0 0 8px; font-size:var(--text-xs); color:var(--text-secondary); }
.mg-empty { margin:24px 0; font-size:var(--text-base); color:var(--text-secondary); }
.mg-legend { margin:16px 0 0; font-size:var(--text-xs); color:var(--text-muted); }

/* Columns: game, Square, Sharp, Crowd (one line per venue), gap, the side flip. */
.mg-head, .mg-row { display:grid; grid-template-columns:minmax(220px,1.5fr) 96px 96px minmax(190px,1.3fr) minmax(200px,1.2fr) auto;
  column-gap:12px; align-items:center; }
.mg-head { padding:8px 12px; border-bottom:1px solid var(--border-default); font-size:var(--text-xs); color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.04em; }
.mg-row { padding:12px; border-bottom:1px solid var(--border-subtle); cursor:pointer; border-radius:var(--radius-sm); }
.mg-row:hover, .mg-row:focus-visible { background:var(--bg-hover); outline:none; }
.mg-row:focus-visible { box-shadow:0 0 0 2px var(--accent-blue); }
.mg-game { min-width:0; }
.mg-team { font-size:var(--text-base); font-weight:700; }
.mg-opp { font-size:var(--text-sm); color:var(--text-secondary); }
.mg-meta { display:block; margin-top:2px; font-size:var(--text-xs); color:var(--text-muted); }
.mg-k { display:none; }
.mg-v { font-size:var(--text-base); font-weight:600; font-variant-numeric:tabular-nums; }
/* Crowd at the same weight as Square (Kalshi data licence, 2026-10-18: equal prominence). */
.mg-crowd .mg-v { display:flex; flex-direction:column; gap:2px; }
.mg-venue-name { color:var(--text-secondary); font-weight:600; }
.mg-depth { font-size:var(--text-xs); color:var(--text-muted); }
/* A venue under its depth floor (Kalshi < $1k, 2026-10-15): shown, not in the crowd number. Full colour
   with the italic "thin" tag since 2026-10-18 (Bill; Kalshi's data licence asks for equal prominence). */
.mg-venue--thin .mg-venue-name { color:var(--text-secondary); }
.mg-thin { font-size:var(--text-xs); font-style:italic; color:var(--text-muted); }
/* Phase 3: the venue's last-hour move. Neutral on purpose: a move is not good or bad. */
.mg-move { font-size:var(--text-xs); font-weight:600; color:var(--text-secondary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mg-chip { display:inline-block; padding:4px 10px; border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.mg-chip--low { border:1px solid var(--border-strong); color:var(--text-secondary); }
.mg-chip--mid { border:1px solid var(--accent-amber); background:var(--accent-amber-bg); color:var(--accent-amber); }
.mg-chip--high { border:1px solid var(--accent-amber); background:var(--accent-amber); color:#0d1117; }
.mg-off { font-size:var(--text-sm); color:var(--text-muted); }
.mg-row--off .mg-v, .mg-row--off .mg-team { color:var(--text-muted); }
.mg-flip { min-height:40px; padding:6px 10px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:none;
  color:var(--text-secondary); font:inherit; font-size:var(--text-xs); cursor:pointer; white-space:nowrap; }
.mg-flip:hover { color:var(--text-primary); }

/* Narrow desktop and tablet: Crowd and the gap share a column so the grid fits beside the sidebar. */
@media (max-width:1279px) {
  .mg-head, .mg-row { grid-template-columns:minmax(180px,1.4fr) 88px 88px minmax(200px,1.6fr) auto; }
  .mg-head span:nth-child(5) { display:none; }
  .mg-gap { grid-column:4; grid-row:2; margin-top:6px; }
  .mg-flip { grid-column:5; grid-row:1 / span 2; }
}

/* Phones (<=799px, where the bottom nav shows): one card per game. Square and Sharp side by side, the crowd's
   venues on one full-width line (a third of the card wrapped "Poly 64.0% $29k" into a 194px column), then the
   gap and the side flip. */
@media (max-width:799px) {
  .mg-head { display:none; }
  .mg-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; row-gap:8px; padding:14px 12px;
    border:1px solid var(--border-default); margin-bottom:10px; background:var(--bg-card); }
  .mg-game { grid-column:1 / -1; }
  .mg-k { display:block; font-size:var(--text-xs); color:var(--text-muted); }
  .mg-square { grid-column:1; grid-row:2; }
  .mg-sharp { grid-column:2; grid-row:2; }
  .mg-crowd { grid-column:1 / -1; grid-row:3; }
  .mg-crowd .mg-v { flex-direction:row; flex-wrap:wrap; column-gap:16px; }
  .mg-gap { grid-column:1; grid-row:4; margin-top:0; align-self:center; }
  .mg-flip { grid-column:2; grid-row:4; justify-self:end; }
}