/* AIによる難易度ソート(Problems/Graph.html, frontend/ts/problems.graph.ts) */
.graph-intro {
    max-width: 60em;
    color: var(--yk-text-muted);
}

/* 一覧を下へスクロールしても、移動・並び・絞り込みを使えるよう上に残す */
.graph-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 6px 0;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--yk-frame);
}

.graph-search {
    width: 6em;
}

.graph-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 8px;
    font-size: 12px;
    color: var(--yk-text-muted);
}

/* 凡例の色は押すとその帯で絞り込むボタン(problems.graph.ts の renderLegend) */
.graph-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

.graph-legend-item:hover {
    border-color: var(--yk-frame);
}

.graph-legend-item[aria-pressed="true"] {
    border-color: var(--yk-heading-accent);
    background-color: var(--yk-surface-sunken);
    font-weight: bold;
}

.graph-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* 青や茶の点がダーク表示の背景に沈まないよう、薄い縁を付ける */
    box-shadow: 0 0 0 1px var(--yk-frame);
}

/* 問題のレベル(★) */
.graph-level {
    white-space: nowrap;
}

/* 難易度の数字(色の付いた点 + 普通の文字色の数字) */
.graph-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.graph-tech,
.graph-reason {
    margin: 4px 0;
}

.graph-reason {
    color: var(--yk-text-dim);
}

.graph-table tr.solved td {
    background: var(--yk-row-solved);
}

/* ?no= や「移動」で選んだ問題の行。解いた問題の色(base.css の tr.solved は !important)より優先して目立たせる */
.graph-table tr.graph-row-focus td {
    background: var(--yk-warn-bg) !important;
    color: var(--yk-warn-text);
}

.graph-table tr.graph-row-focus td:first-child {
    box-shadow: inset 4px 0 0 var(--yk-warn-text);
}

/* 見積もりへのレビュー(自分の書いたものと入力欄) */
.graph-review {
    margin-top: 4px;
}

.graph-review-list {
    margin: 4px 0;
    padding-left: 1.2em;
    font-size: 12px;
}

.graph-review-comment {
    white-space: pre-wrap;
}

/* 運営の対応のメモ(対応済みの下に出す) */
.graph-review-handled-note {
    white-space: pre-wrap;
    margin-top: 2px;
}

.graph-review-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 4px;
}

.graph-review-form[hidden] {
    display: none;
}

.graph-review-text {
    width: 100%;
    max-width: 40em;
}

.graph-review-note {
    max-width: 40em;
    font-size: 12px;
}

.graph-muted {
    color: var(--yk-text-subtle);
}

.graph-rating-split {
    font-size: 11px;
    white-space: nowrap;
}

.graph-filter {
    margin-left: 12px;
    white-space: nowrap;
}

.graph-author {
    width: 9em;
}

.graph-review-handled {
    margin-left: 6px;
    font-size: 11px;
}

/* アルゴリズム(横)と考察(縦)の散布図 */
.graph-scatter {
    max-width: 640px;
    margin: 8px 0 16px;
}
.graph-scatter-svg {
    width: 100%;
    height: auto;
}
.graph-scatter-grid {
    stroke: currentColor;
    stroke-opacity: 0.15;
}
.graph-scatter-diag {
    stroke: currentColor;
    stroke-opacity: 0.4;
    stroke-dasharray: 4 4;
}
.graph-scatter-tick,
.graph-scatter-label {
    fill: currentColor;
    font-size: 11px;
}
.graph-scatter-label {
    font-size: 12px;
}
.graph-scatter-pt {
    fill-opacity: 0.75;
    stroke: currentColor;
    stroke-opacity: 0.3;
    stroke-width: 0.5;
}
.graph-scatter-pt.solved {
    stroke-opacity: 0.9;
    stroke-width: 1.5;
}
.graph-scatter-pt:hover {
    fill-opacity: 1;
    stroke-width: 2;
}

/* 一覧の作問者(押すとその作問者の問題だけに絞る) */
.graph-author-link {
    font-size: 0.85em;
    margin-left: 4px;
}