/*
 * 同名カード能力値比較マトリクス（same-name-matrix.php / same-name-matrix.js）
 *
 * ■ SWELL の table 既定値を打ち消す必要がある
 *   同名セクションは the_content 出力なので .post_content の内側に入る。SWELL の main.css が
 *     .post_content table { border-collapse: collapse; width: 100%; max-width: 100% }
 *     .post_content td, .post_content th { border: 1px solid …; padding: .5em }
 *     .post_content thead th { background-color: var(--thead-color--bg, var(--color_main)); color: #fff }
 *     td, th { word-break: break-all }
 *   を当てており、width:100% を打ち消さないと横スクロールが成立しない。
 *   .post_content table の詳細度は (0,1,1)、.post_content thead th は (0,1,2) なので、
 *   打ち消しは必ず 2クラス以上のセレクタで書くこと。「簡潔にしよう」と1クラスへ削ると
 *   読み込み順次第で負ける。
 *
 * ■ 自己完結させる（player-detail.css に依存しない）
 *   監督詳細ページは player-detail.css を読み込まないため、efpd-stat-rank--* を使うと
 *   監督側だけ色が付かなくなる。ランク色は efpd-matrix-rank--* としてここで定義する
 *   （しきい値の真実源は PHP の efpd_get_stat_rank_class() 1箇所のまま）。
 *
 * ■ ビューポート幅のメディアクエリは使わない
 *   SWELL のサイドバー有無で本文幅が変わってもビューポート幅では検知できない。
 *   横スクロールはコンテナ幅に対して自然に発生させる。
 */

/* ---- トグルボタン ---- */

.efpd-same-name-section__actions {
    margin: 0 0 0.9rem;
}

.efpd-same-name-matrix__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.8rem;
    border: 1px solid var(--efpd-border);
    border-radius: 0.45rem;
    background: var(--efpd-surface-muted);
    color: var(--efpd-text);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.efpd-same-name-matrix__toggle-caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 0.26rem solid transparent;
    border-right: 0.26rem solid transparent;
    border-top: 0.3rem solid currentColor;
    transition: transform 0.15s ease;
}

.efpd-same-name-matrix__toggle[aria-expanded="true"] {
    border-color: #31364b;
    background: #31364b;
    color: #fff;
}

.efpd-same-name-matrix__toggle[aria-expanded="true"] .efpd-same-name-matrix__toggle-caret {
    transform: rotate(180deg);
}

.efpd-same-name-matrix__toggle.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.efpd-same-name-matrix__toggle:focus-visible {
    outline: 2px solid #31364b;
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .efpd-same-name-matrix__toggle:hover {
        border-color: #31364b;
    }
}

/* ---- 表の外側 ---- */

.efpd-same-name-matrix {
    margin: 0 0 1.4rem;
}

.efpd-same-name-matrix__note {
    margin: 0 0 0.5rem;
    font-size: 0.68rem;
    line-height: 1.6;
    color: var(--efpd-muted);
}

.efpd-same-name-matrix__error {
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--efpd-border);
    border-radius: 0.45rem;
    background: var(--efpd-surface-muted);
    font-size: 0.72rem;
    color: var(--efpd-text);
}

/*
 * 横スクロールするのはこの1箇所だけ。
 * 祖先に overflow: hidden を足すと 1列目の position: sticky が壊れるので追加しないこと
 * （.efpd-compare__trainer を overflow:hidden にして中身が見切れた既往バグと同じ轍）。
 */
.efpd-same-name-matrix__scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* 端まで来てもページごとスクロールが持っていかれないようにする */
    overscroll-behavior: contain;
    /*
     * 縦も切って両方向スクロールにするのは、行ヘッダ（1列目）と列ヘッダ（thead）の
     * position: sticky を両方成立させるため。高さを制限しないとスクロールポートが
     * 表全体になり、47行スクロールした時点で25列の縦書きラベルが画面外に消えて
     * どの列を見ているのか分からなくなる。
     * rem 指定なのはビューポート幅のMQを使わない方針と整合させるため。
     */
    max-height: 32rem;
    border: 1px solid var(--efpd-border);
    border-radius: 0.5rem;
    background: var(--efpd-surface);
}

.efpd-same-name-matrix__scroll:focus-visible {
    outline: 2px solid #31364b;
    outline-offset: 2px;
}

/* ---- 表本体 ---- */

