/*
 * /polymarket/card-engine.css — the board's own styles, for the public front page.  Opus 5.5, 2026-10-19.
 * GENERATED by build/tools/build_premium.js from /polymarket/premium.html. Do not edit: edit the board and rerun.
 * INTENDED BEHAVIOUR (BRIEF-PREMIUM F2)
 *  C1 Everything below the BODY line is byte-identical to the premium.html style slice between
 *     PM_CARD_CSS START and PM_CARD_CSS END (markers included). tests/test_engine_slice.js checks it.
 */
/* ===== PM_CARD_CSS BODY ===== */
/* ===== PM_CARD_CSS START ===== */
  :root {
    --bg: #0f1115;
    --panel: #161a22;
    --panel-2: #1c2230;
    --border: #2a3142;
    --text: #e8ecf3;
    --muted: #8a93a5;
    --accent: #4c8bf5;
    --chip-neutral-bg: #232a3a;
  }
  html[data-theme="light"] {
    --bg: #f3efe8;
    --panel: #fffaf3;
    --panel-2: #efe8dc;
    --border: #d4cdc2;
    --text: #1a1208;
    --muted: #5c564e;
    --accent: #2f6fdb;
    --chip-neutral-bg: #e7e0d4;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg); color: var(--text);
    font-size: 14px; -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  header { padding: 20px 24px 12px; }
  h1 { margin: 0; font-size: clamp(44px, 5vw, 72px); font-weight: 900; line-height: 1.05; letter-spacing: -0.045em; }
  .sub {
    color: var(--muted); margin-top: 6px; font-size: 0.9em;
    line-height: 1.5; max-width: 900px;
  }
  .sub code {
    background: var(--panel-2); padding: 1px 6px; border-radius: 3px;
    font-family: 'JetBrains Mono', Consolas, monospace; font-size: 0.92em;
  }

  /* === controls === */
  .controls {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 12px 24px; background: var(--panel);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
  }
  .controls label { color: var(--muted); font-size: 0.85em; }
  .controls input[type=search], .controls select, .controls button {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 10px; font-family: inherit; font-size: 0.9em;
  }
  .controls input[type=search] { min-width: 260px; }
  .controls button { cursor: pointer; }
  .controls button:hover { background: var(--border); }
  .controls a.favtapes-link { color: var(--accent); font-size: 0.9em; text-decoration: none; padding: 0 4px; white-space: nowrap; }
  .controls a.favtapes-link:hover { text-decoration: underline; }
  /* 2026-09-27 (owner 19:26 KST "at the very bottom of favorites view should be a button to live
     positions tapes"): one large full-width link after the last starred card, favorites view only. */
  a.favtapes-bottom { display: block; box-sizing: border-box; width: 100%; margin: 18px 0 28px; padding: 16px 18px;
    border-radius: 10px; background: var(--accent); color: #fff; text-align: center; text-decoration: none;
    font-size: 17px; font-weight: 700; line-height: 1.3; }
  a.favtapes-bottom:hover { filter: brightness(1.08); text-decoration: underline; }
  a.favtapes-bottom:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
  a.favtapes-bottom[hidden] { display: none; }
  /* 2026-10-25 (owner 02:48 KST "should have 2 buttons at bottom"): Back to full board
     next to the live-tapes link, favorites view only. */
  .fav-bottom-row { display: flex; gap: 12px; align-items: stretch; margin: 18px 0 28px; }
  .fav-bottom-row[hidden] { display: none; }
  .fav-bottom-row > a { flex: 1 1 0; min-width: 0; margin: 0; width: auto; }
  a.favback-bottom { display: block; box-sizing: border-box; padding: 16px 18px;
    border-radius: 10px; background: transparent; color: var(--text); text-align: center; text-decoration: none;
    font-size: 17px; font-weight: 700; line-height: 1.3; border: 1px solid var(--border); }
  a.favback-bottom:hover { filter: brightness(1.08); text-decoration: underline; background: var(--panel-2); }
  a.favback-bottom:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
  a.favback-bottom[hidden] { display: none; }
  @media (max-width: 480px) {
    .fav-bottom-row { flex-direction: column; }
    .fav-bottom-row > a { width: 100%; flex: 1 1 auto; }
  }
  .sport-checks { display: flex; flex-wrap: wrap; gap: 4px; max-width: 600px; }
  .sport-checks label {
    background: var(--panel-2); padding: 3px 8px; border-radius: 4px;
    cursor: pointer; font-size: 0.82em; color: var(--text);
    display: inline-flex; align-items: center; gap: 4px;
  }
  .sport-checks input[type=checkbox] { margin: 0; cursor: pointer; }
  .pill {
    background: var(--panel-2); padding: 4px 10px; border-radius: 12px;
    font-size: 0.8em; color: var(--muted);
  }
  .pill strong { color: var(--text); margin-left: 4px; }

  /* === card grid === */
  #cardGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
    grid-auto-rows: min-content;
    align-items: start;
    gap: 10px;
    padding: 16px 24px 60px; max-width: 1600px; margin: 0 auto;
  }
  #cardGrid > .empty-state,
  #cardGrid > .pm-loading,
  #cardGrid > .color-section-head,
  #cardGrid > .load-more { grid-column: 1 / -1; }
  /* Section headers (F4 cohort sort, F6 gap-tier sort). Cohort sections carry the cohort
     colour (cherry SUPERFAV / lime Blue Body / lemon No blue); gap-tier sections are neutral. */
  .color-section-head {
    display: flex; align-items: baseline; gap: 12px;
    padding: 9px 14px; margin: 14px 0 2px; border-radius: 6px;
    border-left: 5px solid var(--border); background: var(--panel);
  }
  .color-section-head:first-child { margin-top: 0; }
  .color-section-head .cs-label { font-weight: 800; letter-spacing: 0.06em; font-size: 0.95em; }
  .color-section-head .cs-sub   { color: var(--muted); font-size: 0.8em; }
  .color-section-head .cs-count { margin-left: auto; color: var(--muted); font-size: 0.85em; font-weight: 700; }
  .color-section-head.cs-superfav { border-left-color: var(--co-superfav); }
  .color-section-head.cs-superfav .cs-label {
    background: var(--co-superfav); color: var(--co-superfav-ink);
    padding: 2px 8px; border-radius: 4px;
  }
  .color-section-head.cs-bluebody { border-left-color: var(--co-bluebody); }
  .color-section-head.cs-bluebody .cs-label {
    background: var(--co-bluebody); color: var(--co-ink);
    padding: 2px 8px; border-radius: 4px;
  }
  .color-section-head.cs-noblue   { border-left-color: var(--co-noblue); }
  .color-section-head.cs-noblue   .cs-label {
    background: var(--co-noblue); color: var(--co-ink);
    padding: 2px 8px; border-radius: 4px;
  }
  .color-section-head.cs-none   { border-left-color: #4a5268; }
  .color-section-head.cs-none   .cs-label { color: var(--muted); }
  /* F6 gap-tier sections: neutral, never a fruit colour. */
  .color-section-head.cs-tier   { border-left-color: var(--muted); }
  .color-section-head.cs-tier   .cs-label {
    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
    padding: 2px 8px; border-radius: 4px;
  }
  /* Within-sport-only disclaimer band, shown above the grid. */
  .gap-scope-note {
    max-width: 1600px; margin: 4px auto 0; padding: 9px 24px;
    color: var(--muted); font-size: 0.82em; line-height: 1.45;
  }
  .gap-scope-note strong { color: var(--text, #e6e9ef); }
  /* F5 neutral gap-tier tag (card, legend, scope note). Never a fruit colour. */
  .pm-tier-tag {
    display: inline-block; padding: 0 6px; border-radius: 3px;
    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
    font-family: 'JetBrains Mono', Consolas, monospace; font-size: 0.72em; font-weight: 700;
    letter-spacing: 0.02em; line-height: 1.45; white-space: nowrap;
  }
  .mc-score .pm-tier-tag { margin-top: 2px; }
  /* F14/F15 INCOMPLETE — a small neutral tag (red/orange are reserved for aspect relationships). */
  .pm-inc-tag {
    display: inline-block; padding: 0 6px; border-radius: 3px; margin-top: 2px;
    background: transparent; color: var(--text); border: 1px dashed var(--muted);
    font-family: 'JetBrains Mono', Consolas, monospace; font-size: 0.66em; font-weight: 800;
    letter-spacing: 0.06em; line-height: 1.45; white-space: nowrap;
  }
  .pm-inc-block {
    margin: 0 0 10px; padding: 7px 10px; border: 1px dashed var(--muted); border-radius: 6px;
    font-size: 0.85em; line-height: 1.45; color: var(--text);
  }
  .pm-inc-block .pm-inc-tag { margin: 0 0 4px; font-size: 0.78em; }
  .pm-inc-block .pm-inc-line { white-space: normal; overflow-wrap: anywhere; }
  /* N4/N5/N7 NO BET — ribbon centred on the score slot top border; out of flow. */
  .pm-nobet-tag {
    position: absolute; top: -0.7em; left: 50%; transform: translateX(-50%); z-index: 3;
    display: inline-block; padding: 0 6px; border-radius: 3px; margin-top: 0;
    background: var(--panel-2); color: var(--text); border: 1px dashed var(--muted);
    font-family: 'JetBrains Mono', Consolas, monospace; font-size: 0.66em; font-weight: 800;
    letter-spacing: 0.06em; line-height: 1.2; white-space: nowrap; cursor: help;
  }
  .mc-score .mc-gap-big.pm-nobet { color: #8a8f98; }
  html[data-theme="light"] .mc-score .mc-gap-big.pm-nobet { color: #6b7079; }
  .pm-nobet-line {
    margin: 0 0 8px; font-size: 0.85em; line-height: 1.45; color: var(--muted);
    font-weight: 700;
  }
  .pm-page-foot {
    text-align: right; padding: 8px 24px 16px;
    font-size: 11px; color: var(--muted); opacity: 0.7;
  }
  .empty-state {
    padding: 60px 20px; text-align: center; color: var(--muted);
    background: var(--panel); border-radius: 8px;
  }
  /* big animated loading spinner — makes it obvious the page is working, not frozen */
  .pm-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; padding: 90px 20px; color: var(--muted);
  }
  .pm-spinner {
    width: 84px; height: 84px; border: 8px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%;
    animation: pmspin 0.85s linear infinite;
  }
  @keyframes pmspin { to { transform: rotate(360deg); } }
  /* W57 — spinning glyph for the Refresh-lineups button while a fetch is in flight */
  .pm-spin { display: inline-block; animation: pmspin 0.8s linear infinite; }
  .pm-loading-txt { font-size: 1.1em; font-weight: 600; letter-spacing: 0.02em; }
  .pm-loading-txt.err { color: #ff6b6b; }
  .load-more { text-align: center; padding: 16px; }
  .load-more button {
    background: var(--accent); color: white; border: none;
    padding: 10px 24px; border-radius: 6px; cursor: pointer;
    font-family: inherit; font-size: 0.95em;
  }

  /* === match card === */
  .match-card {
    position: relative;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; transition: border-color 0.15s;
  }
  .match-card.pm-new-gas { background: #342f2b; }
  .match-card:hover { border-color: #3a4258; }
  .match-card.open { border-color: var(--accent); }
  .mc-head, .mc-drill { position: relative; z-index: 1; }
  .mc-fav-wm {
    position: absolute; left: 0; top: 0; bottom: 0;
    display: flex; align-items: center;
    overflow: hidden; z-index: 0;
    pointer-events: none; user-select: none;
    opacity: 0.40; font-weight: 900; text-transform: uppercase;
    letter-spacing: -0.05em; line-height: 1; white-space: nowrap;
    font-family: inherit; max-width: calc(100% - 8.5rem);
    font-size: 4.4em;
  }
  .mc-fav-wm.won { color: #16a34a; }
  .mc-fav-wm.lost { color: #dc2626; }
  html[data-theme="light"] .mc-fav-wm.won { color: #16a34a; }
  html[data-theme="light"] .mc-fav-wm.lost { color: #dc2626; }
  /* The card border/glow colour comes from the COHORT only (F3, .match-card.pm-co.co-* below);
     the percentile tier no longer paints the card. */

  /* Loud fetch banner — sticky-top so it can't be missed. Populated by
     pmShowBanner() when gviz live fetch fails. err/warn/ok kinds. */
  .pm-fetch-banner {
    position: sticky; top: 0; z-index: 4000;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; font-size: 13px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #fff; background: #c92a2a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .pm-fetch-banner.warn { background: #d97706; }
  .pm-fetch-banner.ok   { background: #16a34a; }
  .pm-fetch-banner code {
    background: rgba(0,0,0,0.25); padding: 1px 6px;
    border-radius: 3px; font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
  }
  .pm-fetch-banner button {
    background: rgba(255,255,255,0.2); color: inherit;
    border: 1px solid rgba(255,255,255,0.4); border-radius: 3px;
    padding: 4px 10px; cursor: pointer; font-size: 12px; font-family: inherit;
  }
  .pm-fetch-banner button:hover { background: rgba(255,255,255,0.35); }

  /* REQ-3.A — LARGE staleness alert. Impossible to miss. Fires when the data
     hasn't refreshed in >8h (cron should run several×/day) or when no game
     falls in the 0–72h-future window. See PROJECT_REQUIREMENTS REQ-3.A. */
  .pm-stale-alert {
    position: sticky; top: 0; z-index: 5000;
    padding: 22px 24px; text-align: center;
    font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #fff;
    background: repeating-linear-gradient(45deg,#b91c1c,#b91c1c 18px,#7f1d1d 18px,#7f1d1d 36px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.55); border-bottom: 3px solid #fecaca;
  }
  .pm-stale-alert .big  { font-size: 22px; font-weight: 800; letter-spacing: .3px; }
  .pm-stale-alert .sub2 { font-size: 14px; margin-top: 6px; opacity: .95; }
  .pm-stale-alert code  { background: rgba(0,0,0,.3); padding: 1px 6px; border-radius: 3px;
                          font-family: 'JetBrains Mono', monospace; }

  .mc-head {
    display: grid; grid-template-columns: auto 1fr auto auto;
    gap: 10px; align-items: center; padding: 9px 12px; cursor: pointer;
  }
  .mc-sport-tag {
    background: var(--chip-neutral-bg); color: var(--muted); padding: 3px 9px;
    border-radius: 4px; font-size: 0.72em; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .mc-title-wrap { min-width: 0; }
  .mc-title {
    font-weight: 600; font-size: 1.0em; line-height: 1.3;
    overflow-wrap: anywhere; word-break: break-word;
  }
  .mc-sub {
    color: var(--muted); font-size: 0.82em; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mc-til { color: var(--accent); font-weight: 600; }
  /* W57.2 — the predicted-winning side, highlighted bright yellow inside the title */
  .mc-win { color: #ffe600; }

  /* Score colored by absolute gap percentile.
     Default = white (text color). Order of x:y is arbitrary — gap MAGNITUDE matters. */
  .mc-score {
    font-family: 'JetBrains Mono', Consolas, monospace;
    padding: 5px 12px; border-radius: 6px;
    background: var(--panel-2); color: var(--text);
    white-space: nowrap;
    display: flex; flex-direction: column; align-items: center;
    gap: 1px; line-height: 1.15;
    position: relative;
  }
  .mc-score.mc-gap-time-orange { background: #8b3a0a; }
  /* Giant gap-total — the headline figure, ~3× the .mc-title (1.0em). Magnitude
     only; the score line + highlighted winner below show WHICH side leads. Its
     plain-language meaning appears on hover AND click/tap (see pm-gap-pop). */
  .mc-score .mc-gap-big {
    font-size: clamp(1.9em, 7vw, 3.1em);
    font-weight: 800; line-height: 0.95;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
    color: var(--text); cursor: help;
  }
  /* N13 race headline — highest competitor score, bright blue. NO BET grey wins. */
  .mc-score .mc-gap-big.pm-race-top { color: #2f9bff; }
  html[data-theme="light"] .mc-score .mc-gap-big.pm-race-top { color: #085fc0; }
  .mc-score .mc-gap-big.pm-race-top.pm-nobet { color: #8a8f98; }
  html[data-theme="light"] .mc-score .mc-gap-big.pm-race-top.pm-nobet { color: #6b7079; }
  .mc-score .mc-gap-big:hover,
  .mc-score .mc-gap-big:focus-visible { outline: none; filter: brightness(1.18); }
  /* The gap number is never painted by its percentile tier; the tier is a neutral text tag (F5). */
  /* YAY/NAY — did the tp favorite actually win? Sits above the gap sum. */
  .mc-verdict { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-align: center; line-height: 1.1; }
  .mc-verdict.yay { color: #86efac; }
  .mc-verdict.nay { color: #ff6b6b; }
  /* Secondary now — the two side scores sit UNDER the giant gap; winner still
     highlighted via .mc-win. */
  .mc-score .teams { font-size: 0.9em; font-weight: 700; color: var(--muted); }
  /* Pending/partial take the SAME slot, prominent but clearly NOT a number. */
  .mc-score .score-state-big {
    font-size: 0.92em; font-weight: 800; letter-spacing: 0.04em;
    padding: 5px 11px; border-radius: 5px; white-space: nowrap;
    text-transform: uppercase; text-align: center;
  }
  .mc-score .score-state-big.partial { background: #3a2f00; color: #fbbf24; }
  .mc-score .score-state-big.pending { background: #2a2a2a; color: #9ca3af; }
  /* Plain-language gap popover (hover + click/tap). Appended to <body>. */
  .pm-gap-pop {
    position: absolute; z-index: 9999; max-width: 300px;
    background: #0f1420; color: #e6e8ee; border: 1px solid #2a3550;
    border-radius: 7px; padding: 9px 11px;
    font-size: 12.5px; line-height: 1.5; font-weight: 400; white-space: normal;
    box-shadow: 0 8px 26px rgba(0,0,0,0.55);
  }
  /* legacy .gap rules kept harmless in case any cached markup still references it */
  .mc-score .gap { font-size: 0.78em; font-weight: 600; color: var(--muted); }

  /* LONGSHOT badge — algo picked the lower-ranked side */
  .ls-badge {
    display: inline-block; padding: 2px 7px; border-radius: 3px;
    font-size: 0.72em; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; margin-left: 6px; vertical-align: middle;
    white-space: nowrap;
  }
  .ls-badge.longshot      { background: #2e1065; color: #ddd6fe; border: 1px solid #7c3aed; }
  .ls-badge.deep_longshot { background: #1e1b4b; color: #c7d2fe; border: 1px solid #4338ca; }
  /* PARALLEL body-signal badge (outright blue-vs-red BODY pairing). Deliberately
     styled DISTINCT from the cohort cherry/lime/lemon so it can never be mistaken for
     a cohort colour — a blue→red split pill with its own ⚡ mark. */
  .body-sig-badge {
    display: inline-block; padding: 2px 7px; border-radius: 3px;
    font-size: 0.72em; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; margin-left: 6px; vertical-align: middle;
    white-space: nowrap; color: #fff;
    background: linear-gradient(90deg, #2563eb 0 50%, #dc2626 50% 100%);
    border: 1px solid #7c86a0;
  }
  .rank-detail {
    color: var(--muted); font-size: 0.82em;
    font-family: 'JetBrains Mono', monospace;
  }
  .rank-detail b { color: var(--text); }

  /* Stacked first column: Google G on top, sport tag below */
  .mc-tag-col {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
  }
  .goog-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 2px;
    border-radius: 4px; opacity: 0.9;
    text-decoration: none; cursor: pointer;
  }
  .goog-link:hover { opacity: 1; background: rgba(255,255,255,0.1); }
  .goog-link svg { width: 18px; height: 18px; display: block; }
  /* Betexec tiles: total-P&L badge in the G-icon slot ('nb' when no bet was placed). */
  .mc-pnl-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
    line-height: 1; padding: 4px 4px; border-radius: 4px; white-space: nowrap;
  }
  /* Real P&L reads BIGGER than the card title (title = 1.0em ≈ 14px); wins green, losses red.
     'nb' / 'open' markers stay small and muted. */
  .mc-pnl-badge.up  { color: #86efac; background: rgba(134,239,172,0.12); font-size: 17px; padding: 5px 6px; text-align: center; }
  .mc-pnl-badge.dn  { color: #fca5a5; background: rgba(252,165,165,0.12); font-size: 17px; padding: 5px 6px; text-align: center; }
  .mc-pnl-badge.nbn { color: var(--text-dim, #8a94a3); background: rgba(255,255,255,0.06); }
  /* $ on top (big), % under it (smaller) — both always shown for bet tiles */
  .mc-pnl-badge b { display: block; font-weight: 700; }
  .mc-pnl-badge i { display: block; font-style: normal; font-size: 11px; opacity: .85; margin-top: 2px; }
  .roster-link {
    display: inline-block; padding: 1px 5px;
    border-radius: 3px; opacity: 0.85;
    text-decoration: none; cursor: pointer; vertical-align: middle;
    color: #8acafd; font-size: 0.72em; font-weight: 700;
    font-family: 'JetBrains Mono', Consolas, monospace;
    background: rgba(76, 139, 245, 0.12); border: 1px solid rgba(76, 139, 245, 0.35);
    line-height: 1.2; margin-left: 4px;
  }
  .roster-link:hover { opacity: 1; background: rgba(76, 139, 245, 0.22); }
  .pred-copy-btn {
    font: inherit; font-size: 0.6em; font-weight: 700; letter-spacing: 0.04em;
    background: rgba(76,139,245,0.12); color: #4c8bf5;
    border: 1px solid rgba(76,139,245,0.4); border-radius: 3px;
    padding: 1px 5px; margin-left: 5px; cursor: pointer; vertical-align: middle;
  }
  .pred-copy-btn:hover { background: rgba(76,139,245,0.28); color: #fff; }

  .pm-market-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 5px; vertical-align: middle; border-radius: 4px; }
  .pm-market-link:hover, .pm-market-link:focus-visible { background: rgba(76,139,245,0.25); outline: 1px solid #4c8bf5; }
  .pm-market-link img { display: block; width: 18px; height: 18px; border-radius: 3px; }

  /* compact button stack: POSTER on top, copy-link button directly under it (D7) */
  .mc-btn-col { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .mc-link-btn {
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    font-size: 0.70em; font-weight: 700; letter-spacing: 0.04em; line-height: 1; cursor: pointer; padding: 4px 8px;
    border-radius: 6px; text-align: center; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    transition: border-color 0.15s, color 0.15s;
  }
  .mc-link-btn svg { display: block; width: 1.1em; height: 1.1em; flex: none; }
  .mc-link-btn:hover, .mc-link-btn:focus-visible { border-color: var(--accent); color: #fff; }
  .mc-link-btn.copied { border-color: #16a34a; color: #86efac; }
  .mc-odds-row { display: flex; gap: 4px; }
  .mc-odds-row .mc-odds-link { flex: 1 1 auto; }
  .match-card.pm-deep-flash { outline: 3px solid var(--accent); outline-offset: 2px; animation: pm-deep-flash 2.5s ease-out forwards; }
  @keyframes pm-deep-flash { 0%,60% { outline-color: var(--accent); } 100% { outline-color: transparent; } }
  .pm-deep-note { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 0.9em; }
  .pm-deep-note a { color: var(--accent); margin-left: 8px; }
  .mc-odds-link { display: block; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 0.8em; text-align: center; text-decoration: none; }
  .mc-odds-link:hover { border-color: var(--accent); color: #fff; }

  /* per-tile social-poster PNG button */
  .mc-poster-btn {
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    font-size: 0.70em; font-weight: 700; letter-spacing: 0.04em;
    cursor: pointer; padding: 4px 8px; border-radius: 6px;
    white-space: nowrap; transition: all 0.15s;
  }
  .mc-poster-btn:hover { color: #fff; border-color: var(--accent); background: rgba(76,139,245,0.18); }
  @media (max-width: 560px) { .mc-poster-btn { font-size: 0.62em; padding: 3px 6px; } }

  /* Save-card star (top-right corner of each card). Outline = unsaved, filled
     amber = saved. Stays visible on mobile (unlike the collapse toggle). */
  .mc-save-btn {
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    cursor: pointer; padding: 2px 6px; border-radius: 6px; line-height: 1;
    font-size: 1.0em; transition: all 0.15s; align-self: stretch;
  }
  .mc-save-btn:hover { color: #ffd34d; border-color: #ffd34d; background: rgba(255,211,77,0.12); }
  .mc-save-btn.saved { color: #ffd34d; border-color: rgba(255,211,77,0.5); }
  /* "★ Favorites (N)" board toggle (was "Saved (N)") — active when the saved view is showing. */
  .savedview-btn.active { background: #2a3550 !important; color: #fff !important; border-color: var(--accent) !important; }
  /* Subtle "saved <rel time>" line inside a saved card's sub-row. */
  .mc-saved-note { color: #ffd34d; font-weight: 600; }
  /* "*betexecuted (N)" board toggle — green accent (real money placed). */
  .betexec-btn { color: #86efac; border-color: rgba(134,239,172,0.4); }
  .betexec-btn.active { background: #16351f !important; color: #bbf7d0 !important; border-color: #86efac !important; }
  /* Subtle "bot: N bets @ odds X · P&L Y%" line inside a betexecuted card. */
  .mc-betexec-note { color: #86efac; font-weight: 600; }
  /* tpfav odds-range line under the bot: line — own row, big enough to read at a glance */
  .mc-betexec-odds { color: #e2e8e4; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; display: block; margin-top: 2px; }
  /* Remove (×) control on a betexecuted card. */
  .mc-betexec-rm {
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    cursor: pointer; padding: 2px 7px; border-radius: 6px; line-height: 1;
    font-size: 1.0em; transition: all 0.15s; align-self: stretch;
  }
  .mc-betexec-rm:hover { color: #fca5a5; border-color: #fca5a5; background: rgba(252,165,165,0.12); }

  /* === *betexecuted view control strip (filter chips + sort) ===
     Shown ONLY while the *betexecuted view is active (JS toggles display).
     Mirrors .controls styling; green accent matches the real-money theme. */
  .betexec-strip {
    padding: 9px 24px; background: var(--panel);
    border-bottom: 1px solid var(--border);
  }
  .bx-strip-inner {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    max-width: 1600px; margin: 0 auto;
  }
  .bx-lbl { color: var(--muted); font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; }
  .bx-chip {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 14px;
    padding: 4px 11px; font-family: inherit; font-size: 0.82em; cursor: pointer;
    transition: all 0.15s; white-space: nowrap; line-height: 1.2;
  }
  .bx-chip:hover { border-color: rgba(134,239,172,0.5); }
  .bx-chip b { color: var(--muted); font-weight: 600; margin-left: 4px; }
  .bx-chip.active { background: #16351f; color: #bbf7d0; border-color: #86efac; }
  .bx-chip.active b { color: #86efac; }
  .bx-sep { width: 1px; align-self: stretch; min-height: 20px; background: var(--border); margin: 0 5px; }
  .bx-sort, .bx-dir {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 5px 8px; font-family: inherit; font-size: 0.82em; cursor: pointer;
  }
  .bx-dir { padding: 5px 10px; min-width: 34px; text-align: center; }
  .bx-sort:hover, .bx-dir:hover { border-color: rgba(134,239,172,0.5); }

  /* === time-display toggle (UTC ↔ Local) === */
  .tz-toggle { display: inline-flex; align-items: center; gap: 4px; }
  .tz-toggle-btn {
    background: var(--bg2);
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.5px;
  }
  .tz-toggle-btn:hover { background: var(--border); color: var(--text); }
  .tz-toggle-btn.active {
    background: #4ea1ff;
    border-color: #4ea1ff;
    color: #0b0d10;
  }

  /* === drilldown time block (precise + UTC + local + live countdown) === */
  .drill-time-block {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 4px 14px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #1f2533;
    border-radius: 6px;
    border-left: 3px solid #4ea1ff;
    align-items: baseline;
  }
  .drill-time-block.is-past {
    border-left-color: #6c7585;
    opacity: 0.92;
  }
  .dtb-row { display: contents; }
  .dtb-label {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8a96a8;
    font-weight: 600;
    align-self: center;
  }
  .dtb-val {
    font-family: 'JetBrains Mono', monospace;
    color: #d8dee9;
    font-size: 0.88em;
  }
  .dtb-offset {
    color: #6c7585;
    font-size: 0.92em;
    margin-left: 0;
  }
  .dtb-countdown .dtb-val {
    color: #4ad27a;
    font-weight: 700;
    font-size: 1.0em;
  }
  .dtb-countdown.is-past .dtb-val {
    color: #6c7585;
    font-weight: 500;
  }

  /* === drilldown === */
  .mc-drill { padding: 0; }
  .match-card.open .mc-drill { padding: 4px 16px 16px; border-top: 1px solid var(--border); }

  .side-summaries {
    display: grid; grid-template-columns: 1fr;  /* stack in narrow grid cells */
    gap: 8px;
    margin: 12px 0 18px;
  }
  .side-summary { background: var(--panel-2); padding: 10px 14px; border-radius: 6px; }
  .side-name {
    font-weight: 600; display: flex; justify-content: space-between;
    border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 6px;
  }
  .side-total { font-family: 'JetBrains Mono', monospace; font-size: 1.05em; }
  .side-summary ul { list-style: none; padding: 0; margin: 0; }
  .side-summary li {
    display: grid; grid-template-columns: 1fr auto auto;
    gap: 8px; padding: 3px 0; font-size: 0.88em;
  }
  .side-summary .role { color: var(--muted); font-size: 0.82em; }
  .side-summary .num { font-family: monospace; min-width: 36px; text-align: right; }
  .side-summary .raw { color: var(--muted); font-size: 0.78em; min-width: 90px; text-align: right; }
  .key-flag { color: var(--accent); font-size: 0.9em; }
  .rank-chip {
    display: inline-block; padding: 0 5px; border-radius: 3px;
    font-family: 'JetBrains Mono', monospace; font-size: 0.75em;
    background: #1a222d; color: var(--muted); margin-left: 2px;
    vertical-align: middle;
  }
  .rank-chip.rank-outside { background: #3a2a14; color: #e0a96b; }
  .rank-chip.rank-team { background: #1d2b3a; color: #94c2ff; }
  /* ===== Lineup-status badges =====
     Applied to every hinge player (QB / pitcher / goalie / etc.) so you never
     see a player name without knowing whether it's confirmed or a default. */
  .fresh-badge {
    display: inline-block; padding: 1px 6px; border-radius: 2px;
    font-family: var(--font, monospace); font-size: 9px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; margin-left: 4px;
    vertical-align: middle; cursor: help;
  }
  .fresh-badge.fresh-ok      { background: rgba(34,197,94,0.18);  color: #22c55e; border: 1px solid rgba(34,197,94,0.4); }
  .fresh-badge.fresh-bad     { background: rgba(239,83,80,0.20);  color: #ef5350; border: 1px solid rgba(239,83,80,0.5); animation: pulseBad 2.5s ease-in-out infinite; }
  .fresh-badge.fresh-warn    { background: rgba(251,191,36,0.20); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }
  .fresh-badge.fresh-unknown { background: rgba(125,133,144,0.15);color: #9aa6bc; border: 1px solid rgba(125,133,144,0.3); }
  @keyframes pulseBad {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,83,80,0.35); }
    50%     { box-shadow: 0 0 0 4px rgba(239,83,80,0); }
  }
  /* Tile-level status chip — surfaces the same info in the card head so you
     can scan the grid and instantly see which games have placeholder data. */
  .mc-status {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 3px;
    font-family: var(--font, monospace); font-size: 10px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; cursor: help;
  }
  .mc-status-ok   { background: rgba(34,197,94,0.16);  color: #22c55e; border: 1px solid rgba(34,197,94,0.36); }
  .mc-status-bad  { background: rgba(239,83,80,0.20);  color: #ef5350; border: 1px solid rgba(239,83,80,0.5); animation: pulseBad 2.5s ease-in-out infinite; }
  .mc-status-warn { background: rgba(251,191,36,0.18); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }
  .mc-status-tbd  { background: rgba(125,133,144,0.14);color: #9aa6bc; border: 1px solid rgba(125,133,144,0.3); }
  /* PCHRONLY (USER 2026-08-04) — pitchers-only pre-lineup MLB card. Violet so it
     reads as "early / provisional", never as an error state. */
  .mc-pchronly    { background: rgba(167,139,250,0.16); color: #a78bfa; border: 1px solid rgba(167,139,250,0.45); font-weight: 700; letter-spacing: 0.04em; }
  /* Lead time inside the PCHRONLY chip. A probable 7 days out is genuinely less
     certain than one 2 hours out, so the distance is shown ON the chip rather
     than hidden behind the binary. Dimmer than the label — it qualifies it. */
  .mc-pchronly .mc-lead { opacity: 0.72; font-weight: 600; letter-spacing: 0; margin-left: 3px; }
  /* SP REVISED (USER 2026-08-04) — the probable changed after this card was
     first pushed. Amber: not an error (the card IS current), but a "the matchup
     you read earlier is not the matchup now" warning the human must not miss. */
  .mc-sprevised   { background: rgba(251,146,60,0.16); color: #fb923c; border: 1px solid rgba(251,146,60,0.45); font-weight: 700; letter-spacing: 0.04em; }
  .hemi-chip { display: inline-block; padding: 0 4px; border-radius: 3px;
    font-family: 'JetBrains Mono', monospace; font-size: 0.7em;
    background: #1a222d; color: var(--muted); margin-left: 2px;
    vertical-align: middle; }
  .hemi-chip.hemi-s { color: #ff9b6e; background: #2a1a14; }

  .drill-section { margin-bottom: 18px; }
  .drill-section-title {
    font-weight: 600; font-size: 0.92em; margin-bottom: 8px; color: var(--text);
  }
  .drill-section-title .cols {
    color: var(--muted); font-weight: 400; font-size: 0.85em; margin-left: 6px;
  }
  .drill-scroll { overflow-x: auto; max-width: 100%; }
  .drill-table {
    width: 100%; border-collapse: collapse; font-size: 0.85em;
    background: var(--panel-2); border-radius: 6px; overflow: hidden;
  }
  .drill-table thead { background: #1f2533; }
  .drill-table th, .drill-table td {
    padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border);
  }
  .drill-table th {
    font-weight: 600; color: var(--muted); font-size: 0.78em;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .drill-table .col {
    background: var(--chip-neutral-bg); color: var(--accent); font-size: 0.7em;
    padding: 1px 5px; border-radius: 3px; margin-left: 4px; font-weight: 500;
  }
  .drill-table .num { font-family: 'JetBrains Mono', monospace; text-align: right; }
  .drill-table .pos { color: #4ad27a; }
  .drill-table .neg { color: #ff6c5a; }
  .drill-table tr:last-child td { border-bottom: none; }
  .drill-table tr.kind-date td { background: #1a2030; }
  .drill-table tr.subtotal-row td {
    background: #232a3a; border-top: 1px dashed #3a4458;
    font-size: 0.85em; color: #9aa6bc; padding: 4px 8px;
  }
  .drill-table tr.subtotal-row td strong { color: #d8dee9; }
  /* ===== Team-tone backgrounds (subtle differentiation) =====
     Two soft hues to distinguish opposing teams without color noise.
     Hinge player (team lead) gets a slightly brighter variant of the
     same hue so the eye picks them out without needing a different color. */
  .side-summary.side-team-0 { background: linear-gradient(180deg, rgba(78,161,255,0.055), rgba(78,161,255,0.025)); }
  .side-summary.side-team-1 { background: linear-gradient(180deg, rgba(244,143,177,0.055), rgba(244,143,177,0.025)); }
  .side-summary.side-team-0 ul li { background: transparent; transition: background 0.15s; }
  .side-summary.side-team-1 ul li { background: transparent; transition: background 0.15s; }
  .side-summary.side-team-0 ul li.hinge {
    background: rgba(78,161,255,0.13);
    border-left: 2px solid rgba(78,161,255,0.55);
    padding-left: 4px;
  }
  .side-summary.side-team-1 ul li.hinge {
    background: rgba(244,143,177,0.13);
    border-left: 2px solid rgba(244,143,177,0.55);
    padding-left: 4px;
  }
  .hinge-mark { color: #d4a017; font-size: 9px; vertical-align: top; margin-left: 1px; }
  /* Section-1 drill rows: same hue, even subtler in a busy table */
  .drill-table tr.row-team-0 td { background: rgba(78,161,255,0.030); }
  .drill-table tr.row-team-1 td { background: rgba(244,143,177,0.030); }
  .drill-table tr.row-team-0.row-hinge td { background: rgba(78,161,255,0.085); }
  .drill-table tr.row-team-1.row-hinge td { background: rgba(244,143,177,0.085); }
  .drill-table tr.subtotal-row.row-team-0 td { background: rgba(78,161,255,0.06); }
  .drill-table tr.subtotal-row.row-team-1 td { background: rgba(244,143,177,0.06); }
  .drill-table tr.subtotal-row.row-team-0.row-hinge td { background: rgba(78,161,255,0.11); }
  .drill-table tr.subtotal-row.row-team-1.row-hinge td { background: rgba(244,143,177,0.11); }
  .drill-table tr.team-row.row-team-0 td { background: rgba(78,161,255,0.085) !important; }
  .drill-table tr.team-row.row-team-1 td { background: rgba(244,143,177,0.085) !important; }

  .drill-table tr.team-row td {
    background: #2a3142; border-top: 2px solid #44506a;
    font-size: 0.9em; color: #d8dee9; padding: 6px 8px;
  }
  .drill-table tr.team-row td em { color: #9aa6bc; font-style: normal; }
  .drill-table .weight-col { color: #9aa6bc; font-size: 0.85em; }
  .drill-table.compact th, .drill-table.compact td { padding: 4px 6px; font-size: 0.78em; }
  .drill-table .obs-target { font-weight: 500; }

  /* === relationship chips ===
     Compatibility's category→color mapping preserved, but adapted to dark
     theme. SCORED categories get vivid color + subtle tinted bg so they pop.
     NEUTRAL (unscored) categories use muted color + no bg so they fade back.
       purple = empowering: violently
       blue   = soulmate: superempowering
       green  = soulmate: protecting
       orange = destructive: competing
       red    = destructive: violently  (bold — most negative)
       muted  = the 5 unscored neutrals  (no score contribution → quiet) */
  .rel-chip {
    display: inline-block; padding: 1px 7px; border-radius: 3px;
    font-size: 0.78em; white-space: nowrap;
    background: transparent; color: var(--muted);
  }
  /* SCORED — strong primary colors, white text */
  .empowering--violently     { color: #fff !important; background: #7c3aed !important; font-weight: 600; }
  .soulmate--superempowering { color: #fff !important; background: #2563eb !important; font-weight: 600; }
  .soulmate--protecting      { color: #fff !important; background: #15803d !important; font-weight: 600; }
  .destructive--competing    { color: #fff !important; background: #ea580c !important; font-weight: 600; }
  .destructive--violently    { color: #fff !important; background: #dc2626 !important; font-weight: 700; }
  /* NEUTRAL — 50% white, no background */
  .nurturing-and-or-competitive,
  .lightly-nurturing,
  .chaotic-yet-useful,
  .depleting-exhausting,
  .competing-or-entertaining    { color: rgba(255,255,255,0.5) !important; background: transparent !important; }

  @media (max-width: 720px) {
    .mc-head { grid-template-columns: auto 1fr auto auto; }
    .side-summaries { grid-template-columns: 1fr; }
  }

  /* Master public site map — compact, phone-wrap, one-line layman gloss per link. */
  .pm-sitemap { background:#0c0f16; border-bottom:1px solid var(--border); padding:8px 16px 10px; }
  .pm-sitemap .pm-sm-k { color:var(--muted); font-size:11px; font-weight:600; margin:0 0 6px; }
  .pm-sitemap .pm-sm-g { color:var(--muted); font-size:10.5px; font-weight:600; margin:8px 0 4px; }
  .pm-sitemap .pm-sm-g:first-of-type { margin-top:0; }
  .pm-sitemap ul { list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:1px 18px; }
  .pm-sitemap li { font-size:12.5px; line-height:1.35; padding:3px 0; color:var(--muted); min-width:0; overflow-wrap:anywhere; }
  .pm-sitemap a { color:#cfd6e2; text-decoration:none; font-weight:600; margin-right:6px; white-space:normal; }
  .pm-sitemap a:hover { color:var(--accent); text-decoration:underline; }
  .pm-sitemap a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  @media (max-width:720px) {
    .pm-sitemap { padding:8px 12px 10px; }
    .pm-sitemap ul { grid-template-columns:1fr; }
    .pm-sitemap li { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:5px 0; }
    .pm-sitemap a { margin-right:0; }
  }

  /* === cohort colours (2026-09-27) — see INTENDED BEHAVIOUR F1-F4, F9, F10 === */
  :root {
    --co-superfav:     #DF2D55;  /* cherry = SUPERFAV only */
    --co-superfav-ink: #ffffff;  /* white on cherry 4.52 : 1 */
    --co-bluebody:     #A4D65E;  /* lime = Blue Body only */
    --co-noblue:       #FFF44F;  /* lemon = No blue in Body only */
    --co-ink:          #1a1208;  /* dark ink: 10.90 (lime) / 16.14 (lemon) : 1 */
  }
  .pm-cohort-chip {
    display: inline-block; vertical-align: 1px; margin-left: 6px;
    padding: 1px 9px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.45);
    font-size: 0.72em; font-weight: 800; letter-spacing: 0.02em; line-height: 1.5;
    color: var(--co-ink); white-space: nowrap;
  }
  .pm-cohort-chip.co-superfav { background: var(--co-superfav); color: var(--co-superfav-ink); }
  .pm-cohort-chip.co-bluebody { background: var(--co-bluebody); }
  .pm-cohort-chip.co-noblue   { background: var(--co-noblue); }
  /* Supplemental Body observations are badges, not qualifying card cohorts. */
  .pm-cohort-chip.pm-body-rb { background: var(--co-tangerine); color: var(--co-ink); }
  .pm-cohort-chip.pm-body-bb { background: var(--co-bluebody); color: var(--co-ink); }
  .pm-cohort-pick { margin-left: 5px; font-size: 0.78em; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .match-card.pm-co { border-left-width: 6px; }
  .match-card.pm-co.co-superfav, .match-card.pm-co.co-superfav:hover, .match-card.pm-co.co-superfav.open { border-color: var(--co-superfav); box-shadow: 0 0 0 1px rgba(223,45,85,0.45); }
  .match-card.pm-co.co-bluebody, .match-card.pm-co.co-bluebody:hover, .match-card.pm-co.co-bluebody.open { border-color: var(--co-bluebody); box-shadow: 0 0 0 1px rgba(164,214,94,0.32); }
  .match-card.pm-co.co-noblue,   .match-card.pm-co.co-noblue:hover,   .match-card.pm-co.co-noblue.open   { border-color: var(--co-noblue); box-shadow: 0 0 0 1px rgba(255,244,79,0.28); }
  .pm-cohort-bar {
    max-width: 1600px; margin: 6px auto 0; padding: 8px 24px;
    display: flex; flex-direction: column; gap: 6px; font-size: 0.82em; color: var(--muted);
  }
  .pco-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .pco-k { color: var(--text); font-weight: 700; }
  .pco-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .pco-item .pm-cohort-chip { margin-left: 0; }
  .pco-sep { color: var(--border); }
  .pco-filter {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
    border-radius: 999px; padding: 3px 11px; font: inherit; font-weight: 600;
  }
  .pco-filter .pco-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.45); }
  .pco-filter[data-co="superfav"] .pco-dot { background: var(--co-superfav); }
  .pco-filter[data-co="bluebody"] .pco-dot { background: var(--co-bluebody); }
  .pco-filter[data-co="noblue"]   .pco-dot { background: var(--co-noblue); }
  .pco-filter[aria-pressed="true"] { color: var(--co-ink); border-color: rgba(0,0,0,0.45); }
  .pco-filter[aria-pressed="true"][data-co="superfav"] { background: var(--co-superfav); color: var(--co-superfav-ink); }
  .pco-filter[aria-pressed="true"][data-co="bluebody"] { background: var(--co-bluebody); }
  .pco-filter[aria-pressed="true"][data-co="noblue"]   { background: var(--co-noblue); }
  .pco-clear {
    background: transparent; color: var(--muted); border: 1px dashed var(--border);
    border-radius: 999px; padding: 3px 10px; cursor: pointer; font: inherit;
  }
  @media (max-width: 520px) { .pm-cohort-bar { padding: 8px 12px; } }
  /* Tangerine extends the existing cherry / lime / lemon card-color rules. */
  :root { --co-tangerine: #F28500; }
  .pm-cohort-chip.co-tangerine { background: var(--co-tangerine); }
  .match-card.pm-co.co-tangerine, .match-card.pm-co.co-tangerine:hover, .match-card.pm-co.co-tangerine.open { border-color: var(--co-tangerine); box-shadow: 0 0 0 1px rgba(242,133,0,0.35); }
  .color-section-head.cs-tangerine { border-left-color: var(--co-tangerine); }
  .color-section-head.cs-tangerine .cs-label { background: var(--co-tangerine); color: var(--co-ink); padding: 2px 8px; border-radius: 4px; }
  .pco-filter[data-co="tangerine"] .pco-dot { background: var(--co-tangerine); }
  .pco-filter[aria-pressed="true"][data-co="tangerine"] { background: var(--co-tangerine); }
  .mc-start-time { font-weight: 600; }
  .mc-time-soon, .drill-time-block.mc-time-soon .dtb-val { color: #ffa940; }
  .mc-time-past, .drill-time-block.mc-time-past .dtb-val { color: #ff6b6b; }
  .mc-time-old, .drill-time-block.mc-time-old .dtb-val { color: #8b949e; }
.pm-plus2-verified{color:#7dd3fc;font-weight:700;white-space:nowrap;cursor:help}
  .pm-howto-link { display:inline-block; margin:2px 0 14px; padding:3px 8px; border-radius:4px; font-size:clamp(23px,3.1vw,36px); line-height:1.2; font-weight:900; letter-spacing:-0.035em; color:var(--text,#eef2f7); text-decoration:underline; text-underline-offset:5px; animation:pm-howto-flash 1s ease-out 1; }
  .pm-howto-link:hover { color:#a4d65e; }
  .pm-howto-link:focus-visible { outline:3px solid #a4d65e; outline-offset:4px; }
  @keyframes pm-howto-flash { 0%,45% { background:#a4d65e; color:#17201c; box-shadow:0 0 0 4px rgba(164,214,94,.25); } 100% { background:transparent; box-shadow:none; } }
  @media (prefers-reduced-motion:reduce) { .pm-howto-link { animation:none; } }
  .pm-autosell-link { display:table; max-width:100%; margin:0 0 14px; padding:9px 14px; border-radius:6px; background:#a4d65e; color:#17201c; font-size:18px; font-weight:800; line-height:1.25; letter-spacing:-0.025em; text-decoration:none; }
  .pm-autosell-link:hover { background:#b8e57b; }
  .pm-autosell-link:focus-visible { outline:3px solid var(--text); outline-offset:4px; }
  /* D11 comic speech bubble (black and white only; the pills keep their colours). */
  [data-pm-bubble] { cursor: help; }
  .pm-bubble {
    position: absolute; z-index: 10000; box-sizing: border-box; display: none;
    background: #fffef8; color: #111; border: 3px solid #000; border-radius: 18px;
    padding: 10px 14px 11px; font-family: 'Bangers', 'Comic Neue', 'Comic Sans MS', cursive;
    font-size: 17px; line-height: 1.22; letter-spacing: 0.04em; text-transform: uppercase;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.85); transform: rotate(-1.2deg); pointer-events: auto;
    --tail-x: 50%;
  }
  .pm-bubble .pm-bubble-note { display: block; margin-top: 6px; font-family: system-ui, sans-serif; font-size: 11px;
    letter-spacing: 0; text-transform: none; color: #333; }
  .pm-bubble::before, .pm-bubble::after { content: ''; position: absolute; left: var(--tail-x); width: 0; height: 0; border-style: solid; }
  .pm-bubble.below::before { top: -17px; margin-left: -12px; border-width: 0 12px 17px 12px; border-color: transparent transparent #000 transparent; }
  .pm-bubble.below::after  { top: -11px; margin-left: -8px;  border-width: 0 8px 12px 8px;  border-color: transparent transparent #fffef8 transparent; }
  .pm-bubble.above::before { bottom: -17px; margin-left: -12px; border-width: 17px 12px 0 12px; border-color: #000 transparent transparent transparent; }
  .pm-bubble.above::after  { bottom: -11px; margin-left: -8px;  border-width: 12px 8px 0 8px;  border-color: #fffef8 transparent transparent transparent; }
  .pm-fav-mark { font-weight: 700; }

  /* D15 phone width: the 420px track was the page (scrollWidth 444 at 390).
     Wide drill tables scroll in .drill-scroll; the page does not. */
  @media (max-width: 430px) {
    #cardGrid > .match-card,
    #cardGrid > .color-section-head,
    #cardGrid > .load-more,
    #cardGrid > .empty-state,
    #cardGrid > .pm-loading { min-width: 0; max-width: 100%; }
    .color-section-head { flex-wrap: wrap; }
    .color-section-head .cs-sub { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
    .mc-head { grid-template-columns: auto minmax(0, 1fr) auto auto; min-width: 0; }
    .mc-title-wrap, .mc-score, .mc-btn-col, .mc-tag-col { min-width: 0; }
    .mc-sub { white-space: normal; overflow: visible; text-overflow: unset; overflow-wrap: anywhere; }
    .rank-detail, .mc-start-time, .mc-status, .pm-plus2-verified { white-space: normal; overflow-wrap: anywhere; }
    .mc-drill, .drill-section, .side-summaries, .side-summary { min-width: 0; max-width: 100%; }
    .drill-time-block { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); min-width: 0; max-width: 100%; }
    .dtb-val { min-width: 0; overflow-wrap: anywhere; }
    .side-summary li { grid-template-columns: minmax(0, 1fr) auto auto; }
    .side-summary li > :first-child { min-width: 0; overflow-wrap: anywhere; }
    .drill-scroll { display: block; overflow-x: auto; max-width: 100%; min-width: 0; }
    .drill-table { width: max-content; min-width: 100%; }
    .controls, .pm-cohort-bar, .gap-scope-note, header { max-width: 100%; }
    .controls input[type=search] { min-width: 0; max-width: 100%; }
    .controls select { max-width: 100%; }
    #boostWrap, #keyRoleWrap { max-width: 100%; flex-wrap: wrap; }
    .pco-item, .pco-filter, .pm-cohort-chip { max-width: 100%; white-space: normal; }
    .pm-howto-link, .pm-autosell-link { overflow-wrap: anywhere; }
  }
  /* P8 (owner 2026-10-19 20:03 KST): phone card head in three rows: title / tag + score + buttons / sub line. */
  @media (max-width: 430px) {
    .mc-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "title title title" "tag score btn" "sub sub sub"; row-gap: 6px; align-items: center; }
    .mc-head > .mc-title-wrap { display: contents; }
    .mc-head .mc-title { grid-area: title; min-width: 0; }
    .mc-head > .mc-tag-col { grid-area: tag; }
    .mc-head > .mc-score { grid-area: score; justify-self: start; }
    .mc-head > .mc-btn-col { grid-area: btn; }
    .mc-head .mc-sub { grid-area: sub; min-width: 0; margin-top: 0; }
  }
  .mc-title-time { display: none; }
  .mc-col2-chips { display: none; }
  /* M1-M4 (2026-10-26): phone <=720px — full-width title, chips in col 2, tighter cards. */
  @media (max-width: 720px) {
    #cardGrid { gap: 5px; padding: 8px 8px 40px; }
    .color-section-head { padding: 5px 8px; margin: 6px 0 1px; gap: 6px; font-size: 0.85em; }
    .match-card { border-radius: 5px; }
    .mc-head {
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "title title title" "tag score btn" "sub sub sub";
      gap: 4px 6px; row-gap: 3px; padding: 5px 8px; align-items: center;
    }
    .mc-head > .mc-title-wrap { display: contents; }
    .mc-head .mc-title {
      grid-area: title; min-width: 0;
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
      font-size: 12px; line-height: 1.25;
    }
    .mc-title-text { min-width: 0; overflow-wrap: anywhere; }
    .mc-title-text .pm-fav-mark { display: none; }
    .mc-title-chips { display: none; }
    .mc-title-time { display: inline; font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; margin-left: auto; }
    .mc-head .mc-sub { grid-area: sub; min-width: 0; margin-top: 0; font-size: 11px; line-height: 1.25; }
    .mc-sub .mc-start-time { display: none; }
    .mc-head > .mc-tag-col { grid-area: tag; gap: 3px; }
    .mc-col2-chips {
      display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start;
      gap: 2px 3px; max-width: 9.2em;
    }
    .mc-col2-chips .pm-cohort-chip,
    .mc-col2-chips .ls-badge,
    .mc-col2-chips .body-sig-badge { margin-left: 0; font-size: 0.62em; padding: 0 5px; line-height: 1.35; }
    .mc-col2-chips .roster-link, .mc-col2-chips .pred-copy-btn { margin-left: 0; font-size: 0.62em; padding: 1px 4px; }
    .mc-fav-chip { margin-left: 0; font-size: 11px; }
    .mc-head > .mc-score { grid-area: score; justify-self: start; padding: 2px 6px; gap: 0; }
    .mc-score .mc-gap-big { font-size: clamp(1.15em, 5.2vw, 1.7em); }
    .mc-score .teams { font-size: 0.78em; }
    .mc-head > .mc-btn-col { grid-area: btn; gap: 2px; }
    .mc-sport-tag { padding: 1px 5px; font-size: 0.65em; }
    .mc-poster-btn, .mc-link-btn { padding: 3px 5px; font-size: 0.58em; }
    .mc-save-btn { padding: 2px 6px; }
  }
/* ===== PM_CARD_CSS END ===== */