frontend/src/styles/chess/tablebase.css

/* ── Results panel ──────────────────────────────────────────────────── */
.results-panel { container: results / inline-size; }
.results-panel.is-pending .moves-view { pointer-events: none; }
.results-panel.is-loading .moves-view { opacity: .55; pointer-events: none; }
/* The auto-play "stop" control must stay clickable even while a probe is in
   flight - otherwise there's only a brief window between probe cycles where
   auto-play can actually be turned off. */
.results-panel.is-loading .btn--col-autoplay { pointer-events: auto; opacity: 1; }

/* Shown only in the compact table view (see the `results` container query below). */
.metric-tabs { display: none; }

/* ── SSE progress bar ───────────────────────────────────────────────── */
/* Inline next to the panel title, to its right, instead of a full-width
   bar under the panel header - keeps the header height stable and puts
   progress right next to the label it's updating towards. */
.probe-status { align-items: center; gap: 0.625rem; min-width: 0; }
.probe-progress {
    width: 10.5rem;
    height: 0.25rem;
    border-radius: 0.125rem;
    background: var(--border);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.probe-progress__fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--progress-from), var(--progress-to));
    transition: width 0.3s ease;
    width: 0%;
}
.probe-progress.is-indeterminate .probe-progress__fill {
    width: 35%;
    animation: probe-pending 1.4s ease-in-out infinite;
}
@keyframes probe-pending {
    from { transform: translateX(-100%); }
    to { transform: translateX(290%); }
}
@media (prefers-reduced-motion: reduce) {
    .probe-progress.is-indeterminate .probe-progress__fill { animation: none; left: 32.5%; }
}
.probe-progress-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
    /* Optical alignment with the adjacent header text. */
    position: relative;
    top: -0.5px;
}
.probe-progress-label:empty {
    display: none;
}
@media (max-width: 767px) {
    .results-panel .panel-header { flex-wrap: wrap; }
    .results-panel .panel-header__start { display: contents; }
    .probe-status { order: 3; flex: 0 0 100%; }
    .probe-status .probe-progress { flex: 1; width: auto; }
}

/* ── Moves view ─────────────────────────────────────────────────────── */
/* The header table is fixed above .moves-body-scroll, the only vertically
   scrolling element of the results panel, so the scrollbar starts at the
   first moves row. Both tables share the column widths below. No scrollbar
   gutter is reserved: while the body overflows, its table is widened by the
   scrollbar's measured width (see .has-vscroll below and syncMovesGutter()
   in engine/scroll.js), which keeps its columns at the header's pixel
   widths. */
.moves-view {
    flex: 1;
    min-height: 17.5rem;
    display: flex;
    flex-direction: column;
}
.moves-head { flex: 0 0 auto; overflow: hidden; }
.moves-body-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

/* The extra width lies beneath the scrollbar, outside the visible content box. */
.moves-body-scroll.has-vscroll .moves-table--body {
    width: calc(100% + var(--moves-vscroll-width, 0px));
}

/* ── Moves table ────────────────────────────────────────────────────── */
.moves-table {
    width: 100%;
    flex: 0 0 auto;
    border-collapse: collapse;
    /* Fixed column widths (see the col rules below) keep column boundaries,
       and the auto-play buttons in the header, stable as score text length
       changes. */
    table-layout: fixed;
}

.moves-table thead th {
    height: var(--thead-row-h);
    background: var(--surface-2);
}
#root-row td { height: var(--thead-root-h); }

/* Keep move notation readable; score columns share the remaining width. */
.moves-table col.col-rank  { width: 2rem; }
.moves-table col.col-move  { width: 4.25rem; }
.moves-table col.col-score { width: auto; }
.moves-table col.group-dtc.col-score { width: 9rem; }

/* ── Group header row (DTZ / DTC / DTM / DTM50 labels) - centred ────── */
.moves-table thead tr.group-row th {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    text-align: center;           /* centre all group labels */
    padding: 0.375rem var(--space-2) var(--space-1);
    white-space: nowrap;
}
/* Flex row inside the th (not on the th itself - display:flex on a table
   cell suppresses its table-cell box, which breaks the whole table layout
   and stacks the columns). Inline-flex so it still respects text-align. */
