/* ═════════════════════════════════════════════════════════════════════════
   OPPORTUNITY INTELLIGENCE - COMPETITORS

   A leaderboard ordered by damage, a spread meter on every row so two
   competitors can be compared without reading either, and the losses on
   the board beside it because they are the register's first rows.

   Only new selectors, all prefixed .cmp-; the ws-* and op-* vocabulary is
   reused as-is. Every colour set here has a html.light rule below.
   ═════════════════════════════════════════════════════════════════════════ */
.cmp-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.cmp-bar-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--gray-light); }
.cmp-bar-t b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--white); }
.cmp-bar-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-bar-a .ws-n { margin-left: 6px; }
.cmp-bar-a .sr-act.is-on { color: var(--white); }

.cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.cmp-lb { min-width: 0; overflow-x: auto; }
.cmp-lb-h, .cmp-row {
    display: grid; grid-template-columns: 34px minmax(180px, 1.5fr) 150px minmax(170px, 1fr) minmax(130px, .9fr) 78px;
    gap: 12px; align-items: center; min-width: 760px;
}
.cmp-lb-h {
    padding: 4px 14px 8px; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: var(--gray-light);
}
.cmp-row {
    position: relative; cursor: pointer; font: inherit; text-align: left; color: inherit;
    width: 100%; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px;
    border: 1px solid var(--border); border-left: 3px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.cmp-row:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.cmp-row.is-warn { border-left-color: #e0a03b; }
.cmp-row.is-bad { border-left-color: #ff6b6b; box-shadow: -6px 0 18px -12px rgba(255,107,107,.7); }
.cmp-row.is-stop { border-left-color: var(--red); }
.cmp-rank {
    font-family: var(--font-mono); font-size: 13px; font-weight: 800; color: var(--gray-light);
    font-variant-numeric: tabular-nums;
}
.cmp-row:first-of-type .cmp-rank, .cmp-row.is-bad .cmp-rank { color: #ff8f8f; }
.cmp-who { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cmp-who b { font-size: 14px; font-weight: 750; letter-spacing: -.01em; line-height: 1.3; color: var(--white); overflow-wrap: anywhere; }
.cmp-h2h { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--gray-light); font-variant-numeric: tabular-nums; }
.cmp-h2h > b { font-size: 18px; font-weight: 850; letter-spacing: -.02em; color: var(--white); margin-right: 3px; }
.cmp-h2h small { font-size: 10px; }
.cmp-tally { display: flex; gap: 3px; flex-wrap: wrap; }
.cmp-tally i { width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.14); }
.cmp-tally i.is-l { background: #ff6b6b; }
.cmp-tally i.is-w { background: #2fc07d; }
.cmp-tally i.is-s { background: #6ba6ff; opacity: .7; }

/* The spread meter. The zero line sits at 80 percent of the track: the scale
   runs from 20 percent above the winner to 5 percent below, because that is
   the range a loss on price lives in. */
.cmp-sp { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-sp-v { font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: var(--white); font-variant-numeric: tabular-nums; }
.cmp-sp.is-bad .cmp-sp-v { color: #ff8f8f; }
.cmp-sp.is-warn .cmp-sp-v { color: #e0a03b; }
.cmp-sp.is-close .cmp-sp-v { color: #2fc07d; }
.cmp-sp.is-over .cmp-sp-v { color: #6ba6ff; }
.cmp-sp.is-none .cmp-sp-v { color: var(--gray-light); font-weight: 600; font-style: italic; }
.cmp-sp-t {
    position: relative; display: block; height: 6px; border-radius: 100px;
    background: linear-gradient(90deg, rgba(255,107,107,.5) 0%, rgba(224,160,59,.4) 55%, rgba(47,192,125,.4) 80%, rgba(107,166,255,.4) 100%);
}
.cmp-sp-z { position: absolute; left: 80%; top: -3px; width: 1px; height: 12px; background: rgba(255,255,255,.55); }
.cmp-sp-m {
    position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 100px;
    background: var(--white); box-shadow: 0 0 0 2px var(--charcoal), 0 2px 6px rgba(0,0,0,.5);
}
.cmp-sp-s { font-size: 10px; color: var(--gray-light); }
.cmp-where { font-size: 12px; line-height: 1.35; color: var(--white); min-width: 0; overflow-wrap: anywhere; }
.cmp-where small, .cmp-last small { display: block; font-size: 10px; color: var(--gray-light); }
.cmp-last { font-size: 12px; color: var(--white); font-variant-numeric: tabular-nums; }
.cmp-flag { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--border); }
.cmp-flag .ws-flag { display: block; }

/* The losses on the board, beside the leaderboard. */
.cmp-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cmp-side-h {
    display: flex; align-items: center; gap: 9px; margin: 0 0 4px;
    font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--white);
}
.cmp-side-h::before { content: ""; width: 14px; height: 2px; border-radius: 100px; background: var(--red); }
.cmp-side-h b { font-size: 11px; padding: 0 7px; border-radius: 100px; background: rgba(255,255,255,.09); color: var(--gray-light); }
.cmp-side-e { padding: 12px 4px; font-size: 12px; line-height: 1.55; color: var(--gray-light); }
.cmp-loss {
    padding: 11px 13px 10px; border-radius: 12px;
    border: 1px solid var(--border); border-left: 3px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.035);
}
.cmp-loss.is-warn { border-left-color: #e0a03b; }
.cmp-loss.is-bad { border-left-color: #ff6b6b; }
.cmp-loss-t { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--gray-light); }
.cmp-loss h4 { margin: 5px 0 7px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--white); }
.cmp-loss .ws-card-f { margin-top: 8px; }
.cmp-loss-a { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Award notices. */
.cmp-disc-n { font-size: 11.5px; color: var(--gray-light); }

/* The drawer: one competitor. */
.cmp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 18px 24px 0; }
.cmp-stat { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.cmp-stat b { font-size: 20px; font-weight: 850; letter-spacing: -.02em; color: var(--white); font-variant-numeric: tabular-nums; }
.cmp-stat span { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }
.cmp-stat.is-bad b { color: #ff8f8f; }
.cmp-stat.is-warn b { color: #e0a03b; }
.cmp-stat.is-good b, .cmp-stat.is-close b { color: #2fc07d; }
.cmp-stat.is-over b { color: #6ba6ff; }
.cmp-ag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 24px 0; }
.cmp-ag-l { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); margin-right: 4px; }
.cmp-lede { margin: 0; padding: 14px 24px 0; font-size: 12.5px; line-height: 1.6; color: var(--gray-light); }
.cmp-awards { padding: 20px 24px 0; }
.cmp-awards h4 {
    display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
    font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--white);
}
.cmp-awards h4::before { content: ""; width: 14px; height: 2px; border-radius: 100px; background: var(--red); }
.cmp-awards h4 b { font-size: 11px; padding: 0 7px; border-radius: 100px; background: rgba(255,255,255,.09); color: var(--gray-light); }
.cmp-aw {
    padding: 11px 13px 10px; margin-bottom: 8px; border-radius: 12px;
    border: 1px solid var(--border); border-left: 3px solid rgba(255,255,255,.14); background: rgba(255,255,255,.035);
}
.cmp-aw.is-lost { border-left-color: #ff6b6b; }
.cmp-aw.is-won { border-left-color: #2fc07d; }
.cmp-aw.is-seen { border-left-color: #6ba6ff; }
.cmp-aw-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10px; color: var(--gray-light); }
.cmp-aw h4 { margin: 6px 0 3px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--white); }
.cmp-aw h4::before { display: none; }
.cmp-link {
    font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
    text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px;
}
.cmp-link:hover { text-decoration-color: var(--red); }
.cmp-aw-ag { font-size: 11px; color: var(--gray-light); }
.cmp-aw-n { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 7px; font-size: 11.5px; color: var(--gray-light); }
.cmp-aw-n b { color: var(--white); font-variant-numeric: tabular-nums; }
.cmp-aw-n .is-missing { color: #e0a03b; font-style: italic; }
.cmp-aw-p { font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-aw-p.is-bad { color: #ff8f8f; }
.cmp-aw-p.is-warn { color: #e0a03b; }
.cmp-aw-p.is-close { color: #2fc07d; }
.cmp-aw-p.is-over { color: #6ba6ff; }
.cmp-aw-note { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--gray-light); }
.cmp-aw-a { display: flex; gap: 6px; margin-top: 8px; }
.cmp-aw-a .sr-act.is-danger { color: #ff8f8f; margin-left: auto; }

/* ── Light theme ──────────────────────────────────────────────────────── */
html.light .cmp-bar-t { color: var(--gray-mid); }
html.light .cmp-bar-t b, html.light .cmp-bar-a .sr-act.is-on { color: var(--black); }
html.light .cmp-lb-h, html.light .cmp-rank, html.light .cmp-h2h, html.light .cmp-h2h small,
html.light .cmp-sp-s, html.light .cmp-where small, html.light .cmp-last small, html.light .cmp-side-e,
html.light .cmp-loss-t, html.light .cmp-disc-n, html.light .cmp-stat span, html.light .cmp-ag-l,
html.light .cmp-lede, html.light .cmp-aw-t, html.light .cmp-aw-ag, html.light .cmp-aw-n,
html.light .cmp-aw-note { color: var(--gray-mid); }
html.light .cmp-who b, html.light .cmp-h2h > b, html.light .cmp-sp-v, html.light .cmp-where, html.light .cmp-last,
html.light .cmp-side-h, html.light .cmp-loss h4, html.light .cmp-stat b, html.light .cmp-awards h4,
html.light .cmp-aw h4, html.light .cmp-aw-n b { color: var(--black); }
html.light .cmp-row { background: #fff; border-color: rgba(0,0,0,.09); border-left-color: rgba(0,0,0,.18); }
html.light .cmp-row:hover { background: #fafbfc; border-color: rgba(0,0,0,.2); }
html.light .cmp-row.is-warn { border-left-color: #a8690f; }
html.light .cmp-row.is-bad { border-left-color: #c41717; box-shadow: -6px 0 18px -12px rgba(196,23,23,.45); }
html.light .cmp-row:first-of-type .cmp-rank, html.light .cmp-row.is-bad .cmp-rank { color: #c41717; }
html.light .cmp-tally i { background: rgba(0,0,0,.12); }
html.light .cmp-tally i.is-l { background: #c41717; }
html.light .cmp-tally i.is-w { background: #0f7a4b; }
html.light .cmp-tally i.is-s { background: #2b5fb8; }
html.light .cmp-sp.is-bad .cmp-sp-v { color: #c41717; }
html.light .cmp-sp.is-warn .cmp-sp-v { color: #a8690f; }
html.light .cmp-sp.is-close .cmp-sp-v { color: #0f7a4b; }
html.light .cmp-sp.is-over .cmp-sp-v { color: #2b5fb8; }
html.light .cmp-sp.is-none .cmp-sp-v { color: var(--gray-mid); }
html.light .cmp-sp-t {
    background: linear-gradient(90deg, rgba(196,23,23,.4) 0%, rgba(168,105,15,.35) 55%, rgba(15,122,75,.35) 80%, rgba(43,95,184,.35) 100%);
}
html.light .cmp-sp-z { background: rgba(0,0,0,.45); }
html.light .cmp-sp-m { background: #fff; box-shadow: 0 0 0 2px var(--black), 0 2px 6px rgba(0,0,0,.25); }
html.light .cmp-flag { border-top-color: rgba(0,0,0,.08); }
html.light .cmp-side-h b, html.light .cmp-awards h4 b { background: rgba(0,0,0,.06); color: var(--gray-mid); }
html.light .cmp-loss, html.light .cmp-aw { background: #fafbfc; border-color: rgba(0,0,0,.09); border-left-color: rgba(0,0,0,.18); }
html.light .cmp-loss.is-warn { border-left-color: #a8690f; }
html.light .cmp-loss.is-bad { border-left-color: #c41717; }
html.light .cmp-aw.is-lost { border-left-color: #c41717; }
html.light .cmp-aw.is-won { border-left-color: #0f7a4b; }
html.light .cmp-aw.is-seen { border-left-color: #2b5fb8; }
html.light .cmp-stat { background: #f6f7f9; }
html.light .cmp-stat.is-bad b { color: #c41717; }
html.light .cmp-stat.is-warn b { color: #a8690f; }
html.light .cmp-stat.is-good b, html.light .cmp-stat.is-close b { color: #0f7a4b; }
html.light .cmp-stat.is-over b { color: #2b5fb8; }
html.light .cmp-link { text-decoration-color: rgba(0,0,0,.25); }
html.light .cmp-link:hover { text-decoration-color: #c41717; }
html.light .cmp-aw-n .is-missing { color: #a8690f; }
html.light .cmp-aw-p.is-bad { color: #c41717; }
html.light .cmp-aw-p.is-warn { color: #a8690f; }
html.light .cmp-aw-p.is-close { color: #0f7a4b; }
html.light .cmp-aw-p.is-over { color: #2b5fb8; }
html.light .cmp-aw-a .sr-act.is-danger { color: #c41717; }

@media (max-width: 1100px) {
    .cmp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .cmp-stats { grid-template-columns: repeat(2, 1fr); }
}