/* FelixChess Move Tree Display (Step 3) */

/* 1) DejaVu Sans chess figurines (you already used this in the POC) */
@font-face {
    font-family: "dejavu_sans";
    src:
            url("/etc/vendor-libraries/felixchess-versioned-library/versions/0.0.1/fonts/dejavusans-webfont.woff2") format("woff2"),
            url("/etc/vendor-libraries/felixchess-versioned-library/versions/0.0.1/fonts/dejavusans-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

/* 2) White canvas panel (switchable) */
.fc-mtsearch__treePlaceholder.is-white {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.14);
}

/* Keep title readable on white */
.fc-mtsearch__treePlaceholder.is-white .fc-mtsearch__treeTitle {
    color: #111;
}

/* Hide the default hint text once we render */
.fc-mtsearch__treePlaceholder.has-tree .fc-mtsearch__treeHint {
    display: none;
}

/* 3) Tree viewport */
.fc-mtsearch__treeViewport {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 58vh;               /* big canvas */
    min-height: 420px;
    overflow: auto;
    border-radius: 10px;
}

/* Slight inset frame on white */
.fc-mtsearch__treePlaceholder.is-white .fc-mtsearch__treeViewport {
    background: #fff;
}

.fc-mtsearch__treeContainer {
    position: relative;
    display: block;
    min-width: 100%;  /* Changed from width: 100% to allow expansion for large trees */
    min-height: 600px;
}

/* SVG baseline */
.fc-mtsearch__treeSvg {
    display: block;
    margin: 0 auto;
}

/* Links and node text (let D3 set values too) */
.fc-mt-nodeText {
    font-family: dejavu_sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 12px;  /* Reduced from 13px - figurines will be 14px via tspan */
    fill: #111;
    cursor: pointer;
    user-select: none;
}

text.fc-mt-nodeText--link {
    text-decoration: none;
}

.fc-mt-link {
    stroke: rgba(0,0,0,0.22);
    stroke-width: 1;
}

.fc-mt-link--from-move {
    stroke-dasharray: 4 4;
    stroke: rgba(0, 0, 0, 0.32);
}

.fc-mt-nodeText--from-context {
    fill: rgba(17, 17, 17, 0.62);
    cursor: default;
}

.fc-mt-node--context,
.fc-mt-node--static-root,
.fc-mt-node--context > text.fc-mt-nodeText,
.fc-mt-node--static-root > text.fc-mt-nodeText,
.fc-mt-nodeText--static-root {
    cursor: default;
}

.fc-mt-node:not(.fc-mt-node--context):not(.fc-mt-node--static-root):not(.fc-mt-node--info-selected):not(.fc-mt-node--navigator-selected):hover > text.fc-mt-nodeText:not(.fc-mt-nodeText--root) {
    fill: #8fdc3f;
}

text.fc-mt-nodeText:not(.fc-mt-nodeText--root):not(.fc-mt-nodeText--from-context):not(.fc-mt-nodeText--static-root):not(.fc-mt-nodeText--info-selected):not(.fc-mt-nodeText--navigator-selected):hover {
    fill: #8fdc3f !important;
}

.fc-mt-nodeInfoHighlight {
    fill: rgba(142, 220, 63, 0.16);
    stroke: rgba(142, 220, 63, 0.45);
    stroke-width: 1;
    pointer-events: none;
}

.fc-mt-node--navigator-selected .fc-mt-nodeInfoHighlight {
    fill: rgba(142, 220, 63, 0.16);
    stroke: rgba(142, 220, 63, 0.45);
}

.fc-mt-node--info-selected .fc-mt-nodeInfoHighlight {
    fill: rgba(255, 166, 64, 0.16);
    stroke: rgba(255, 166, 64, 0.55);
}

.fc-mt-node--branch-focus-root .fc-mt-nodeInfoHighlight {
    fill: rgba(142, 220, 63, 0.16);
    stroke: rgba(142, 220, 63, 0.45);
}

.fc-mt-node--branch-focus-root.fc-mt-node--info-selected .fc-mt-nodeInfoHighlight {
    fill: rgba(255, 166, 64, 0.16);
    stroke: rgba(255, 166, 64, 0.55);
}

.fc-mt-node--info-selected > text.fc-mt-nodeText:not(.fc-mt-nodeText--root) {
    fill: #111 !important;
    font-weight: 700;
}

.fc-mt-node--branch-focus-root > text.fc-mt-nodeText--root {
    font-family: dejavu_sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 12px;
    fill: #111 !important;
    font-weight: 700;
    letter-spacing: 0;
}

.fc-movetree-event-root-fo {
    overflow: visible;
}

.fc-movetree-event-root {
    width: 100%;
    text-align: center;
    font-family: dejavu_sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #17220f;
    pointer-events: none;
}

.fc-movetree-event-root__title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-movetree-event-root__subtitle {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 650;
    color: #5a7f3b;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-mt-node--navigator-selected > text.fc-mt-nodeText:not(.fc-mt-nodeText--root) {
    fill: #111 !important;
    font-weight: 700;
}

.fc-moveTree__node--line > text.fc-mt-nodeText:not(.fc-mt-nodeText--root) {
    fill: #44642f !important;
    font-weight: 650;
}

.fc-moveTree__node--current > text.fc-mt-nodeText:not(.fc-mt-nodeText--root),
.fc-moveTree__node--current > text.fc-mt-nodeText--root {
    fill: #111 !important;
    font-weight: 800;
}

.fc-moveTree__node--current .fc-mt-nodeInfoHighlight {
    fill: #b8ee72;
    stroke: #5f982c;
    stroke-width: 1.25;
    opacity: 0.96;
}

.fc-moveTree__node--line:not(.fc-moveTree__node--current) .fc-mt-nodeInfoHighlight {
    fill: #e7f4d5;
    stroke: #9fca78;
    stroke-width: 1;
    opacity: 0.72;
}

/* info icon */
.fc-mt-infoDot {
    fill: #0b6b2b; /* dark green */
    cursor: pointer;
}
.fc-mt-infoText {
    fill: #fff;
    font-size: 10px;
    font-weight: 800;
    pointer-events: none;
}

/* 4) Tooltip (match your dark theme accents) */
.fc-mt-tooltip {
    position: absolute;
    z-index: 9999;
    min-width: 200px;
    max-width: 360px;
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
    color: #111;
    visibility: hidden;
}

.fc-mt-tooltip__title {
    font-weight: 900;
    margin-bottom: 6px;
}

.fc-mt-tooltip__row {
    font-size: 13px;
    line-height: 1.35;
    margin: 2px 0;
}

.fc-mt-tooltip__link {
    display: inline-block;
    margin-top: 8px;
    font-weight: 900;
    color: #0b6b2b;
    text-decoration: none;
}

.fc-mt-tooltip__link:hover {
    text-decoration: underline;
}

.fc-mt-seq__bg {
    fill: #ffffff;
    stroke: rgba(0,0,0,0.12);
    stroke-width: 1;
}

.fc-mt-seq__title {
    font-size: 12px;
    font-weight: 800;
    fill: rgba(0,0,0,0.55);
}

.fc-mt-seq__line {
    font-size: 14px;
    font-weight: 800;
    fill: #111;
}

.fc-mt-seq__rail,
.fc-mt-seq__toRoot {
    stroke: rgba(0,0,0,0.25);
    stroke-width: 1;
}

.fc-mt-seq__dot {
    fill: rgba(0,0,0,0.35);
}
/* ==========================================================================
   Position Card  (fc-mt-poscard)
   Dark-themed floating panel, opened by clicking the ⓘ circle on a tree node.
   ========================================================================== */

.fc-mt-poscard {
    position: absolute;
    z-index: 10500;
    width: 364px;
    max-height: min(82vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #1e2318;
    border: 1px solid #3a4a2a;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.55);
    color: #ccc;
    font-size: 13px;
    line-height: 1.4;
}

/* Header */
.fc-mt-poscard__hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px 8px;
    background: #252b1e;
    border-bottom: 1px solid #2e3828;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}
.fc-mt-poscard__hd-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fc-mt-poscard__move {
    font-size: 17px;
    font-weight: 700;
    color: #eee;
    font-family: dejavu_sans, monospace, sans-serif;
    line-height: 1.2;
}

.fc-mt-poscard__fig {
    font-size: 1.2em;
    vertical-align: 0.08em;
    line-height: 1;
    display: inline-block;
}
.fc-mt-poscard__years {
    font-size: 11px;
    color: #6a7a5a;
}
.fc-mt-poscard__close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2e3828;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 15px;
    line-height: 22px;
    text-align: center;
    padding: 0;
    transition: background 0.15s;
}
.fc-mt-poscard__close:hover { background: #c44; color: #fff; }

/* Body */
.fc-mt-poscard__body {
    padding: 10px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}
.fc-mt-poscard__body--loading {
    align-items: center;
    gap: 8px;
    padding: 20px 14px;
    color: #7a8a6a;
    font-size: 13px;
}
.fc-mt-poscard__nodata,
.fc-mt-poscard__err {
    color: #8a9a7a;
    font-size: 12px;
    padding: 8px 0;
}
.fc-mt-poscard__err { color: #e57373; }

/* Spinner */
.fc-mt-poscard__spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid #3a4a2a;
    border-top-color: #7dc832;
    border-radius: 50%;
    animation: fc-spin 0.75s linear infinite;
    flex-shrink: 0;
}
@keyframes fc-spin { to { transform: rotate(360deg); } }

/* Stats row */
.fc-mt-poscard__stats-row {
    display: flex;
    gap: 8px;
}
.fc-mt-poscard__stat {
    flex: 1;
    background: #252b1e;
    border-radius: 8px;
    padding: 7px 8px;
    text-align: center;
}
.fc-mt-poscard__stat .val {
    font-size: 15px;
    font-weight: 700;
    color: #eee;
}
.fc-mt-poscard__stat .lbl {
    font-size: 10px;
    color: #7dc832;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1px;
}

/* W/D/B bar */
.fc-mt-poscard__wdb {}
.fc-mt-poscard__wdb-bar {
    display: flex;
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    gap: 1px;
}
.fc-mt-poscard__wdb-w { background: #7dc832; }
.fc-mt-poscard__wdb-d { background: #666; }
.fc-mt-poscard__wdb-b { background: #c44; }
.fc-mt-poscard__wdb-lbl {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    font-size: 11px;
}
.fc-mt-poscard__wdb-lbl .w { color: #7dc832; }
.fc-mt-poscard__wdb-lbl .d { color: #888; }
.fc-mt-poscard__wdb-lbl .b { color: #c55; }
.fc-mt-poscard__wdb-context {
    color: #6d745f;
    margin-left: auto;
}

/* Section label */
.fc-mt-poscard__section { display: flex; flex-direction: column; gap: 5px; }
.fc-mt-poscard__section-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a6a4a;
}
.fc-mt-poscard__section svg {
    display: block;
    margin-top: 4px;
}

/* Timeline sparkline */
.fc-mt-poscard__tl-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 42px;
}
.fc-mt-poscard__tl-bar {
    flex: 1;
    min-width: 4px;
    background: #7dc832;
    border-radius: 2px 2px 0 0;
    opacity: 0.80;
    transition: opacity 0.1s;
}
.fc-mt-poscard__tl-bar:hover { opacity: 1; }
.fc-mt-poscard__tl-years {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}
.fc-mt-poscard__tl-years span {
    flex: 1;
    font-size: 9px;
    color: #5a6a4a;
    text-align: center;
    min-width: 4px;
    overflow: hidden;
}

.fc-mt-poscard__timelineChart {
    position: relative;
    margin-top: 2px;
}

.fc-mt-poscard__timelineSvg {
    display: block;
    width: 100%;
    overflow: visible;
}

.fc-mt-poscard__tl-dot {
    cursor: pointer;
    transition: r 0.14s ease, transform 0.14s ease, fill 0.14s ease;
}

.fc-mt-poscard__tl-dot:hover,
.fc-mt-poscard__tl-dot:focus {
    r: 5;
    fill: #b9e86d;
    outline: none;
}

.fc-mt-poscard__timelineTip {
    position: absolute;
    z-index: 2;
    min-width: 112px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(20, 24, 16, 0.96);
    border: 1px solid #3a4a2a;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    color: #d7dfcf;
    font-size: 11px;
    line-height: 1.35;
    pointer-events: none;
    white-space: nowrap;
}

.fc-mt-poscard__timelineTip[hidden] {
    display: none;
}

.fc-mt-poscard__timelineTipYear {
    color: #9ecf55;
    font-weight: 700;
    margin-bottom: 2px;
}

.fc-mt-poscard__timelineChart {
    position: relative;
    margin-top: 2px;
}

.fc-mt-poscard__timelineSvg {
    display: block;
    width: 100%;
    overflow: visible;
}

.fc-mt-poscard__tl-dot {
    cursor: pointer;
    transition: r 0.14s ease, fill 0.14s ease;
}

.fc-mt-poscard__tl-dot:hover,
.fc-mt-poscard__tl-dot:focus {
    r: 5;
    fill: #b9e86d;
    outline: none;
}

.fc-mt-poscard__timelineTip {
    position: absolute;
    z-index: 2;
    min-width: 112px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(20, 24, 16, 0.96);
    border: 1px solid #3a4a2a;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    color: #d7dfcf;
    font-size: 11px;
    line-height: 1.35;
    pointer-events: none;
    white-space: nowrap;
}

.fc-mt-poscard__timelineTip[hidden] {
    display: none;
}

.fc-mt-poscard__timelineTipYear {
    color: #9ecf55;
    font-weight: 700;
    margin-bottom: 2px;
}

.fc-mt-poscard__resultChart {
    position: relative;
    margin-top: 2px;
}

.fc-mt-poscard__resultSvg {
    display: block;
    width: 100%;
    overflow: visible;
}

.fc-mt-poscard__resultLegend {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 4px;
    font-size: 10px;
    color: #8a9a7a;
}

.fc-mt-poscard__resultLegendItem {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fc-mt-poscard__resultLegendDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.fc-mt-poscard__resultLegendDot--w { background: #7dc832; }
.fc-mt-poscard__resultLegendDot--d { background: #888; }
.fc-mt-poscard__resultLegendDot--b { background: #c55; }

.fc-mt-poscard__rt-dot {
    cursor: pointer;
    transition: r 0.14s ease, fill 0.14s ease;
}

.fc-mt-poscard__rt-dot:hover,
.fc-mt-poscard__rt-dot:focus {
    r: 5;
    outline: none;
}

.fc-mt-poscard__rt-dot--w:hover,
.fc-mt-poscard__rt-dot--w:focus {
    fill: #9ae24b;
}

.fc-mt-poscard__rt-dot--d:hover,
.fc-mt-poscard__rt-dot--d:focus {
    fill: #b0b0b0;
}

.fc-mt-poscard__rt-dot--b:hover,
.fc-mt-poscard__rt-dot--b:focus {
    fill: #e06a6a;
}

.fc-mt-poscard__resultTip {
    position: absolute;
    z-index: 2;
    min-width: 160px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(20, 24, 16, 0.96);
    border: 1px solid #3a4a2a;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    color: #d7dfcf;
    font-size: 11px;
    line-height: 1.35;
    pointer-events: none;
    white-space: nowrap;
}

.fc-mt-poscard__resultTip[hidden] {
    display: none;
}

.fc-mt-poscard__resultTipYear {
    color: #9ecf55;
    font-weight: 700;
    margin-bottom: 2px;
}

/* Top players table */
.fc-mt-poscard__players {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.fc-mt-poscard__players {
    table-layout: fixed;
    width: 100%;
}
.fc-mt-poscard__players col.col-name  { width: auto; }
.fc-mt-poscard__players col.col-elo   { width: 46px; }
.fc-mt-poscard__players col.col-g     { width: 32px; }
.fc-mt-poscard__players col.col-color { width: 72px; }
.fc-mt-poscard__players thead th {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 400;
    color: #5a6a4a;
    padding: 0 4px 4px;
    text-align: left;
}
.fc-mt-poscard__players thead th.num,
.fc-mt-poscard__players thead th.wdb-hd { text-align: right; }
.fc-mt-poscard__players tbody td {
    padding: 4px 4px;
    color: #bbb;
    border-top: 1px solid #252b1e;
    vertical-align: middle;
}
/* Name column: let col-name auto width handle it; clip with ellipsis */
.fc-mt-poscard__players td.name-cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 0; /* forces ellipsis to respect table-layout:fixed col width */
}
.fc-mt-poscard__players tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fc-mt-poscard__players tbody td.wdb-cell {
    text-align: right;
    font-size: 11px;
    white-space: nowrap;
}
/* Legacy single-letter result classes */
.fc-mt-poscard__players .w { color: #7dc832; }
.fc-mt-poscard__players .d { color: #888; }
.fc-mt-poscard__players .b { color: #c55; }

/* Per-color result classes */
.fc-mt-poscard__players .wc   { color: #7dc832; font-weight: 500; }  /* win */
.fc-mt-poscard__players .dc   { color: #888; }                        /* draw */
.fc-mt-poscard__players .lc   { color: #c55; }                        /* loss */
.fc-mt-poscard__players .muted { color: #4a5a3a; }

/* Two color columns */
.fc-mt-poscard__players .color-hd {
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.04em;
}
.fc-mt-poscard__players .color-cell {
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 6px;
    vertical-align: middle;
}
.fc-mt-poscard__players .white-cell {
    border-left: 2px solid #2e3828;
    background: rgba(255,255,255,0.025);
}
.fc-mt-poscard__players .black-cell {
    border-left: 1px solid #2e3828;
}
/* Legacy text fed badge — kept for fallback */
.fc-mt-poscard__fed {
    display: inline-block;
    min-width: 28px;
    font-size: 9px;
    background: #2a3820;
    border: 1px solid #3a4a2a;
    border-radius: 3px;
    text-align: center;
    padding: 1px 3px;
    color: #7dc832;
    font-family: monospace;
    margin-right: 3px;
}
/* Federation flag icon in the players table */
.fc-mt-poscard__flag {
    width: 16px !important;
    height: 12px !important;
    margin-right: 5px;
    vertical-align: -1px;
    flex-shrink: 0;
}
/* Fallback text badge when federation has no flag mapping */
.fc-mt-poscard__fed-txt {
    display: inline-block;
    font-size: 9px;
    background: #2a3820;
    border: 1px solid #3a4a2a;
    border-radius: 3px;
    padding: 1px 3px;
    color: #7dc832;
    font-family: monospace;
    margin-right: 4px;
    vertical-align: 1px;
}

/* Footer buttons */
.fc-mt-poscard__ft {
    display: flex;
    gap: 6px;
    padding: 8px 14px 10px;
    background: #252b1e;
    border-top: 1px solid #2e3828;
    border-radius: 0 0 12px 12px;
}
.fc-mt-poscard__btn-primary,
.fc-mt-poscard__btn-sec {
    flex: 1;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #3a4a2a;
    transition: background 0.15s;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}
.fc-mt-poscard__btn-primary {
    background: #7dc832;
    color: #1a2a0a;
    border-color: #7dc832;
}
.fc-mt-poscard__btn-primary:hover { background: #8fe038; }
.fc-mt-poscard__btn-sec {
    background: transparent;
    color: #7dc832;
}
.fc-mt-poscard__btn-sec:hover { background: #2a3820; }
.fc-mt-poscard__btn-primary.is-disabled,
.fc-mt-poscard__btn-sec.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Position vs line count disambiguation */
.fc-mt-poscard__count-context {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 4px 2px;
    font-size: 11px;
    line-height: 1.3;
}
.fc-mt-poscard__count-context .ctx-pos {
    color: #9ecf55;
    font-weight: 600;
}
.fc-mt-poscard__count-context .ctx-sep {
    color: #555;
}
.fc-mt-poscard__count-context .ctx-line {
    color: #8aaabb;
    font-weight: 600;
}

/* Dual-button footer: stack vertically so both labels are fully readable */
.fc-mt-poscard__ft--dual {
    flex-direction: column;
    gap: 5px;
}

/* ── Stockfish lazy panel ──────────────────────────────────────────────── */

.fc-mt-poscard__sf {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid #2e3828;
}

.fc-mt-poscard__sf-btn {
    width: 100%;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid #3a4a2a;
    border-radius: 7px;
    color: #7dc832;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.fc-mt-poscard__sf-btn:hover { background: #2a3820; }

.fc-mt-poscard__sf-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #7a8a6a;
    min-height: 20px;
}

.fc-mt-poscard__sf-status[hidden] { display: none; }
.fc-mt-poscard__sf-eval[hidden]   { display: none; }

/* Eval bar */
.fc-mt-poscard__sf-eval {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fc-mt-poscard__sf-evalbar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #3a3a3a;       /* slightly lighter — black/losing side */
    overflow: hidden;
    border: 1px solid #4a5a3a; /* subtle green-grey frame */
    box-sizing: border-box;
}

.fc-mt-poscard__sf-evalbar-fill {
    height: 100%;
    background: #e8e8e8;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.fc-mt-poscard__sf-evaltxt {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #ccc;
    min-width: 40px;
    text-align: right;
}

.fc-mt-poscard__sf-depth {
    font-size: 10px;
    color: #5a6a4a;
    min-width: 24px;
}

/* Analysis lines */
.fc-mt-poscard__sf-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fc-mt-poscard__sf-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
}
.fc-mt-poscard__sf-mpv {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2e3828;
    color: #7dc832;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fc-mt-poscard__sf-score {
    flex-shrink: 0;
    min-width: 42px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #ccc;
}
.fc-mt-poscard__sf-score.pos { color: #7dc832; }
.fc-mt-poscard__sf-score.neg { color: #c55; }
.fc-mt-poscard__sf-pv {
    color: #8a9a7a;
    font-family: monospace;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lightweight hover tooltip additions */
.fc-mt-tooltip__wdb-bar {
    display: flex;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    margin: 5px 0 3px;
    gap: 1px;
}
.fc-mt-tooltip__wdb-bar div { min-width: 2px; }
.fc-mt-tooltip__hint {
    font-size: 11px;
    color: #aaa;
    margin-top: 5px;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 4px;
}

/* Enriched tooltip — header row with board thumbnail */
.fc-mt-tooltip__header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.fc-mt-tooltip__header-left {
    flex: 1;
    min-width: 0;
}

.fc-mt-tooltip__board {
    flex-shrink: 0;
    line-height: 0;  /* collapse SVG whitespace */
    border-radius: 3px;
    overflow: hidden;
}

/* ECO badge */
.fc-mt-tooltip__eco {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 3px;
}

.fc-mt-tooltip__eco-code {
    font-size: 10px;
    font-weight: 700;
    color: #0b6b2b;
    letter-spacing: 0.04em;
}

.fc-mt-tooltip__eco-name {
    font-size: 11px;
    color: #444;
    line-height: 1.3;
}

/* Verdict line (replaces inline style) */
.fc-mt-tooltip__verdict {
    font-size: 11px;
    font-style: italic;
    color: #666;
    margin: 2px 0;
}

/* ==========================================================================
   Board Modal  (fc-mt-boardmodal)
   Draggable fixed panel with a canvas chess board.
   ========================================================================== */

.fc-mt-boardmodal {
    position: fixed;
    z-index: 10600;
    top: 60px;
    right: 20px;
    width: 310px;
    background: #1a1e14;
    border: 1px solid #3a4a2a;
    border-radius: 12px;
    box-shadow: 0 16px 56px rgba(0,0,0,0.65);
    overflow: hidden;
    user-select: none;
}

/* Drag handle */
.fc-mt-boardmodal__drag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #222b18;
    border-bottom: 1px solid #2e3828;
    cursor: grab;
}
.fc-mt-boardmodal__drag:active { cursor: grabbing; }

.fc-mt-boardmodal__grip {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(2, 4px);
    gap: 2px;
    flex-shrink: 0;
}
.fc-mt-boardmodal__grip span {
    display: block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #4a5a3a;
}
.fc-mt-boardmodal__title {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: #7dc832;
    font-family: dejavu_sans, monospace, sans-serif;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.fc-mt-boardmodal__close {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #2e3828;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    padding: 0;
    flex-shrink: 0;
}
.fc-mt-boardmodal__close:hover { background: #c44; color: #fff; }

/* Move path below header */
.fc-mt-boardmodal__path {
    padding: 4px 12px;
    font-size: 11px;
    color: #7dc832;
    font-family: dejavu_sans, monospace, sans-serif;
    background: #1e2318;
    border-bottom: 1px solid #2e3828;
    min-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Board canvas */
.fc-mt-boardmodal__board-wrap {
    padding: 0;
    background: #161a10;
}
.fc-mt-boardmodal__canvas {
    display: block;
    width: 100%;
    height: auto;
}

/* Footer */
.fc-mt-boardmodal__ft {
    padding: 7px 10px;
    background: #222b18;
    border-top: 1px solid #2e3828;
}
.fc-mt-boardmodal__play-btn {
    width: 100%;
    padding: 6px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #3a4a2a;
    color: #7dc832;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.fc-mt-boardmodal__play-btn:hover { background: #2a3820; }
/* ==========================================================================
   Board viewer panel  (fc-mtsearch__boardOverlay / boardPanel)
   Draggable fixed panel containing the real FelixChess board viewer.
   Managed by movetree-display.js — opened via the "Show Board" toolbar button.
   ========================================================================== */

/* Overlay: position:fixed, no backdrop — the panel is draggable, not modal */
.fc-mtsearch__boardOverlay {
    position: fixed;
    z-index: 10200;
    top: 70px;
    right: 24px;
    pointer-events: none;
    /* width and height come from the panel inside */
}

/* The draggable panel itself */
.fc-mtsearch__boardPanel {
    width: 460px;              /* wider: room for eval bar + board side by side */
    background: var(--fc-bg, #1e2318);
    border: 1px solid #3a4a2a;
    border-radius: 12px;
    box-shadow: 0 16px 56px rgba(0,0,0,0.65);
    overflow: visible;         /* allow analyzer to show below board */
    user-select: none;
    max-height: 92vh;          /* never exceed viewport height */
    pointer-events: auto;
}

/* ── Drag handle ── */
.fc-mtsearch__boardPanel-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #252b1e;
    border-bottom: 1px solid #2e3828;
    cursor: grab;
}
.fc-mtsearch__boardPanel-hd:active { cursor: grabbing; }

.fc-mtsearch__boardPanel-grip {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(2, 4px);
    gap: 2px;
    flex-shrink: 0;
}
.fc-mtsearch__boardPanel-grip span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #4a5a3a;
}

.fc-mtsearch__boardPanel-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #7dc832;
    font-family: dejavu_sans, monospace, sans-serif;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fc-mtsearch__boardPanel-close {
    position: relative;
    z-index: 10005;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2e3828;
    border: none;
    pointer-events: auto;
    cursor: pointer;
    color: #888;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}
.fc-mtsearch__boardPanel-close:hover { background: #c44; color: #fff; }

/* ── Panel body — contains the boardviewer component ── */
.fc-mtsearch__boardPanel-body {
    padding: 8px;
    overflow-y: auto;
    max-height: calc(92vh - 40px); /* 40px = drag handle height */
}

/* ── Constrain and adapt the boardviewer inside this panel ── */

/* Show the viewer element itself (it has hidden by default) */
.fc-mtsearch__boardPanel-body [data-fc-viewer] {
    display: block !important;  /* override hidden once initViewer is called */
    width: 100%;
}

/* Cancel the vertical grid (board | movelist side by side).
   Inside this panel we want a single stacked column. */
.fc-mtsearch__boardPanel-body .fc-boardViewer[data-movelist-layout="vertical"] {
    display: block;
}

/* Move list — scrollable, bounded height, visible in the panel.
   Override the vertical-layout grid trick (height:0; min-height:100%) from
   felixchessboard.css — it only makes sense inside a CSS grid row; under
   display:block (our panel override) min-height:100% resolves to 0 and
   collapses the list to zero height. */
.fc-mtsearch__boardPanel-body .fc-boardViewer__moveList {
    height: auto !important;
    min-height: 0 !important;
    max-height: 160px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Board and boardPane fill the full panel width */
.fc-mtsearch__boardPanel-body .fc-boardViewer__boardPane {
    max-width: 100%;
    width: 100%;
}
.fc-mtsearch__boardPanel-body .fc-boardViewer__board {
    width: 100%;
    max-width: 100%;
}

/* In the panel the vertical-layout reserved-space trick for the analyzer
   is not needed (no movelist to stabilise). Restore display:none when
   hidden so the panel stays compact before Stockfish starts. */
.fc-mtsearch__boardPanel-body
.fc-boardViewer[data-movelist-layout="vertical"]
.fc-boardViewer__analyzer[hidden] {
    display: none !important;
    visibility: visible;
}

/* Analyzer — scrollable, compact font, full width */
.fc-mtsearch__boardPanel-body .fc-boardViewer__analyzer {
    font-size: 11px;
    max-height: 260px;
    overflow-y: auto;
    max-width: 100%;
    margin-top: 8px;
}

/* ── Show Board toolbar button ── */
/* boardBtn mirrors navigatorBtn exactly — same size, shape, colour. */
.fc-mtsearch__boardBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    background: rgba(0, 0, 0, 0.06);
    color: #111111;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
    white-space: nowrap;
    line-height: 1;
}
.fc-mtsearch__boardBtn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    flex-shrink: 0;
}
.fc-mtsearch__boardBtn:hover {
    background: rgba(0, 0, 0, 0.11);
    border-color: rgba(0, 0, 0, 0.40);
    transform: translateY(-1px);
}
/* Active state (panel open) — subtle highlight only, no colour change */
.fc-mtsearch__boardBtn.is-on {
    background: rgba(0, 0, 0, 0.14);
    border-color: rgba(0, 0, 0, 0.50);
}
/* Fix 1: hidden attribute must win over display:inline-flex */
.fc-mtsearch__boardBtn[hidden] {
    display: none;
}

/* ── Toolbar actions group (Show Board + Navigate Tree side by side) ── */
.fc-mtsearch__treeActions {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* ==========================================================================
   Active tree node highlight (fc-mt-node--active)
   Applied/cleared by highlightTreeNode() in movetree-display.js whenever
   the board position changes (node click, nav prev/next, variation click).
   ========================================================================== */

.fc-mt-node--active .fc-mt-nodeText {
    fill: #7dc832;
    font-weight: 800;
}

/* Pill rect injected behind the text via getBBox() + createElementNS */
.fc-mt-nodeHighlight {
    fill: rgba(125, 200, 50, 0.18);
    stroke: rgba(125, 200, 50, 0.55);
    stroke-width: 1;
}

/* Node classification — colors applied to text directly to beat inherited fill */
.fc-mt-node--best    .fc-mt-nodeText { fill: #27500A; font-weight: 700; }
.fc-mt-node--avoid   .fc-mt-nodeText { fill: #791F1F; font-weight: 700; }
.fc-mt-node--gambit  .fc-mt-nodeText { fill: #854F0B; font-weight: 700; }
.fc-mt-node--draw    .fc-mt-nodeText { fill: #5F5E5A; }
.fc-mt-node--neutral .fc-mt-nodeText { fill: #111; }

/* Also color the info dot to match — green for best, red for avoid */
.fc-mt-node--best   .fc-mt-infoDot { fill: #27500A; }
.fc-mt-node--avoid  .fc-mt-infoDot { fill: #791F1F; }
.fc-mt-node--gambit .fc-mt-infoDot { fill: #854F0B; }

/* ==========================================================================
   Perspective picker  (All / White / Black toggle + sort select)
   ========================================================================== */

/* Picker hidden until first tree loads — [hidden] must beat display:inline-flex */
.fc-mtsearch__perspectivePicker[hidden] {
    display: none;
}

.fc-mtsearch__perspectivePicker {
    display: inline-flex;
    border: 1.5px solid #999;
    border-radius: 7px;
    overflow: hidden;
    background: #f0f0f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.fc-mtsearch__perspectiveBtn {
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: #f0f0f0;
    color: #666;               /* muted — clearly inactive */
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.fc-mtsearch__perspectiveBtn + .fc-mtsearch__perspectiveBtn {
    border-left: 1px solid #ccc;
}

.fc-mtsearch__perspectiveBtn:hover:not(.is-active) {
    background: #e4e4e4;
    color: #333;
}

/* ALL active — dark grey, white text. Clearly selected. */
.fc-mtsearch__perspectiveBtn.is-active[data-perspective="all"] {
    background: #555;
    color: #fff;
    font-weight: 700;
}

/* WHITE active — white background, black text, strong top border accent */
.fc-mtsearch__perspectiveBtn.is-active[data-perspective="white"] {
    background: #fff;
    color: #111;
    font-weight: 700;
    border-top: 3px solid #111;
}

/* BLACK active — near-black background, white text */
.fc-mtsearch__perspectiveBtn.is-active[data-perspective="black"] {
    background: #1a1a1a;
    color: #f0f0f0;
    font-weight: 700;
}

/* Sort select — hidden until White or Black is active */
.fc-mtsearch__perspectiveSort[hidden] {
    display: none;
}

.fc-mtsearch__perspectiveSort {
    font-size: 12px;
    margin-left: 8px;
    padding: 5px 8px;
    border: 1.5px solid #999;
    border-radius: 6px;
    background: #f0f0f0;
    color: #444;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.fc-mt-legend {
    display: flex;
    gap: 14px;
    padding: 5px 4px 8px;
    font-size: 11px;
    font-weight: 500;
    flex-wrap: wrap;
    align-items: center;
}

.fc-mt-legend[hidden] { display: none; }

.fc-mt-legend__item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #333;   /* hardcoded dark — legend always sits on the white canvas */
}

.fc-mt-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.fc-mt-legend__item--best   .fc-mt-legend__dot { background: #27500A; }
.fc-mt-legend__item--neutral .fc-mt-legend__dot { background: #888780; }
.fc-mt-legend__item--avoid  .fc-mt-legend__dot { background: #791F1F; }
.fc-mt-legend__item--gambit .fc-mt-legend__dot { background: #854F0B; }

/* ==========================================================================
   Tooltip W/D/B labels and bar — white tooltip background
   ========================================================================== */

.fc-mt-tooltip__w { color: #27500A; font-weight: 600; }  /* dark green — White wins */
.fc-mt-tooltip__d { color: #555;    font-weight: 400; }  /* mid grey — draws */
.fc-mt-tooltip__b { color: #791F1F; font-weight: 600; }  /* dark red — Black wins */

.fc-mt-tooltip__bar {
    display: flex;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    margin: 4px 0 6px;
    gap: 1px;
}

.fc-mt-tooltip__bar-w { background: #639922; }
.fc-mt-tooltip__bar-d { background: #888780; }
.fc-mt-tooltip__bar-b { background: #E24B4A; }

/* Perspective coloring — applied via JS class on the pct spans */
.fc-mt-tooltip__pct--good { color: #27500A; }
.fc-mt-tooltip__pct--bad  { color: #791F1F; }

.fc-mt-tooltip__verdict {
    font-size: 11px;
    font-style: italic;
    color: #666;
    margin-top: 2px;
}

/**
 * CSS additions for facet-movetree-display.js
 * Add these rules to movetree-search.css (or the stylesheet loaded with the component).
 *
 * Issue 2 — virtual root label at D3 position
 * Issue 8 — selected move highlight
 */

/* ── [Issue 2] Virtual root node label (player / SPID name at D3 root position) ── */
.fc-mt-nodeText--root {
    fill: #a8e6a8;               /* same soft green as the selection chip */
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── [Issue 8] Selected move label highlight ── */
.fc-mt-nodeText--selected {
    fill: var(--fc-accent, #7dc832) !important;
    font-weight: 700;
}

/* Companion tooltip: move sequence line (Issue 7) */
.fc-mt-tooltip__seq {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--color-text-tertiary, #6a8a5a);
    margin-bottom: 4px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
    max-width: 100%;
}

.fc-mt-tooltip__bar-w { background: #e0e0e0; }
.fc-mt-tooltip__bar-d { background: #888; }
.fc-mt-tooltip__bar-b { background: #333; }

.fc-mtsearch__moveSeq {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px;
    background: var(--color-background-secondary, #1e2a14);
    border-bottom: 1px solid var(--color-border-tertiary, #2e3828);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    min-height: 30px;
    color: var(--color-text-primary, #d0e0c0);
    flex-shrink: 0;
}

/* Prevent display:flex from overriding the HTML [hidden] attribute */
.fc-mtsearch__moveSeq[hidden] {
    display: none;
}

.fc-mtsearch__moveSeq-line {
    color: var(--color-text-secondary, #9ab07a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ==========================================================================
   Player Banner — DOM element rendered ABOVE .fc-mtsearch__treeViewport.
   Lives inside .fc-mtsearch__treePlaceholder but outside the scrollable
   viewport, so it stays fixed while the tree is panned left/right.
   ========================================================================== */

.fc-mt-playerBanner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    justify-content: center;
    padding: 0 4px 6px;
    line-height: 1;
    user-select: none;
}

.fc-mt-playerBanner__spacer {
    min-width: 0;
}

.fc-mt-playerBanner__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
}

.fc-mt-playerBanner__colorToggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
}

.fc-movetree-player-root {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    width: 100%;
    height: 100%;
    line-height: 1;
}

.fc-movetree-player-root__anchor {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
}

.fc-movetree-player-root__identity {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(11, 107, 43, 0.24);
    border-radius: 999px;
    padding: 5px 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

.fc-movetree-player-root__side-toggle {
    grid-column: 3;
    justify-self: start;
}

.fc-movetree-player-root .fc-mt-colorBtn {
    appearance: none;
    border-color: rgba(11, 107, 43, 0.28);
    border-style: solid;
    border-width: 1px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    color: #244018;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
}

.fc-movetree-player-root .fc-mt-colorBtn:hover:not(.is-active) {
    background: rgba(11, 107, 43, 0.10);
    border-color: rgba(11, 107, 43, 0.45);
    color: #0b6b2b;
}

.fc-movetree-player-root .fc-mt-colorBtn[data-color="all"].is-active {
    background: rgba(11, 107, 43, 0.88);
    border-color: #0b6b2b;
    color: #ffffff;
}

.fc-movetree-player-root .fc-mt-colorBtn[data-color="white"].is-active {
    background: #ffffff;
    border-color: #111111;
    color: #111111;
}

.fc-movetree-player-root .fc-mt-colorBtn[data-color="black"].is-active {
    background: #141414;
    border-color: #141414;
    color: #ffffff;
}

/* Flag — same sizing contract as board-captions / flag-icons library */
.fc-mt-playerBanner__flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;
}
.fc-mt-playerBanner__flag--fide {
    width: 24px;
}

/* FIDE title badge (GM, IM, WGM …) — dark accent green */
.fc-mt-playerBanner__title {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #0b6b2b;
    background: rgba(11, 107, 43, 0.10);
    border: 1px solid rgba(11, 107, 43, 0.30);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.6;
    flex-shrink: 0;
}

/* Canonical name — dark, high-contrast on white canvas */
.fc-mt-playerBanner__name {
    font-size: 13px;
    font-weight: 800;
    color: #1a2a0a;   /* very dark green-black — readable on white */
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* ELO — muted dark, clearly secondary to name */
.fc-mt-playerBanner__elo {
    font-size: 12px;
    font-weight: 500;
    color: #3a5a2a;   /* dark muted green */
    white-space: nowrap;
}
/* ==========================================================================
   Navigator — rich facet chip (Player / Event "Current line" header)
   fc-nav__facet-chip: replaces the plain ctx-chip + ctx-games pair for
   player and event modes, showing flag · title · name · ELO + stats line.
   ========================================================================== */

.fc-nav__ctx-row-inner--facet {
    padding: 2px 0;
}

.fc-nav__facet-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.2;
}

/* Row 1: flag · title badge · name · ELO */
.fc-nav__facet-chip-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Flag — same sizing contract as board-captions */
.fc-nav__flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;
}
.fc-nav__flag--fide {
    width: 24px;
}

/* FIDE title badge */
.fc-nav__ptitle {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #b9ff3b;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(185, 255, 59, 0.38);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.6;
    flex-shrink: 0;
}

/* Player canonical name */
.fc-nav__facet-chip-name {
    font-size: 14px;
    font-weight: 800;
    color: #f3f3f3;
    line-height: 1.2;
}

/* Current ELO */
.fc-nav__chip-elo {
    font-size: 12px;
    font-weight: 600;
    color: #b7b7b7;
    white-space: nowrap;
}

/* Row 2: "19 games · Peak 2750" */
.fc-nav__facet-chip-row2 {
    font-size: 12px;
    color: #b7b7b7;
    line-height: 1.3;
    padding-left: 26px;   /* indent to align under name, past flag width */
}

/* ==========================================================================
   Mini navigator panel  (fc-mt-mininav)
   Draggable panel showing current line + next moves.
   ========================================================================== */

.fc-mt-mininav {
    position: absolute;
    z-index: 10300;
    top: 62px;
    right: 64px;
    width: 300px;
    background: #1e2318;
    border: 1px solid #3a4a2a;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    color: #ccc;
    font-size: 13px;
    user-select: none;
}

@media (max-width: 720px) {
    .fc-mt-mininav {
        right: 16px;
        top: 54px;
        width: min(300px, calc(100% - 32px));
    }
}

/* Drag handle */
.fc-mt-mininav__hd {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #252b1e;
    border-bottom: 1px solid #2e3828;
    border-radius: 12px 12px 0 0;
    cursor: grab;
}
.fc-mt-mininav__hd:active { cursor: grabbing; }

.fc-mt-mininav__grip {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(2, 4px);
    gap: 2px;
    flex-shrink: 0;
}
.fc-mt-mininav__grip span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #4a5a3a;
}

.fc-mt-mininav__title {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: #7dc832;
    letter-spacing: 0.04em;
}

.fc-mt-mininav__return {
    border: 1px solid rgba(185, 255, 59, 0.35);
    background: rgba(185, 255, 59, 0.08);
    color: #d8efbe;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

.fc-mt-mininav__return[hidden] {
    display: none;
}

.fc-mt-mininav__return:disabled {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.34);
    cursor: default;
}

.fc-mt-mininav__return:not(:disabled):hover {
    border-color: rgba(185, 255, 59, 0.68);
    background: rgba(185, 255, 59, 0.14);
    color: #ffffff;
}

.fc-mt-mininav__collapse {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.1s, background 0.1s;
}
.fc-mt-mininav__collapse:hover {
    color: #ccc;
    background: rgba(255, 255, 255, 0.06);
}
.fc-mt-mininav__body[hidden] {
    display: none;
}
.fc-mt-mininav[hidden] {
    display: none !important;
}
.fc-mt-mininav.is-collapsed {
    width: 260px;
    opacity: 0.95;
}
.fc-mt-mininav.is-collapsed .fc-mt-mininav__hd {
    border-bottom: none;
    border-radius: 12px;
}

/* Body */
.fc-mt-mininav__body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fc-mt-mininav__focus[hidden] {
    display: none;
}

.fc-mt-mininav__focus {
    padding: 8px 9px;
    border: 1px solid rgba(125, 200, 50, 0.22);
    border-radius: 8px;
    background: rgba(125, 200, 50, 0.08);
}

.fc-mt-mininav__focus-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.fc-mt-mininav__focus-label {
    color: rgba(185, 255, 59, 0.72);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
}

.fc-mt-mininav__focus-line {
    color: #aebca4;
    font-family: dejavu_sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 11px;
    line-height: 1.45;
}

.fc-mt-mininav__focus-token.is-current {
    color: #f3f7ec;
    font-weight: 800;
}

.fc-mt-mininav__focus-ellipsis {
    color: rgba(255, 255, 255, 0.44);
    margin-right: 3px;
}

/* Breadcrumb */
.fc-mt-mininav__bc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 12px;
    min-height: 22px;
}
.fc-mt-mininav__bc-tok {
    color: #8a9a7a;
}
.fc-mt-mininav__bc-tok.is-current {
    color: #eee;
    font-weight: 600;
}
.fc-mt-mininav__top {
    border: 1px solid rgba(125, 200, 50, 0.32);
    background: rgba(125, 200, 50, 0.08);
    color: #9ee042;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    padding: 2px 7px;
    cursor: pointer;
}
.fc-mt-mininav__top:disabled {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.34);
    cursor: default;
}
.fc-mt-mininav__top:not(:disabled):hover {
    border-color: rgba(185, 255, 59, 0.55);
    background: rgba(185, 255, 59, 0.13);
    color: #ffffff;
}
.fc-mt-mininav__bc-link {
    background: none;
    border: none;
    color: #7dc832;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(125, 200, 50, 0.4);
}
.fc-mt-mininav__bc-link:hover { color: #9ee042; }
.fc-mt-mininav__bc-sep {
    color: #4a5a3a;
    font-size: 11px;
    padding: 0 1px;
}
.fc-mt-mininav__bc-ellipsis {
    color: #4a5a3a;
    font-size: 11px;
    margin-right: 2px;
}

/* Next moves label */
.fc-mt-mininav__next-lbl {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4a5a3a;
}

/* Pills */
.fc-mt-mininav__next {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.fc-mt-mininav__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #3a4a2a;
    background: rgba(255, 255, 255, 0.04);
    color: #ccc;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    font-family: dejavu_sans, monospace, sans-serif;
}
.fc-mt-mininav__pill:hover {
    background: rgba(185, 255, 59, 0.12);
    border-color: rgba(185, 255, 59, 0.40);
    color: #fff;
}
.fc-mt-mininav__pill-cnt {
    font-size: 10px;
    color: #7dc832;
    font-weight: 600;
    font-family: sans-serif;
}
.fc-mt-mininav__empty {
    font-size: 11px;
    color: #4a5a3a;
}
.fc-mt-mininav__filter-note {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #7f8b74;
    line-height: 1.25;
}
.fc-mt-mininav__hidden-toggle {
    border: 1px solid rgba(125, 200, 50, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #9ccf64;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
}
.fc-mt-mininav__hidden-toggle:hover {
    border-color: rgba(185, 255, 59, 0.48);
    color: #b9ff3b;
}
.fc-mt-mininav__hidden-list {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.fc-mt-mininav__pill--hidden,
.fc-mt-mininav__pill--hidden:hover {
    border-color: rgba(125, 139, 116, 0.32);
    background: rgba(255, 255, 255, 0.025);
    color: #7f8b74;
    cursor: default;
}
.fc-mt-mininav__pill--hidden .fc-mt-mininav__pill-cnt {
    color: #7f8b74;
}

/* ==========================================================================
   ELO filter strip
   ========================================================================== */

.fc-mt-elofilter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 4px 6px;
    flex-wrap: wrap;
}

.fc-mt-elofilter[hidden] { display: none; }

.fc-mt-elofilter__label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.fc-mt-elofilter__btns {
    display: inline-flex;
    border: 1.5px solid #999;
    border-radius: 7px;
    overflow: hidden;
    background: #f0f0f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.fc-mt-elofilter__btn {
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 500;
    border: none;
    background: #f0f0f0;
    color: #666;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.fc-mt-elofilter__btn + .fc-mt-elofilter__btn {
    border-left: 1px solid #ccc;
}

.fc-mt-elofilter__btn:hover:not(.is-active) {
    background: #e4e4e4;
    color: #333;
}

.fc-mt-elofilter__btn.is-active {
    background: #555;
    color: #fff;
    font-weight: 700;
}

.fc-mt-elofilter__note {
    font-size: 11px;
    color: #666;
    font-style: italic;
    padding: 0 4px 4px;
}

.fc-mt-elofilter__note[hidden] { display: none; }

/* Novelty star badge on tree node */
/* .fc-mt-noveltyBadge was removed — novelty info now lives in the tooltip only */

/* Novelty line in tooltip */
.fc-mt-tooltip__novelty {
    font-size: 11px;
    color: #BA7517;
    font-weight: 600;
    margin-bottom: 2px;
}

/* ==========================================================================
   Phase 1 — Filter Bar  (fc-mt-filterbar)
   Unified control strip: min-games pills · ELO band · year range.
   Hidden until the first successful tree load; shown/hidden by JS.
   ========================================================================== */

.fc-mt-filterbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 2px 260px 7px 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    margin-bottom: 2px;
}

.fc-mt-filterbar[hidden] { display: none; }

@media (max-width: 900px) {
    .fc-mt-filterbar {
        padding-right: 4px;
    }

    .fc-mt-filterbar__group--year {
        flex-basis: 100%;
    }
}

/* ── Group: label + control cluster ── */
.fc-mt-filterbar__group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.fc-mt-filterbar__group[hidden],
.fc-mt-filterbar__group--year[hidden] {
    display: none !important;
}

/* Date group may wrap on narrow viewports */
.fc-mt-filterbar__group--year {
    flex-shrink: 1;
    min-width: 220px;
}

.fc-mt-filterbar__label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Min-games pill buttons ── */
.fc-mt-filterbar__btns {
    display: inline-flex;
    border: 1.5px solid #999;
    border-radius: 7px;
    overflow: hidden;
    background: #f0f0f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.fc-mt-filterbar__btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border: none;
    background: #f0f0f0;
    color: #666;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.fc-mt-filterbar__btn + .fc-mt-filterbar__btn {
    border-left: 1px solid #ccc;
}

.fc-mt-filterbar__btn:hover:not(.is-active) {
    background: #e4e4e4;
    color: #333;
}

.fc-mt-filterbar__btn.is-active {
    background: #0b6b2b;
    color: #fff;
    font-weight: 700;
}

/* ── Date filter (Phase 1: UI/state only) ── */
.fc-mt-filterbar__yearrange {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fc-mt-filterbar__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fc-mt-filterbar__select {
    height: 25px;
    padding: 2px 24px 2px 8px;
    border: 1px solid #b8b8b8;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.fc-mt-filterbar__select:focus {
    outline: none;
    border-color: #27500A;
    box-shadow: 0 0 0 2px rgba(39, 80, 10, 0.16);
}

.fc-mt-filterbar__date-fields {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.fc-mt-filterbar__date-fields[hidden],
.fc-mt-filterbar__date-field[hidden],
.fc-mt-filterbar__apply[hidden] {
    display: none !important;
}

.fc-mt-filterbar__date-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #666;
    white-space: nowrap;
}

.fc-mt-filterbar__year-input {
    width: 64px;
}

.fc-mt-filterbar__apply {
    height: 25px;
    padding: 0 10px;
    border: 1px solid #0b6b2b;
    border-radius: 6px;
    background: #0b6b2b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.fc-mt-filterbar__apply:hover {
    background: #0e7c33;
}

.fc-mt-filterbar__yearval {
    font-size: 11px;
    font-weight: 700;
    color: #0b6b2b;
    min-width: 30px;
    font-variant-numeric: tabular-nums;
}

/* Single "since year" slider */
.fc-mt-filterbar__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 4px;
    border-radius: 2px;
    background: #ddd;
    outline: none;
    cursor: pointer;
    accent-color: #0b6b2b;   /* modern browsers — colours both track fill and thumb */
}

/* Thumb — Webkit */
.fc-mt-filterbar__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0b6b2b;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
}

/* Thumb — Firefox */
.fc-mt-filterbar__slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0b6b2b;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.fc-mt-filterbar__slider::-webkit-slider-thumb:hover,
.fc-mt-filterbar__slider:focus::-webkit-slider-thumb {
    background: #0e8838;
    box-shadow: 0 0 0 3px rgba(11, 107, 43, 0.20);
}

.fc-mt-filterbar__slider::-moz-range-thumb:hover {
    background: #0e8838;
}

/* Disabled state — slider greyed out when year data is not available */
.fc-mt-filterbar__slider:disabled {
    cursor: not-allowed;
    accent-color: #bbb;
    opacity: 0.5;
}

.fc-mt-filterbar__slider:disabled::-webkit-slider-thumb {
    background: #bbb;
    cursor: not-allowed;
    box-shadow: none;
}

.fc-mt-filterbar__slider:disabled::-moz-range-thumb {
    background: #bbb;
    cursor: not-allowed;
}

/* ── Disabled group (year control when mode has no year data) ── */
.fc-mt-filterbar__group--disabled {
    opacity: 0.40;
    pointer-events: none;   /* block clicks on buttons/sliders */
    user-select: none;
}

/* The label itself still receives pointer events so its title tooltip shows */
.fc-mt-filterbar__group--disabled .fc-mt-filterbar__label {
    pointer-events: auto;
    cursor: default;
}

/* ── Label tooltip affordance (info badge) ── */
.fc-mt-filterbar__label--tip {
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.fc-mt-filterbar__tip-icon,
.fc-movetree-info-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: rgba(90, 169, 230, 0.10);
    color: #5aa9e6;
    font-size: 0;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
    cursor: default;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.fc-mt-filterbar__tip-icon::before,
.fc-movetree-info-help-icon::before {
    content: "i";
    font-size: 9px;
    line-height: 1;
}

.fc-mt-filterbar__label--tip:hover .fc-mt-filterbar__tip-icon,
.fc-movetree-info-help-icon:hover,
.fc-movetree-info-help-icon:focus {
    background: rgba(123, 188, 240, 0.16);
    color: #7bbcf0;
}

/* ==========================================================================
   Position Card — ELO filter badge  (fc-mt-poscard__elo-badge)
   Shown at the top of the card body when the tree was fetched with minElo > 0.
   Tells the player that the game count is ELO-filtered but W/D/B is all-games.
   ========================================================================== */

.fc-mt-poscard__elo-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    margin-bottom: 6px;
    border-radius: 7px;
    background: rgba(125, 200, 50, 0.10);
    border: 1px solid rgba(125, 200, 50, 0.28);
    font-size: 11px;
    font-weight: 600;
    color: #9ecf55;
    line-height: 1.3;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.fc-mt-poscard__elo-badge-icon {
    flex-shrink: 0;
}

.fc-mt-poscard__elo-badge-note {
    margin-left: auto;
    font-size: 10px;
    font-weight: 400;
    color: #6a7a5a;
    cursor: default;
    white-space: nowrap;
}

/* ==========================================================================
   Phase 2 — Spine Mode
   ========================================================================== */

/* ── Spine expander pill (+N) ───────────────────────────────────────────── */

.fc-mt-spineExpander {
    font-size: 10px;
    font-weight: 700;
    fill: #0b6b2b;
    cursor: pointer;
    user-select: none;
    font-family: system-ui, -apple-system, sans-serif;
    letter-spacing: 0.02em;
    transition: fill 0.12s;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
}

.fc-mt-spineExpander:hover {
    fill: #0e8838;
    text-decoration: underline;
}

.fc-mt-spineExpanderBg {
    fill: rgba(11, 107, 43, 0.10);
    stroke: rgba(11, 107, 43, 0.30);
    stroke-width: 1;
    rx: 4;
    cursor: pointer;
}

/* ── Main line only — toggle switch in filter bar ────────────────────────── */
/* Vertical separator between the data filters and the structural toggle     */

.fc-mt-filterbar__sep {
    width: 1px;
    height: 22px;
    background: rgba(0, 0, 0, 0.13);
    flex-shrink: 0;
    align-self: center;
    margin: 0 2px;
}

/* Label wrapper — cursor:pointer makes the whole label clickable */
.fc-mt-filterbar__toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
}

/* Toggle shell — contains the hidden checkbox + visible track */
.fc-mt-filterbar__toggle {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 19px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* The actual <input> is visually hidden but keeps keyboard / a11y working */
.fc-mt-filterbar__toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

/* The pill-shaped track that the thumb slides along */
.fc-mt-filterbar__toggle-track {
    display: block;
    width: 34px;
    height: 19px;
    border-radius: 9.5px;
    background: #ccc;
    transition: background 0.2s ease;
    position: relative;
}

/* Sliding thumb — CSS ::after on the track element */
.fc-mt-filterbar__toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease;
}

/* Checked state — green track, thumb slid right */
.fc-mt-filterbar__toggle-input:checked + .fc-mt-filterbar__toggle-track {
    background: #0b6b2b;
}

.fc-mt-filterbar__toggle-input:checked + .fc-mt-filterbar__toggle-track::after {
    transform: translateX(15px);
}

/* Focus ring on the hidden input — shown on the track instead */
.fc-mt-filterbar__toggle-input:focus-visible + .fc-mt-filterbar__toggle-track {
    outline: 2px solid #0b6b2b;
    outline-offset: 2px;
}

/* ── Spine chip — persistent compact indicator ─────────────────────────────
   Visible whenever spine mode is active, even when the filter bar is
   scrolled off screen.  Clicking it toggles spine mode, identical to
   flipping the toggle switch in the filter bar.                            */

.fc-mt-spine-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(11, 107, 43, 0.38);
    background: rgba(11, 107, 43, 0.09);
    color: #0b6b2b;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.5;
    transition: background 0.13s ease, border-color 0.13s ease;
    /* normalize button defaults */
    border-style: solid;
}

.fc-mt-spine-chip:hover {
    background: rgba(11, 107, 43, 0.17);
    border-color: rgba(11, 107, 43, 0.55);
}

.fc-mt-spine-chip[hidden] {
    display: none;
}

/* ==========================================================================
   Filter notice  (fc-mt-filter-notice)
   Shown inline below the tree trunk when the Min games filter has pruned
   every variation at the current position, so the player understands why
   the tree looks empty and can fix it in one click.
   ========================================================================== */

.fc-mt-filter-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 14px auto 0;
    max-width: 520px;
    background: rgba(160, 100, 10, 0.07);
    border: 1px solid rgba(160, 100, 10, 0.25);
    border-radius: 9px;
    font-size: 13px;
    color: #5a3a08;
    line-height: 1.4;
}

.fc-mt-filter-notice__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #9a6008;
}

.fc-mt-filter-notice__text {
    flex: 1;
}

.fc-mt-filter-notice__text strong {
    font-weight: 700;
    color: #3a2006;
}

.fc-mt-filter-notice__text em {
    font-style: normal;
    font-weight: 600;
}

.fc-mt-filter-notice__btn {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 6px;
    border: 1px solid rgba(160, 100, 10, 0.38);
    background: transparent;
    color: #7a4a08;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease;
}

.fc-mt-filter-notice__btn:hover {
    background: rgba(160, 100, 10, 0.12);
    border-color: rgba(160, 100, 10, 0.55);
}

/* ── Depth-prefix context header ──────────────────────────────────────────────
   Shown above the SVG tree when "Start at move N" > 0.
   Displays the hidden moves as a non-interactive breadcrumb so the player
   knows which line the visible tree is anchored to.                          */

.fc-mt-depth-prefix {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 4px;
    padding: 5px 12px;
    margin: 0 0 4px 0;
    background: rgba(0, 0, 0, 0.035);
    border-radius: 6px;
    font-size: 11px;
    color: #666;
    user-select: none;
    pointer-events: none;
}

.fc-mt-depth-prefix__label {
    font-weight: 700;
    color: #999;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}

.fc-mt-depth-prefix__move {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    color: #444;
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    padding: 1px 5px;
}

.fc-mt-depth-prefix__arrow {
    color: #bbb;
    font-size: 10px;
}
/* =============================================================================
   Game-line highlighting — nodes/links matching the pasted game's continuation
   ============================================================================= */
.fc-mt-node--game .fc-mt-nodeText {
    fill: #7a5200;
    font-weight: 800;
}
.fc-mt-link--game {
    stroke: rgba(160, 110, 0, 0.65);
    stroke-width: 2.5;
}
/* Active selection wins over game-line tint */
.fc-mt-node--game.fc-mt-node--active .fc-mt-nodeText {
    fill: #27500A;
}

/* Repo-empty notice shown in PGN mode when no repo games match the line */
.fc-mt-pgn-notice {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0 4px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(185, 255, 59, 0.07);
    border: 1px solid rgba(185, 255, 59, 0.20);
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
}
.fc-mt-pgn-notice__icon {
    font-size: 14px;
    opacity: 0.6;
    flex-shrink: 0;
}
/* =============================================================================
   Depth controls — "From move N · Show N moves"
   ============================================================================= */

.fc-mt-filterbar__group--depth {
    gap: 5px;
}

.fc-mt-filterbar__depth-label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: default;
    user-select: none;
}

/* Number input with native browser spinner visible */
.fc-mt-filterbar__num-input {
    width: 52px;
    padding: 3px 4px;
    border: 1.5px solid #999;
    border-radius: 6px;
    background: #f0f0f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    font-size: 11px;
    font-weight: 700;
    color: #111;
    text-align: center;
    outline: none;
    line-height: 1;
    transition: border-color 120ms ease;
}

.fc-mt-filterbar__num-input:focus {
    border-color: #27500A;
}

.fc-mt-filterbar__group--from-disabled .fc-mt-filterbar__depth-label[for="fc-startDepthInput"] {
    color: rgba(0, 0, 0, 0.35);
}

.fc-mt-filterbar__group--from-disabled [data-role="startDepthInput"] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* Separator dot between the two depth inputs */
.fc-mt-filterbar__depth-sep {
    font-size: 10px;
    color: #bbb;
    user-select: none;
}

/* Compact sequence in the breadcrumb — replaces the individual pill + arrow approach */
.fc-mt-depth-prefix__seq {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    color: #444;
    letter-spacing: 0.01em;
}
/* =============================================================================
   Preparation lens row — fc-mt-lens
   Shown below the filter bar once a tree is loaded.
   Lets the user overlay one player's move frequencies on the Opening tree.
   ============================================================================= */

.fc-mt-lens {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 4px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    flex-wrap: wrap;
}

.fc-mt-lens[hidden] { display: none; }

.fc-mt-lens__label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Input wrap: positions the dropdown relative to the input ── */
.fc-mt-lens__inputWrap {
    position: relative;
    flex: 0 1 220px;
}

.fc-mt-lens__input {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 10px;
    border: 1.5px solid #bbb;
    border-radius: 999px;
    background: #f7f7f7;
    font-size: 11px;
    color: #111;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.fc-mt-lens__input:focus {
    border-color: #1a6b8a;
    box-shadow: 0 0 0 2px rgba(26, 107, 138, 0.12);
}

.fc-mt-lens__input::placeholder {
    color: #aaa;
}

/* ── Autocomplete dropdown ── */
.fc-mt-lens__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    z-index: 200;
    overflow: hidden;
}

.fc-mt-lens__dropdown[hidden] { display: none; }

.fc-mt-lens__dropItem {
    padding: 7px 12px;
    font-size: 12px;
    color: #222;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 100ms ease;
}

.fc-mt-lens__dropItem:hover {
    background: rgba(26, 107, 138, 0.08);
}

.fc-mt-lens__dropItem--empty {
    color: #999;
    cursor: default;
    font-style: italic;
}
.fc-mt-lens__dropItem--empty:hover { background: none; }

/* ── Active player chip ── */
.fc-mt-lens__chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 10px;
    background: rgba(26, 107, 138, 0.10);
    border: 1px solid rgba(26, 107, 138, 0.35);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #1a6b8a;
}

.fc-mt-lens__chip[hidden] { display: none; }

.fc-mt-lens__chipClear {
    appearance: none;
    border: none;
    background: transparent;
    color: #1a6b8a;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 120ms ease;
}
.fc-mt-lens__chipClear:hover { opacity: 1; }

/* ── Lens badge on tree nodes — ★N in teal ── */
.fc-mt-lensBadge {
    fill: #1a6b8a;
    font-size: 9px;
    font-weight: 700;
    font-family: 'Segoe UI', system-ui, sans-serif;
    cursor: default;
    pointer-events: all;
}

/* ── Lens status message ── */
.fc-mt-lens__status {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}
.fc-mt-lens__status[hidden] { display: none; }

/* Loading pulse */
.fc-mt-lens__status--loading {
    color: #aaa;
    font-style: italic;
    animation: fc-lens-pulse 1s ease-in-out infinite alternate;
}
@keyframes fc-lens-pulse {
    from { opacity: 0.5; }
    to   { opacity: 1;   }
}

/* Positions found — teal to match the badges */
.fc-mt-lens__status--found {
    color: #1a6b8a;
    font-weight: 600;
}

/* No games in this opening — muted amber */
.fc-mt-lens__status--empty {
    color: #8a6500;
    font-style: italic;
}

/* ── Dropdown item layout: name left, game count right ── */
.fc-mt-lens__dropItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fc-mt-lens__dropName {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-mt-lens__dropCount {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 1px 6px;
}

/* Loading state: "…" */
.fc-mt-lens__dropCount--loading {
    color: #bbb;
    background: transparent;
}

/* Has games: teal badge */
.fc-mt-lens__dropCount--has {
    color: #1a6b8a;
    background: rgba(26, 107, 138, 0.10);
    border: 1px solid rgba(26, 107, 138, 0.25);
}

/* No games: grey, dimmed */
.fc-mt-lens__dropCount--none {
    color: #bbb;
    background: transparent;
}

/* Dim items with no games in this opening */
.fc-mt-lens__dropItem--nogames {
    opacity: 0.45;
}

/* Tooltip-style note below the active chip explaining position-based counting */
.fc-mt-lens__note {
    font-size: 10px;
    color: #aaa;
    font-style: italic;
    white-space: nowrap;
}
/* =============================================================================
   Phase 5b — "Your game" annotation in tooltip
   Shown when a PGN is pasted and the hovered node is on the game's continuation.
   Sits above the regular tooltip content as a distinct amber-tinted header.
   ============================================================================= */

.fc-mt-tooltip__game-annotation {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 6px;
    row-gap: 1px;
    align-items: baseline;
    padding: 7px 10px 8px;
    margin: -8px -8px 8px;   /* bleed to tooltip edges, gap below */
    background: rgba(122, 82, 0, 0.10);
    border-bottom: 1px solid rgba(122, 82, 0, 0.20);
    border-radius: 6px 6px 0 0;
}

.fc-mt-tooltip__game-icon {
    grid-column: 1;
    grid-row: 1;
    font-size: 12px;
    opacity: 0.75;
    line-height: 1;
}

.fc-mt-tooltip__game-label {
    grid-column: 2;
    grid-row: 1;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7a5200;
}

.fc-mt-tooltip__game-move {
    grid-column: 3;
    grid-row: 1;
    font-size: 10px;
    color: #a07030;
    text-align: right;
}

.fc-mt-tooltip__game-players {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 11px;
    font-weight: 500;
    color: #5a3c00;
    margin-top: 3px;
}

.fc-mt-tooltip__game-meta {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 10px;
    color: #8a6530;
    font-style: italic;
}

/* =============================================================================
   Phase 5b — "Your game" annotation in tooltip
   ============================================================================= */

.fc-mt-tooltip__game-annotation {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 6px;
    row-gap: 1px;
    align-items: baseline;
    padding: 7px 10px 8px;
    margin: -8px -8px 8px;
    background: rgba(122, 82, 0, 0.10);
    border-bottom: 1px solid rgba(122, 82, 0, 0.20);
    border-radius: 6px 6px 0 0;
}

.fc-mt-tooltip__game-icon {
    grid-column: 1; grid-row: 1;
    font-size: 12px;
    opacity: 0.75;
    line-height: 1;
}

.fc-mt-tooltip__game-label {
    grid-column: 2; grid-row: 1;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7a5200;
}

.fc-mt-tooltip__game-move {
    grid-column: 3; grid-row: 1;
    font-size: 10px;
    color: #a07030;
    text-align: right;
}

.fc-mt-tooltip__game-players {
    grid-column: 1 / -1; grid-row: 2;
    font-size: 11px;
    font-weight: 500;
    color: #5a3c00;
    margin-top: 3px;
}

.fc-mt-tooltip__game-meta {
    grid-column: 1 / -1; grid-row: 3;
    font-size: 10px;
    color: #8a6530;
    font-style: italic;
}

/* =============================================================================
   Preparation lens row — fc-mt-lens (Phase 5a)
   ============================================================================= */

.fc-mt-lens {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 4px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    flex-wrap: wrap;
}
.fc-mt-lens[hidden] { display: none; }

.fc-mt-lens__label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    flex-shrink: 0;
}

.fc-mt-lens__inputWrap {
    position: relative;
    flex: 0 1 220px;
}

.fc-mt-lens__input {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 10px;
    border: 1.5px solid #bbb;
    border-radius: 999px;
    background: #f7f7f7;
    font-size: 11px;
    color: #111;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.fc-mt-lens__input:focus {
    border-color: #1a6b8a;
    box-shadow: 0 0 0 2px rgba(26, 107, 138, 0.12);
}
.fc-mt-lens__input::placeholder { color: #aaa; }

.fc-mt-lens__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    z-index: 200;
    overflow: hidden;
}
.fc-mt-lens__dropdown[hidden] { display: none; }

.fc-mt-lens__dropItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    font-size: 12px;
    color: #222;
    cursor: pointer;
    transition: background 100ms ease;
}
.fc-mt-lens__dropItem:hover { background: rgba(26,107,138,0.08); }
.fc-mt-lens__dropItem--empty { color: #999; cursor: default; font-style: italic; }
.fc-mt-lens__dropItem--empty:hover { background: none; }
.fc-mt-lens__dropItem--nogames { opacity: 0.45; }

.fc-mt-lens__dropName {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-mt-lens__dropCount {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 1px 6px;
}
.fc-mt-lens__dropCount--loading { color: #bbb; }
.fc-mt-lens__dropCount--has {
    color: #1a6b8a;
    background: rgba(26,107,138,0.10);
    border: 1px solid rgba(26,107,138,0.25);
}
.fc-mt-lens__dropCount--none { color: #bbb; }

.fc-mt-lens__chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 10px;
    background: rgba(26,107,138,0.10);
    border: 1px solid rgba(26,107,138,0.35);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #1a6b8a;
}
.fc-mt-lens__chip[hidden] { display: none; }

.fc-mt-lens__chipClear {
    appearance: none;
    border: none;
    background: transparent;
    color: #1a6b8a;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 120ms ease;
}
.fc-mt-lens__chipClear:hover { opacity: 1; }

.fc-mt-lens__status {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}
.fc-mt-lens__status[hidden] { display: none; }
.fc-mt-lens__status--loading {
    color: #aaa;
    font-style: italic;
    animation: fc-lens-pulse 1s ease-in-out infinite alternate;
}
@keyframes fc-lens-pulse { from { opacity: 0.5; } to { opacity: 1; } }
.fc-mt-lens__status--found { color: #1a6b8a; font-weight: 600; }
.fc-mt-lens__status--empty { color: #8a6500; font-style: italic; }

.fc-mt-lensBadge {
    fill: #1a6b8a;
    font-size: 9px;
    font-weight: 700;
    font-family: 'Segoe UI', system-ui, sans-serif;
    cursor: default;
    pointer-events: all;
}

/* Depth controls */
.fc-mt-filterbar__group--depth { gap: 5px; }
.fc-mt-filterbar__depth-label {
    font-size: 11px; font-weight: 600; color: #555;
    white-space: nowrap; flex-shrink: 0;
    cursor: default; user-select: none;
}
.fc-mt-filterbar__num-input {
    width: 52px; padding: 3px 4px;
    border: 1.5px solid #999; border-radius: 6px;
    background: #f0f0f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    font-size: 11px; font-weight: 700; color: #111;
    text-align: center; outline: none; line-height: 1;
    transition: border-color 120ms ease;
}
.fc-mt-filterbar__num-input:focus { border-color: #27500A; }
.fc-mt-filterbar__depth-sep { font-size: 10px; color: #bbb; user-select: none; }

/* ── Position Comment block ────────────────────────────────────────────────── */
.fc-poscard__comment {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fc-border, #2a2a2a);
    font-size: 0.85rem;
    line-height: 1.5;
}
.fc-poscard__comment p { margin: 0 0 6px 0; }
.fc-poscard__comment ul {
    margin: 4px 0 0 0;
    padding-left: 1.2em;
    list-style: none;
}
.fc-poscard__comment li::before {
    content: "\265F ";
    color: var(--fc-accent, #aaff00);
}
.fc-poscard__comment-skeleton {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fc-poscard__comment-skeleton span {
    display: block;
    height: 10px;
    border-radius: 4px;
    background: var(--fc-skeleton-bg, #1e201e);
    animation: fc-shimmer 1.4s ease-in-out infinite;
}
@keyframes fc-shimmer {
    0%   { opacity: 0.5; }
    50%  { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Depth-prefix breadcrumb */
.fc-mt-depth-prefix__seq {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 600; color: #444; letter-spacing: 0.01em;
}