.group-row-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
}
/* Left edge on group boundaries - :not(.col-score) so it draws once per
   metric, at its Move cell (or at the group header's own colspan=2 cell),
   not again at the Score cell beside it. */
.moves-table th.group-dtz:not(.col-score),
.moves-table th.group-dtc:not(.col-score),
.moves-table th.group-dtm:not(.col-score),
.moves-table th.group-dtm50:not(.col-score) { box-shadow: inset 1px 0 0 var(--border-2); }

/* ── Column header row (Move / Score labels) ────────────────────────── */
.moves-table thead tr.col-row th {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-align: left;
    padding: 0.1875rem var(--space-2) 0.4375rem;
    box-shadow: inset 0 -1px 0 var(--border-2);
    white-space: nowrap;
}
.moves-table thead tr.col-row th.group-dtz:not(.col-score),
.moves-table thead tr.col-row th.group-dtc:not(.col-score),
.moves-table thead tr.col-row th.group-dtm:not(.col-score),
.moves-table thead tr.col-row th.group-dtm50:not(.col-score) {
    box-shadow: inset 1px 0 0 var(--border-2), inset 0 -1px 0 var(--border-2);
}
/* Override group-boundary padding for col-row: add left spacing after
   border - :not(.col-score) for the same reason as the border rules
   above; Score's own right-aligned padding (below) is unaffected either
   way. */
.moves-table thead tr.col-row th.group-dtz:not(.col-score)  { padding-left: var(--space-2); }
.moves-table thead tr.col-row th.group-dtc:not(.col-score)  { padding-left: var(--space-2); }
.moves-table thead tr.col-row th.group-dtm:not(.col-score)  { padding-left: var(--space-2); }
.moves-table thead tr.col-row th.group-dtm50:not(.col-score){ padding-left: var(--space-2); }
/* Move header: tight padding and tracking so "MOVE" fits the narrow move column. */
.moves-table thead tr.col-row th.col-move { padding-right: var(--space-1); letter-spacing: 0.03em; }
.moves-table thead tr.col-row th.col-rank { padding-left: 0; padding-right: 0; text-align: center; text-overflow: clip; letter-spacing: 0; }
/* Score column right-aligned */
.moves-table thead tr.col-row th.col-score { text-align: right; padding-right: 0.875rem; }

/* ── Auto-play buttons - sit in the gap between Move and Score within
   the existing column-header row, instead of a dedicated row ─────────── */
.btn--col-autoplay {
    position: relative;
    height: 1rem;
    min-width: 1.25rem;
    padding: 0 0.3125rem;
    border-radius: 0.1875rem;
    line-height: 1;
    justify-content: center;
    color: var(--text-dim);
}
/* Invisible hit-area expansion - the visible button stays small enough to
   sit inline with the group label, but the clickable/tappable region
   clears a 24px minimum in both dimensions (WCAG 2.5.8 Target Size). */
.btn--col-autoplay::after {
    content: '';
    position: absolute;
    inset: -0.25rem;
}
/* Two icons are always present; CSS toggles which is visible via the
   existing .is-playing class. Both are hand-built SVG rather than text
   glyphs, since a Unicode symbol ('▶'/'⏹') at 0.5625rem is at the mercy of the
   browser/OS's emoji font and renders inconsistently and fuzzily at that
   size. Both use fill: currentColor, so they automatically pick up the
   amber .is-playing colour from the .btn.is-playing rule below with no
   extra colour rule needed here. */
.autoplay-icon {
    width: 0.5625rem;
    height: 0.5625rem;
    fill: currentColor;
}
.autoplay-icon--play { display: block; }
.autoplay-icon--stop { display: none; }
.btn--col-autoplay.is-playing .autoplay-icon--play { display: none; }
.btn--col-autoplay.is-playing .autoplay-icon--stop { display: block; }

