/* Inline replay-link live-preview card for the notes CM6 editor.
 *
 * Rendered by replay-card.js as a Decoration.replace() widget over a
 * `[[replay:N]]` token whenever the cursor is off the line. Cursor
 * back onto the line collapses the card to raw markdown — see
 * live-preview.js for the same pattern applied to standard markdown.
 *
 * Visual reference: the post-match summary header card, miniaturised
 * for inline-in-prose use. We don't reuse those styles directly — this
 * card needs to inline next to body text and stay one line tall.
 */

.cm-replay-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    margin: 2px 0;
    min-height: 48px;
    max-width: 100%;
    /* min-width: 0 + overflow: hidden are load-bearing for narrow
     * containers (the 380px quickbar slide-in). Without them the
     * inline-flex children's intrinsic widths push the card past
     * max-width: 100%, making the enclosing cm-line wider than the
     * editor host and forcing prose elsewhere on that line / nearby
     * lines to wrap at the card's width instead of the visible
     * viewport's. Cells use ellipsis to absorb the squeeze. */
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 6px;
    background: var(--surface, #1a1d24);
    color: var(--text, #e6e8ec);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: border-color 120ms ease, background 120ms ease;
    vertical-align: middle;
    box-sizing: border-box;
    /* Don't let the card's contents wrap mid-cell — the row stays
     * single-line. The opp-name cell handles overflow with ellipsis. */
    white-space: nowrap;
}

.cm-replay-card:hover {
    border-color: var(--border-strong, #3a4150);
    background: var(--surface-elev, #21252e);
}

.cm-replay-card:focus-visible {
    outline: 2px solid var(--accent, #5b8def);
    outline-offset: 1px;
}

/* ── Result chip (W / L / ?) ───────────────────────────────────────── */
.cm-replay-card-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 auto;
    color: #fff;
}

.cm-replay-card-chip--win {
    background: var(--good, #3aa55c);
}
.cm-replay-card-chip--loss {
    background: var(--bad, #d04848);
}
.cm-replay-card-chip--unknown {
    background: var(--text-muted, #6b7280);
}

/* ── YOU + your MMR ────────────────────────────────────────────────── */
.cm-replay-card-you {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex: 0 0 auto;
}
.cm-replay-card-you-label {
    color: var(--warn, #fcb950);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cm-replay-card-mmr {
    color: var(--text, #e6e8ec);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Matchup chip ──────────────────────────────────────────────────── */
.cm-replay-card-matchup {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--surface-elev, #21252e);
    color: var(--text-secondary, #a8aebd);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}

/* ── Opponent (mmr + name) ─────────────────────────────────────────── */
.cm-replay-card-opp {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0; /* allow ellipsis on the child */
    flex: 1 1 auto;
    overflow: hidden;
}
.cm-replay-card-opp-mmr {
    color: var(--text-secondary, #a8aebd);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.cm-replay-card-opp-name {
    color: var(--text, #e6e8ec);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── Map thumbnail ─────────────────────────────────────────────────── */
.cm-replay-card-thumb {
    display: inline-block;
    width: 40px;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-elev, #21252e);
    flex: 0 0 auto;
    position: relative;
}
.cm-replay-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cm-replay-card-thumb--placeholder {
    background: linear-gradient(135deg,
        var(--surface-elev, #21252e),
        var(--surface, #1a1d24));
}

/* ── Map name ──────────────────────────────────────────────────────── */
.cm-replay-card-map {
    color: var(--text, #e6e8ec);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 11px;
    font-weight: 600;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

/* ── Game length ───────────────────────────────────────────────────── */
.cm-replay-card-length {
    color: var(--text-secondary, #a8aebd);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

/* ── Skeleton state ────────────────────────────────────────────────── */
.cm-replay-card--skeleton {
    cursor: default;
}
.cm-replay-card--skeleton:hover {
    border-color: var(--border, #2a2f3a);
    background: var(--surface, #1a1d24);
}
.cm-replay-card-chip--skel,
.cm-replay-card-mmr-skel,
.cm-replay-card-matchup-skel,
.cm-replay-card-opp-skel,
.cm-replay-card-map-skel,
.cm-replay-card-len-skel,
.cm-replay-card-thumb--skel {
    display: inline-block;
    background: var(--surface-elev, #21252e);
    border-radius: 4px;
    animation: cm-replay-card-pulse 1.4s ease-in-out infinite;
}
.cm-replay-card-chip--skel { width: 24px; height: 24px; }
.cm-replay-card-mmr-skel    { width: 36px; height: 14px; vertical-align: middle; }
.cm-replay-card-matchup-skel { width: 32px; height: 16px; }
.cm-replay-card-opp-skel    { width: 100px; height: 14px; flex: 1 1 auto; }
.cm-replay-card-map-skel    { width: 80px; height: 12px; }
.cm-replay-card-len-skel    { width: 38px; height: 12px; }
.cm-replay-card-thumb--skel { width: 40px; height: 32px; }

@keyframes cm-replay-card-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.85; }
}

/* ── Error state ───────────────────────────────────────────────────── */
.cm-replay-card--error {
    border-color: rgba(208, 72, 72, 0.6);
    background: rgba(208, 72, 72, 0.08);
    cursor: default;
}
.cm-replay-card--error:hover {
    border-color: rgba(208, 72, 72, 0.6);
    background: rgba(208, 72, 72, 0.08);
}
.cm-replay-card-error-text {
    color: var(--bad, #d04848);
    font-size: 12px;
}

/* ── Pending parse (replay row exists, no game record yet) ─────────── */
.cm-replay-card--pending-parse {
    opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────
 * Build-order card — same in-editor inline pattern as the replay
 * card, but compact and reading-order: matchup chip, archetype name,
 * meta (game count + win-rate). Powers the live-preview decoration
 * for `[[build:<matchup>/<id>]]` tokens.
 * ───────────────────────────────────────────────────────────────── */

/* .cm-mybuild-card shares EVERY structural + child rule with .cm-build-card
 * — the only divergence is the .cm-mybuild-card-owner badge (and the small
 * .cm-mybuild-card-desc preview) added at the bottom of this block. We
 * extend only the TOP-LEVEL structural selectors with a combined comma list;
 * the child element rules (.cm-build-card-mu / -name / -error-text / skeleton
 * pieces) are class-name selectors matched relative to the document, not the
 * parent widget, so the mybuild card inherits them for free without
 * duplication. */
.cm-build-card,
.cm-mybuild-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    margin: 2px 0;
    min-height: 32px;
    max-width: 100%;
    /* See cm-replay-card for why min-width:0 matters in narrow hosts. */
    min-width: 0;
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 5px;
    background: var(--surface, #1a1d24);
    color: var(--text-primary, #e6e8ec);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: border-color 120ms ease, background 120ms ease;
    vertical-align: middle;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}
.cm-build-card:hover,
.cm-mybuild-card:hover {
    border-color: var(--border-strong, #3a4150);
    background: var(--surface-elev, #21252e);
}
.cm-build-card:focus-visible,
.cm-mybuild-card:focus-visible {
    outline: 2px solid var(--accent, #4fc3f7);
    outline-offset: 1px;
}

.cm-build-card-mu {
    flex-shrink: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    background: var(--surface-elev, #21252e);
    color: var(--text-secondary, #8a95a5);
    border-radius: 3px;
    letter-spacing: 0.05em;
}
.cm-build-card-mu--unknown {
    color: var(--text-muted, #5a6472);
}

.cm-build-card-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #e6e8ec);
    font-weight: 500;
}

.cm-build-card-cheese {
    flex-shrink: 0;
    color: var(--warn, #fbbf24);
    font-size: 11px;
}

.cm-build-card-meta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cm-build-card-games {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    color: var(--text-muted, #5a6472);
}
.cm-build-card-wr {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}
.cm-build-card-wr--win {
    background: rgba(74, 222, 128, 0.12);
    color: var(--good, #4ade80);
}
.cm-build-card-wr--loss {
    background: rgba(248, 113, 113, 0.12);
    color: var(--bad, #f87171);
}
.cm-build-card-wr--neutral {
    background: var(--surface-elev, #21252e);
    color: var(--text-secondary, #8a95a5);
}

/* Skeleton + error states (shared by both card variants — see the combined
 * selectors above for the rationale on why only the parent class is doubled
 * up while child skeleton pieces stay single-class). */
.cm-build-card--skeleton .cm-build-card-mu--skel,
.cm-mybuild-card--skeleton .cm-build-card-mu--skel,
.cm-build-card-name-skel,
.cm-build-card-games-skel {
    display: inline-block;
    height: 12px;
    background: var(--surface-elev, #21252e);
    border-radius: 3px;
    animation: cm-build-card-pulse 1.4s ease-in-out infinite;
}
.cm-build-card--skeleton .cm-build-card-mu--skel,
.cm-mybuild-card--skeleton .cm-build-card-mu--skel { width: 28px; height: 16px; }
.cm-build-card-name-skel { width: 140px; flex: 1; }
.cm-build-card-games-skel { width: 60px; }
@keyframes cm-build-card-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.95; }
}
.cm-build-card--error,
.cm-mybuild-card--error {
    border-color: var(--bad, #f87171);
    color: var(--bad, #f87171);
    cursor: default;
}
.cm-build-card-error-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

/* ── My Build card extras ────────────────────────────────────────────
 * The ONLY net-new classes for the [[mybuild:<id>]] card. Everything
 * else is shared with .cm-build-card (above).
 *   .cm-mybuild-card-owner — the "⚡ My Build" badge that distinguishes a
 *     saved-build card from a corpus archetype card at a glance.
 *   .cm-mybuild-card-desc  — optional truncated description preview;
 *     de-emphasised so it doesn't compete with the build name.
 */
.cm-mybuild-card-owner {
    flex-shrink: 0;
    font-size: 0.7em;
    font-weight: 600;
    color: var(--accent, #4da6ff);
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid currentColor;
    margin-left: 4px;
    white-space: nowrap;
}
.cm-mybuild-card-desc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    color: var(--text-muted, #5a6472);
}

/* ── Player card (inline `[[player:NAME]]`) ──────────────────────────── */
.cm-player-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    margin: 1px 1px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 999px;
    background: var(--surface, #1a1d24);
    color: var(--text, #e6e8ec);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    transition: border-color 120ms ease, background 120ms ease;
    white-space: nowrap;
}
.cm-player-card:hover {
    border-color: var(--accent, #5b8def);
    background: var(--surface-elev, #21252e);
}
.cm-player-card:focus-visible {
    outline: 2px solid var(--accent, #5b8def);
    outline-offset: 1px;
}
.cm-player-card-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    flex: 0 0 auto;
    background: var(--text-muted, #6b7280);
}
.cm-player-card-chip--race-p { background: #f4c542; color: #1a1d24; }
.cm-player-card-chip--race-t { background: #4a90d9; }
.cm-player-card-chip--race-z { background: #b366f0; }
.cm-player-card-name {
    font-weight: 600;
    color: var(--text, #e6e8ec);
}
.cm-player-card-mmr {
    color: var(--text-secondary, #a0a4ad);
    font-variant-numeric: tabular-nums;
}
.cm-player-card-accts {
    color: var(--text-muted, #6b7280);
    font-size: 11px;
}
.cm-player-card-mmr-skel {
    display: inline-block;
    width: 32px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(90deg, #2a2f3a 25%, #353a45 50%, #2a2f3a 75%);
    background-size: 200% 100%;
    animation: cm-card-skel 1.2s ease-in-out infinite;
}
.cm-player-card--unknown {
    opacity: 0.65;
    cursor: not-allowed;
}
/* User-sourced chips — resolved from the user's own match history rather
 * than the global player DB. Subtle dashed border + default cursor (no
 * click-through drawer is wired for these yet). Tooltip surfaces the
 * games-played count. */
.cm-player-card--user {
    border-style: dashed;
    cursor: default;
}
.cm-player-card--user:hover {
    border-color: var(--border-strong, #3a4150);
}
@keyframes cm-card-skel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Action icons at the right end of the card. The first (↗) opens the
 * replay's rollup note in the editor; the second (↓) imports the
 * replay's pin sections into the host note. Both are square so they
 * read as a paired action cluster. */
.cm-replay-card-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--border, #2a2f3a);
    background: var(--surface-elev, #21252e);
    color: var(--text-secondary, #8a95a5);
    font-family: system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.cm-replay-card-open {
    margin-left: auto;
}
.cm-replay-card-import {
    /* Sits immediately after .cm-replay-card-open with a small gap. */
    margin-left: 4px;
}
.cm-replay-card-icon:hover:not(:disabled) {
    background: var(--accent, #4fc3f7);
    color: var(--bg-0, #06121a);
    border-color: var(--accent, #4fc3f7);
}
.cm-replay-card-icon:focus-visible {
    outline: 2px solid var(--accent, #4fc3f7);
    outline-offset: 1px;
}
.cm-replay-card-icon:disabled {
    opacity: 0.6;
    cursor: default;
}
.cm-replay-card-icon--busy {
    opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────
 * Condensed replay-card — used in the narrow quickbar slide-in
 * (~380px). Drops the thumbnail, map name, game length, and "YOU"
 * label so the card fits without clipping. The Import button stays
 * because it's the load-bearing action; the result chip + matchup +
 * opponent stay because they're the recognition surface.
 *
 * Scoped to .qb-cm-host so the wide notes-tab editor keeps the full
 * card. If you'd want condensed elsewhere later, lift this to a
 * container-query (`@container (max-width: 420px)`) on the card's
 * scroll host.
 * ───────────────────────────────────────────────────────────────── */
.qb-cm-host .cm-replay-card {
    gap: 6px;
    padding: 4px 8px;
    min-height: 36px;
    font-size: 11px;
}
.qb-cm-host .cm-replay-card-chip {
    width: 20px;
    height: 20px;
    font-size: 11px;
}
.qb-cm-host .cm-replay-card-you,
.qb-cm-host .cm-replay-card-thumb,
.qb-cm-host .cm-replay-card-map,
.qb-cm-host .cm-replay-card-length {
    display: none;
}
.qb-cm-host .cm-replay-card-opp {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.qb-cm-host .cm-replay-card-opp-mmr {
    color: var(--text-muted, #8a95a5);
    margin-right: 4px;
}
.qb-cm-host .cm-replay-card-opp-name {
    color: var(--text-primary, #e8edf3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qb-cm-host .cm-replay-card-icon {
    width: 20px;
    height: 20px;
    font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────
 * Pin pill — replaces `<!-- pin:{json} -->` lines in rollup notes.
 * Category-coloured chip with an icon dot, label, timestamp, and
 * optional region. Click seeks the replay to the pin's timestamp.
 *
 * --pin-color is set per-instance from the pin metadata's `c` field.
 * The pill is its own block (display: inline-flex on a line that has
 * nothing else), so it lives on its own row above the bullet.
 * ───────────────────────────────────────────────────────────────── */

.cm-pin-pill {
    --pin-color: #5a6472;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pin-color) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--pin-color) 60%, transparent);
    color: var(--text, #e6e8ec);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 100ms ease, border-color 100ms ease;
    vertical-align: baseline;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
}
.cm-pin-pill:hover {
    background: color-mix(in srgb, var(--pin-color) 32%, transparent);
    border-color: var(--pin-color);
}
.cm-pin-pill:focus-visible {
    outline: 2px solid var(--pin-color);
    outline-offset: 1px;
}
.cm-pin-pill--unclickable {
    cursor: default;
    opacity: 0.7;
}
.cm-pin-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pin-color);
    flex-shrink: 0;
}
.cm-pin-pill-label {
    color: var(--pin-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    flex-shrink: 0;
}
.cm-pin-pill-ts {
    color: var(--text-secondary, #a8aebd);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    flex-shrink: 0;
}
.cm-pin-pill-region {
    color: var(--text-muted, #6b7280);
    font-style: italic;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Hide legacy pin-trailer lines (## heading, ```replay fence, italic
 * context, blanks). The pin-pill decoration adds this class to each
 * line. CM6's base stylesheet sets `.cm-line { display: block }`
 * with higher specificity than a bare class — chain on `.cm-line` to
 * match it, plus !important as belt-and-suspenders. */
.cm-line.cm-pin-hidden-line {
    display: none !important;
}