/* Shared Bid Market styling — SINGLE SOURCE for the homepage (/) and the
   /get-paid installer page. Markup: _bid_market.html. Behaviour: market.js.
   Relies on the host page's CSS custom properties (--accent, --accent-dark,
   --accent2, --accent-soft, --line, --line-strong, --muted, --faint, --ink,
   --blue, --mono, --shadow-soft). Both pages define these in :root. */
.market-card{position:relative;overflow:hidden;background:rgba(255,255,255,.88);border:1px solid var(--line-strong);border-radius:22px;padding:30px;box-shadow:var(--shadow-soft);backdrop-filter:blur(18px)}
.market-card:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
/* Thin header row: brand eyebrow on the left, chart range toggle on the right.
   The live KPIs moved into the stat bar (.market-stats) below. */
.market-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
/* Component-scoped label so the shared partial doesn't depend on a page's
   global .tag class (which other elements on the homepage also use). */
.market-tag{font-size:11px;font-weight:760;letter-spacing:.075em;text-transform:uppercase;color:var(--blue);margin:0}
.range-toggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;background:#fff;overflow:hidden}
.range-toggle button{border:0;background:none;font:inherit;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:5px 12px;cursor:pointer;transition:background .12s ease,color .12s ease}
.range-toggle button+button{border-left:1px solid var(--line)}
.range-toggle button:hover{color:var(--ink)}
.range-toggle button.on{background:var(--accent-soft);color:var(--accent-dark)}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 3px rgba(56,196,107,.18)}50%{box-shadow:0 0 0 6px rgba(56,196,107,.30)}}
/* Stat bar: a single row of equal-sized KPI tiles across the top of the chart
   (market price · impressions/hr fleet-wide · ads live · campaigns bidding).
   Each .mstat is the same shape — uppercase label, big tabular value, sub. */
.market-stats{display:flex;gap:12px;margin-bottom:18px}
.mstat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px;padding:14px 16px;background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:14px}
.mstat-l{font-size:10px;font-weight:760;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstat-v{font-size:26px;font-weight:760;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;display:flex;align-items:center;gap:8px}
.mstat-s{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstat-dot{width:9px;height:9px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 3px rgba(56,196,107,.18);animation:pulse-glow 2s ease-in-out infinite;flex:none}
@media(prefers-reduced-motion:reduce){.mstat-dot{animation:none}}
.chart-wrap{position:relative;height:224px;margin-bottom:20px}
.market-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.market-tbl thead th{text-align:left;padding:8px 10px;font-size:10px;font-weight:760;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);border-bottom:2px solid var(--line);white-space:nowrap}
.market-tbl thead th:last-child{text-align:right}
.market-tbl tbody td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left}
.market-tbl tbody tr:last-child td{border-bottom:none}
.market-tbl tbody tr.live-row{background:rgba(24,138,69,.04)}
.market-tbl .rank-cell{font-weight:760;color:var(--faint);width:30px}
.market-tbl .name-cell{max-width:360px;white-space:nowrap}
.market-tbl .campaign-fav{width:16px;height:16px;border-radius:4px;margin-right:8px;vertical-align:middle;object-fit:contain;flex:none}
.market-tbl .campaign-name{display:inline-block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;color:inherit;text-decoration:none}
.market-tbl a.campaign-name:hover{color:var(--accent);text-decoration:underline}
.market-tbl a.campaign-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.market-tbl .ext-glyph{display:inline-block;margin-left:5px;font-size:11px;line-height:1;color:var(--faint);vertical-align:middle;transition:color .15s ease}
.market-tbl a.campaign-name:hover + .ext-glyph,.market-tbl a.campaign-name:focus-visible + .ext-glyph{color:var(--accent)}
.market-tbl .campaign-count{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:5px;background:var(--line);color:var(--faint);font-size:10px;font-weight:760;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.market-tbl .bid-cell{font-weight:760;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.market-tbl .imp-cell{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.market-tbl .imp-cell .imp-bar{display:inline-block;width:48px;height:5px;background:var(--line);border-radius:3px;vertical-align:middle;margin-left:6px;overflow:hidden}
.market-tbl .imp-cell .imp-fill{display:block;height:100%;background:var(--accent);border-radius:3px}
.market-tbl .time-cell{color:var(--faint);white-space:nowrap}
.market-empty{text-align:center;padding:24px;color:var(--muted);font-size:14px}
@media(max-width:620px){
  .market-card{padding:20px}
  .market-hd{gap:10px}
  /* Stat bar reflows to a 2×2 grid so the tiles stay readable, not squashed. */
  .market-stats{flex-wrap:wrap}
  .market-stats .mstat{flex:1 1 calc(50% - 6px)}
  .mstat{padding:12px 13px}
  .mstat-v{font-size:21px}
  .chart-wrap{height:150px}
  /* The full "Dollars per 1,000 impressions" header can't sit on one line on a
     phone — let it wrap rather than force the table past the viewport. */
  .market-tbl thead th:last-child{white-space:normal}
  .market-tbl .campaign-name{max-width:46vw}
}