/* ── Table body cells ───────────────────────────────────────────────── */
.moves-table td {
    padding: 0.375rem var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.moves-table tbody tr:hover { background: var(--surface-2); }

.moves-table td.col-rank {
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-align: center;
    padding-left: 0.125rem;
    padding-right: 0.125rem;
}

.moves-table td.col-move {
    color: var(--blue);
    font-weight: 500;
    padding-right: var(--space-1);
    cursor: pointer;
}

/* Group boundary edges on td, drawn the same way as the header cells. */
.moves-table td.group-dtz:not(.col-score)  { box-shadow: inset 1px 0 0 var(--border-2); padding-left: var(--space-2); }
.moves-table td.group-dtc:not(.col-score)  { box-shadow: inset 1px 0 0 var(--border-2); padding-left: var(--space-2); }
.moves-table td.group-dtm:not(.col-score)  { box-shadow: inset 1px 0 0 var(--border-2); padding-left: var(--space-2); }
.moves-table td.group-dtm50:not(.col-score){ box-shadow: inset 1px 0 0 var(--border-2); padding-left: var(--space-2); }

.moves-table td.col-score {
    text-align: right;
    font-weight: 500;
    color: var(--text-muted);
    padding-left: var(--space-1);
    padding-right: 0.875rem;
}

/* Outcome colour mapping via data attribute */
.moves-table td.col-score[data-outcome]                { color: var(--text-muted); }
.moves-table td.col-score[data-outcome="win"]          { color: var(--win); }
.moves-table td.col-score[data-outcome="cursed_win"]   { color: var(--amber); }
.moves-table td.col-score[data-outcome="blessed_loss"] { color: var(--amber); }
.moves-table td.col-score[data-outcome="loss"]         { color: var(--loss); }
.moves-table td.col-score[data-outcome="draw"]         { color: var(--draw); }
.moves-table td.col-score.is-mate                      { font-weight: 700; }

.moves-table td.is-empty-cell { color: var(--text-muted); text-align: center; opacity: .35; }

/* ── Root row ───────────────────────────────────────────────────────── */
/* Lives in <thead> (see ResultsPanel.jsx), pinned below the group and
   column rows. The label reuses
   .col-move for identical column alignment/font as a real move - only
   the pointer cursor is dropped, since it isn't a clickable move. Gets
   its own --surface-3 background plus a thin --gold-dim accent bar on
   the leading edge, so it reads as a distinct, pinned reference row
   rather than blending into the header above or the ranked rows below.
   .is-hidden (display:none) is applied by ResultsPanel.jsx when the
   "Show Root Row" setting is off. */
.moves-table td.col-move.is-root {
    cursor: default;
    color: var(--gold);
    font-weight: 600;
}
#root-row td {
    background: var(--surface-3);
    border: 0;
    box-shadow: inset 0 -1px 0 var(--border-2);
}
#root-row td.group-dtz:not(.col-score),
#root-row td.group-dtc:not(.col-score),
#root-row td.group-dtm:not(.col-score),
#root-row td.group-dtm50:not(.col-score) {
    box-shadow: inset 1px 0 0 var(--border-2), inset 0 -1px 0 var(--border-2);
}
#root-row td:first-child {
    box-shadow: inset 3px 0 0 var(--gold-dim), inset 0 -1px 0 var(--border-2);
}
#root-row.is-hidden { display: none; }

/* Pair hover - highlight both move + score cells together */
.moves-table td.is-pair-hover { background: var(--surface-3); }
.moves-table td.is-pair-hover.col-move { color: var(--text); }
.moves-table td.col-move[data-san],
.moves-table td.col-score[data-san] {
    cursor: pointer;
    transition: color var(--tr), background var(--tr);
}
.moves-table td.col-move[data-san]:active  { color: var(--gold); background: var(--surface-3); }
.moves-table td.col-score[data-san]:active { background: var(--surface-3); }

/* ── Info dot / warning dot ────────────────────────────────────────────
   .info-dot sits after the "Draw" score text for a move whose draw is
   caused by insufficient material - the reason is a hover tooltip
   (native title attribute) instead of being spelled out inline, so the
   score column never has to fit "Draw by Insufficient Material". With
   touch or pen input, a tap on a dot shows the same text as a notice.
   Where a coarse pointer is available, each dot carries a transparent
   --touch-target wide box spanning the full height of its score cell,
   centered on the icon and clipped to the cell.
   .warning-dot sits in the same spot for a move flagged cursed win or
   blessed loss. Both share identical layout, icon, and colours (see
   DotIcon in ResultsPanel.jsx, which renders both) - only the hover
   title tells the two apart, so their rules are declared together
   below. */