.efpd-same-name-matrix .efpd-same-name-matrix__table {
    /* ↓ .post_content table の width:100% / max-width:100% を打ち消す（横スクロールの前提） */
    width: max-content;
    max-width: none;
    min-width: 100%;
    /* ↓ collapse だと sticky セルの枠線が消える。SWELL 自身も [data-cell1-fixed] で separate にしている */
    border-collapse: separate;
    border-spacing: 0;
    border: 0;
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.efpd-same-name-matrix .efpd-same-name-matrix__caption {
    /* スクリーンリーダー向け。見た目の説明は __note が担う（<h2> を増やさないための代替見出し） */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.efpd-same-name-matrix .efpd-same-name-matrix__table th,
.efpd-same-name-matrix .efpd-same-name-matrix__table td {
    padding: 0.28rem 0.4rem;
    /* separate による線の二重化を避けるため top + left だけ引く */
    border: 0;
    border-top: 1px solid var(--efpd-border);
    border-left: 1px solid var(--efpd-border);
    /* ↓ td,th { word-break: break-all } を打ち消す */
    word-break: normal;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    /* sticky セルの下を他列が透けないよう全セル不透明にする */
    background-color: var(--efpd-surface);
}

.efpd-same-name-matrix .efpd-same-name-matrix__table tr > *:first-child {
    border-left: 0;
}

.efpd-same-name-matrix .efpd-same-name-matrix__table thead th {
    border-top: 0;
}

/* ---- 列ヘッダ ---- */

.efpd-same-name-matrix .efpd-same-name-matrix__table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* ↓ .post_content thead th の白文字＋メインカラー背景を打ち消す */
    background-color: var(--efpd-surface-soft);
    color: var(--efpd-text);
    font-size: 0.64rem;
    font-weight: 800;
}

/*
 * 「フィジカルコンタクト」等は8文字あり、26列を横書きで並べると幅が破綻する。
 * 短縮ラベルの辞書を新設すると真実源が増えるので、CSS の縦書きで解決する。
 */
.efpd-same-name-matrix .efpd-same-name-matrix__table thead th.is-vertical > span {
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    /*
     * 高さは内容に合わせる（固定値にしない）。em 固定にすると最長の
     * 「フィジカルコンタクト」10文字が th からはみ出し、1行目のセルに重なって読めなくなる。
     * nowrap なので th の高さは最長ラベルに揃い、全列の高さも自動的に揃う。
     */
    height: auto;
    letter-spacing: -0.02em;
}

/* ---- 1列目（バージョン）を固定 ---- */

.efpd-same-name-matrix .efpd-same-name-matrix__table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 9.25rem;
    max-width: 12.5rem;
    text-align: left;
    background-color: var(--efpd-surface);
    /* border だと横スクロール時に位置がズレるので影で境界を描く */
    box-shadow: 1px 0 0 var(--efpd-border);
}

/* 左上の角セルは行・列どちらの sticky にも属するので最前面へ */
.efpd-same-name-matrix .efpd-same-name-matrix__table thead th:first-child {
    z-index: 3;
    background-color: var(--efpd-surface-soft);
}

/*
 * 行ヘッダはカード画像＋テキストの横並び。
 * このセレクタは tbody の scope="row" にしか付かない（thead 側は __corner クラス）ので、
 * ここで display を変えても列ヘッダ行のレイアウト・sticky には影響しない。
 */
.efpd-same-name-matrix .efpd-same-name-matrix__rowhead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.34rem 0.5rem;
    font-weight: 700;
    white-space: normal;
}

.efpd-same-name-matrix__rowlink {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* カード画像。バージョン名（カードタイプ＋所属）だけでは見分けにくいので添える */
.efpd-same-name-matrix__row-thumb {
    display: block;
    flex-shrink: 0;
    width: 2.3rem;
    height: 2.3rem;
    overflow: hidden;
    border-radius: 0.35rem;
    background: var(--efpd-surface-muted);
}

.efpd-same-name-matrix__row-thumb img,
.efpd-same-name-matrix__row-thumb .efpd-coach-portrait {
    display: block;
    width: 100%;
    height: 100%;
}

.efpd-same-name-matrix__row-thumb img {
    object-fit: contain;
    object-position: center;
}

.efpd-same-name-matrix__rowtext {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.efpd-same-name-matrix__rowlabel {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--efpd-text);
}

.efpd-same-name-matrix__rowsub {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--efpd-muted);
}

.efpd-same-name-matrix__badge-current {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 0.15rem;
    padding: 0.06rem 0.32rem;
    border-radius: 0.25rem;
    background: #31364b;
    color: #fff;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

@media (hover: hover) and (pointer: fine) {
    .efpd-same-name-matrix__rowlink:hover .efpd-same-name-matrix__rowlabel {
        text-decoration: underline;
    }
}

/* ---- 表示中の行 ---- */

.efpd-same-name-matrix .efpd-same-name-matrix__table tr.is-current > * {
    background-color: #eef4ff;
    font-weight: 800;
}

/* ---- セル ---- */

.efpd-same-name-matrix .efpd-same-name-matrix__cell.is-empty,
.efpd-same-name-matrix .efpd-same-name-matrix__cell.is-dimmed {
    color: #b3bcc9;
}

.efpd-same-name-matrix .efpd-same-name-matrix__cell.is-text {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--efpd-muted);
}

.efpd-same-name-matrix .efpd-same-name-matrix__cell.is-max {
    font-weight: 800;
}

.efpd-same-name-matrix .efpd-same-name-matrix__cell.is-top {
    font-weight: 800;
}

.efpd-same-name-matrix__star {
    margin-left: 0.1em;
    font-size: 0.72em;
    color: #e8a300;
}

/* ---- ランク色（efpd_get_stat_rank_class() のしきい値に対応） ---- */

.efpd-same-name-matrix .efpd-matrix-rank--90 {
    color: #006b58;
}

.efpd-same-name-matrix .efpd-matrix-rank--80 {
    color: #3a7a00;
}

.efpd-same-name-matrix .efpd-matrix-rank--70 {
    color: #8a6d00;
}

.efpd-same-name-matrix .efpd-matrix-rank--69 {
    color: #c62828;
}