/* ── Position probability views (simulations page) ───────────────────────────
   Three presentations of the same team x position probability matrix. The shared
   rule: position is ordinal, so every view uses ONE ordered scale rather than
   fourteen categorical hues, and each view carries an explicit key or axis. */

.posmap-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.35rem 0 0.9rem;
}

.posmap-tab {
    appearance: none;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.32rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.posmap-tab:hover { color: var(--text-primary); }

.posmap-tab.is-active {
    background: #2b5fbf;
    border-color: #2b5fbf;
    color: #fff;
}

.posmap-panel[hidden] { display: none; }

.posmap-hint {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.posmap-matrix-wrap { overflow-x: auto; }

.posmap-table {
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 0.72rem;
    width: 100%;
}

.posmap-table thead th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.68rem;
    padding: 0.1rem 0;
    text-align: center;
}

.posmap-corner { width: 1.6rem; }

/* The Phase 2 group columns. A single divider before the block keeps them
   reading as a summary of the shaded cells rather than three more positions. */
.posmap-margin-col { font-weight: 700; }
.posmap-margin-first { border-left: 1px solid var(--border-color); }

/* The two margin columns have two-word labels in a narrow column; keep them on
   one line instead of wrapping into "Top / 4". */
.posmap-table thead th.posmap-margin-col {
    white-space: nowrap;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

.posmap-table tbody th.posmap-team {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    padding-right: 0.5rem;
    font-size: 0.78rem;
}

.posmap-team img {
    vertical-align: -3px;
    margin-right: 0.32rem;
    border-radius: 3px;
}

.posmap-rank {
    display: inline-block;
    min-width: 1.1rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.posmap-cell {
    text-align: center;
    padding: 0.22rem 0.15rem;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    min-width: 1.85rem;
}

/* Below-threshold cells: show the dot, not a number nobody should trust. */
.posmap-blank {
    color: var(--text-secondary);
    opacity: 0.35;
}

/* The modal position gets a ring so each row has an obvious centre of gravity. */
.posmap-mode {
    box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.95);
    font-weight: 700;
}

/* ── Ridgeline (inline SVG) ──────────────────────────────────────────────────
   Built from real DOM nodes rather than a canvas bitmap, so it can be hovered,
   linked and themed with CSS like the matrix and range views. Every colour comes
   from a class here, which also means theme switches need no re-render. */
.posmap-ridge-wrap { position: relative; width: 100%; }
.posmap-ridge { display: block; width: 100%; height: auto; }

.posmap-ridge-guide { stroke: var(--border-color); stroke-width: 1; opacity: 0.55; }
.posmap-ridge-baseline { stroke: var(--border-color); stroke-width: 1; }
.posmap-ridge-scale { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; }

/* Phase 2 group columns, sharing the zone colours used by the standings tables
   and the ridgeline's own legend dots. Low opacity so the curves stay dominant. */
.posmap-ridge-band { pointer-events: none; fill-opacity: 0.10; }
.posmap-band-champ { fill: var(--accent-green); }
.posmap-band-euro { fill: var(--accent-blue); }
.posmap-band-releg { fill: var(--accent-red); }
[data-theme="light"] .posmap-ridge-band { fill-opacity: 0.14; }

/* The two group boundaries get a crisper rule than the position guides. */
.posmap-ridge-split { stroke: var(--text-muted); stroke-width: 1; opacity: 0.7; }

.posmap-ridge-caption,
.posmap-ridge-tick,
.posmap-ridge-scalelabel,
.posmap-ridge-grouplabel {
    fill: var(--text-secondary);
    font-family: var(--font);
    font-size: 10px;
}
.posmap-ridge-tick { text-anchor: middle; }
.posmap-ridge-grouplabel { text-anchor: middle; font-weight: 600; }
.posmap-ridge-caption--end,
.posmap-ridge-scalelabel { text-anchor: end; }

.posmap-ridge-area { fill: rgba(122, 162, 255, 0.42); }
.posmap-ridge-line { fill: none; stroke: #7aa2ff; stroke-width: 1.2; }
.posmap-ridge-mode { fill: #ffd166; }
.posmap-ridge-hit { fill: transparent; cursor: crosshair; }

.posmap-ridge-row.is-active .posmap-ridge-area { fill: rgba(122, 162, 255, 0.62); }
.posmap-ridge-row.is-active .posmap-ridge-line { stroke: #b9d0ff; stroke-width: 1.8; }

.posmap-ridge-cursor { stroke: #ffd166; fill: #ffd166; }
.posmap-ridge-cursor line { stroke: rgba(255, 209, 102, 0.45); stroke-width: 1; stroke-dasharray: 3 3; }
.posmap-ridge-cursor.is-off { display: none; }

.posmap-ridge-team { cursor: pointer; outline: none; }
.posmap-ridge-team text {
    fill: var(--text-primary);
    font-family: var(--font);
    font-size: 11px;
    text-anchor: end;
    transition: fill var(--transition);
}
.posmap-ridge-team:hover text,
.posmap-ridge-team:focus-visible text,
.posmap-ridge-team.is-active text {
    fill: var(--accent-blue);
    text-decoration: underline;
}

[data-theme="light"] .posmap-ridge-area { fill: rgba(43, 95, 191, 0.26); }
[data-theme="light"] .posmap-ridge-line { stroke: #2b5fbf; }
[data-theme="light"] .posmap-ridge-mode { fill: #b45309; }
[data-theme="light"] .posmap-ridge-cursor { stroke: #b45309; fill: #b45309; }
[data-theme="light"] .posmap-ridge-row.is-active .posmap-ridge-area { fill: rgba(43, 95, 191, 0.4); }
[data-theme="light"] .posmap-ridge-row.is-active .posmap-ridge-line { stroke: #1d4ed8; }

/* Hover card shared by the ridgeline's plot cells and club names. */
.posmap-tip {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    min-width: 9rem;
    max-width: 15rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tooltip, rgba(15, 23, 42, 0.96));
    color: var(--text-primary);
    box-shadow: var(--shadow);
    font-size: 0.74rem;
    line-height: 1.35;
}
.posmap-tip[hidden] { display: none; }
.posmap-tip-title { font-weight: 700; }
.posmap-tip-value { font-variant-numeric: tabular-nums; }
.posmap-tip-meta {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
}
/* The three Phase 2 group shares on their own line: they partition the league,
   so they read as one row of numbers rather than part of the sentence above. */
.posmap-tip-groups {
    margin-top: 0.2rem;
    padding-top: 0.2rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

@media (max-width: 720px) {
    .posmap-table { font-size: 0.64rem; }
    .posmap-cell { min-width: 1.5rem; padding: 0.18rem 0.08rem; }
    .posmap-table tbody th.posmap-team { font-size: 0.7rem; }
    .posmap-tab { padding: 0.28rem 0.7rem; font-size: 0.78rem; }
    .posmap-ridge-team text { font-size: 12px; }
}