.info-dot, .warning-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.8125rem; height: 0.8125rem;
    margin-left: var(--space-1);
    cursor: help;
    vertical-align: middle;
    flex-shrink: 0;
}
@media (any-pointer: coarse) {
    .moves-table td.col-score { position: relative; }
    .info-dot::after, .warning-dot::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: var(--touch-target);
    }
}
.info-dot__icon, .warning-dot__icon {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.info-dot__bg,   .warning-dot__bg   { fill: var(--text-dim); }
.info-dot__mark, .warning-dot__mark { fill: var(--surface); }

/* ── Empty state ────────────────────────────────────────────────────── */
.moves-empty-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 3rem var(--space-5);
    color: var(--text-muted);
    text-align: center;
    font-size: var(--text-xs);
    flex: 1;
}
.moves-empty-state__icon { font-size: 1.75rem; opacity: .18; }

/* ── Loading shimmer ────────────────────────────────────────────────── */
@keyframes shimmer {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 0.65; }
}
.is-loading .moves-table td.col-score,
.is-loading .moves-table td.col-move { animation: shimmer 1.1s ease-in-out infinite; }

/* ── Compact view ───────────────────────────────────────────────────────
   Below 49rem the nine-column table is replaced by a three-column one
   so distances, units and annotations fit without wrapping. At 49rem,
   the 2rem rank + four 4.25rem moves + 9rem DTC score leave 7rem for
   each other score, enough for "Not Available" or five-digit plies
   with a warning dot and cell padding.
   (rank, move, score) for the metric chosen in .metric-tabs. */
@container results (width < 49rem) {
    .metric-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: 2rem;
    }
    .metric-tab {
        min-width: 0;
        padding: 0 var(--space-1);
        border: 0 solid var(--border);
        border-bottom-width: 1px;
        border-radius: 0;
        background: var(--surface-2);
        color: var(--text-dim);
        font: 600 var(--text-xs) var(--font-ui);
        letter-spacing: 0.03em;
    }
    .metric-tab + .metric-tab { border-left: 1px solid var(--border); }
    .metric-tab.is-active {
        color: var(--gold);
        background: var(--gold-glow);
        box-shadow: inset 0 0 0 1px var(--gold-dim);
    }
    .metric-tab:focus-visible { outline-offset: -2px; }

    .moves-table[data-active-metric] .group-dtz,
    .moves-table[data-active-metric] .group-dtc,
    .moves-table[data-active-metric] .group-dtm,
    .moves-table[data-active-metric] .group-dtm50 { display: none; }
    .moves-table[data-active-metric="dtz"]   .group-dtz,
    .moves-table[data-active-metric="dtc"]   .group-dtc,
    .moves-table[data-active-metric="dtm"]   .group-dtm,
    .moves-table[data-active-metric="dtm50"] .group-dtm50 { display: table-cell; }

    .moves-table[data-active-metric="dtz"] th.group-dtz:not(.col-score),
    .moves-table[data-active-metric="dtz"] td.group-dtz:not(.col-score) { padding-left: 0.625rem; }

    .moves-table[data-active-metric] col.group-dtz,
    .moves-table[data-active-metric] col.group-dtc,
    .moves-table[data-active-metric] col.group-dtm,
    .moves-table[data-active-metric] col.group-dtm50 { display: none; }
    .moves-table[data-active-metric] col.col-rank { width: 14%; }
    .moves-table[data-active-metric="dtz"]   col.group-dtz,
    .moves-table[data-active-metric="dtc"]   col.group-dtc,
    .moves-table[data-active-metric="dtm"]   col.group-dtm,
    .moves-table[data-active-metric="dtm50"] col.group-dtm50 { display: table-column; }
    .moves-table[data-active-metric] col.col-move  { width: 26%; }
    .moves-table[data-active-metric] col.col-score { width: 60%; }
}