@charset "UTF-8";
/* =========================================================
   tables.css — 本文の表の枠と、スマホ幅（600px 以下）での表の組み替え

   もとは style.css の 10 節（本文）にあった .table-scroll の枠と、600px 以下の塊（2026-10-12 に移した。中身と並びはそのまま）。
   列の等分（.has-fixed-layout）も content.css の 1 節から移した（2026-10-12。値はそのまま）。
   広い幅の表の見た目（.entry-content table・th・td・thead th・tbody th）は style.css に残す。

   SWELL の表示（元テーマのCSSだけを読む）でも、本文に表があるページだけこれを読む
   （2026-10-12、なべちゃんの回答「案B 移行後の組み替えを使う」。SWELL の表示では表の列の割り振りが自動のままで、
   幅 390 で 1 列目が 1 字ずつに潰れていた。manage の tasks/me/swell-adjust-dom-contrast-tables.md）。
   広い幅は元テーマの表の見た目のまま、見出しのセルだけ折らない（下の 1 つ目の規則）。has-fixed-layout の表の列は等分にする
   （旧サイトと移行後の表示と同じ。下の 3 つ目の規則）。
   本文の入れ物は :is(.entry-content, .post_content) で受ける。移行後の本文は両方のクラスを持つので、
   当たる要素と優先度は style.css にあったときと同じ。どのページの表をカードにするかを決めるのは main.js の initTableCards()。
   読むのは layout.php（移行後の表示は style.css の直後、SWELL の表示は本文に表があるページだけ。色の変数は tokens.css）。
   ========================================================= */

/* 広い幅でも、見出しのセル（tbody th）は折らない。移行後の表示では style.css の .entry-content tbody th と同じ値
   （SWELL の表示で、隣の列が長いと見出しの列が 1〜3 字ずつに折れていた。幅 768・1280 の FPSイヤホンの表）。
   600px 以下では下の塊が normal に戻す */
:is(.entry-content, .post_content) tbody th {
  white-space: nowrap;
}

/* 表のセルの語を途中で割らない（英字の「Nintendo」が「Ninten／do」と割れない）。元テーマの main.css は td・th を
   word-break: break-all にしていて、旧サイトでは WordPress 本体の表の CSS（.has-fixed-layout の td・th は break-word）が
   それを上書きしていた。SWELL の表示はその本体の CSS を読まないので、列の割り振りが自動のまま 1 字ずつ割れて細く潰れていた
   （2026-10-12、幅 768・1280 の FPSイヤホン・マウスの表）。移行後の表示の td・th はもともと normal（計算済みの値は変わらない）。
   収まらない語は、本文の overflow-wrap: break-word（600px 以下は下の塊）で折れる */
:is(.entry-content, .post_content) :is(td, th) {
  word-break: normal;
}

/* has-fixed-layout の表（旧 WordPress の表のブロックの「固定幅のセル」。移行した本文の表の大半と、人物一覧・ロスターの表）は、
   広い幅では列を等分にする。旧サイトでは WordPress 本体の表の CSS（.wp-block-table .has-fixed-layout）が、移行後の表示では
   content.css が当てていた（2026-10-12 に content.css から移した。値はそのまま）。SWELL の表示はどちらも読まず列の割り振りが
   自動のままで、人物一覧のイラストの列が細くなり画像が縮んでいた（2026-10-12、なべちゃん「画像は小さい」。crosshair-list_vspo の
   1行目の画像が幅 1280 で 75px・768 で 69px。等分にして 150px）。600px 以下は下の塊の table.has-fixed-layout が auto に戻す */
:is(.entry-content, .post_content) .has-fixed-layout {
  table-layout: fixed;
}

/* SWELL の表示の広い幅では、表のセルのリンクとコード（クロスヘアコードなど空白の無い長い文字列）は途中で折ってよい。
   折らないと、列を等分にしても長い語がセルからはみ出し、表の枠が横に送る形になる（2026-10-12、幅 768・1280 の
   crosshair-list_vspo でコード 6 か所。等分にする前は表ごと中身 1170px に広がっていた）。
   600px 以下は下の塊の td a・td code と同じ。移行後の表示（html に data-site-skin が無い）には当てない */
[data-site-skin="swell"] .post_content td :is(a, code) {
  overflow-wrap: anywhere;
}

/* 横スクロールする表の枠。
   **キーボードで枠に入れるよう、HTML 側に tabindex="0" が付いている。**
   決まりは manage の tasks/done/audit_table-scroll-keyboard-and-contrast-tool.md */
.table-scroll {
  overflow-x: auto;
}

/* まだ続く側に影を出す。印を付けるのは main.js の initTableScroll。
   **影を background（グラデーション）で出さないこと。** 祖先に背景画像があると
   manage の contrast.sh が中の文字を測れなくなり（contrast.mjs の bgOf）、
   1ページで 240 か所が検査から漏れた（2026-09-22 に実測）。box-shadow なら測れる。 */
.table-scroll.is-scroll-left {
  box-shadow: inset 16px 0 13px -13px var(--c-shade);
}

.table-scroll.is-scroll-right {
  box-shadow: inset -16px 0 13px -13px var(--c-shade);
}

.table-scroll.is-scroll-left.is-scroll-right {
  box-shadow: inset 16px 0 13px -13px var(--c-shade),
              inset -16px 0 13px -13px var(--c-shade);
}

.table-scroll:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* スマホ幅（600px 以下）では、表を横にスクロールさせない（2026-09-24）。
   表ごとに次のどれかになる。どれにするかは main.js の initTableCards が決める。
     そのまま   … 下の指定だけで画面幅に収まる表（3 列以下のほとんど）
     .tc-fit    … それでも枠からはみ出す表と、見出しの列が 3 字幅未満に潰れる表。本文のセルの語を途中で割ってでも収める
     .tc-table  … 4 列以上の表と、.tc-fit でも収まらない表。1 行を 1 枚のカードにする
   カードの形はクロトリwiki（gamers-wiki の shared/assets/table-cards.*）に倣った。
   JS が動かないときはカードにも .tc-fit にもならず、下の指定だけが効く。収まらない表は従来どおり横に送れる
   （枠の tabindex は HTML にあるので、キーボードでも届く）。 */
@media (max-width: 600px) {
  /* table.has-fixed-layout と書くのは、上の .has-fixed-layout（等分の固定幅）に勝つため。
     等分のままだと、列が狭いときに英数字の語が途中で割れる */
  :is(.entry-content, .post_content) table,
  :is(.entry-content, .post_content) table.has-fixed-layout {
    min-width: 0;
    table-layout: auto;
  }

  :is(.entry-content, .post_content) th,
  :is(.entry-content, .post_content) td {
    padding: 8px 10px;
    overflow-wrap: break-word;
  }

  :is(.entry-content, .post_content) tbody th {
    white-space: normal;
  }

  /* URL とクロスヘアコードは語の途中で折ってよい。折らないと、それだけで枠からはみ出す */
  :is(.entry-content, .post_content) td a,
  :is(.entry-content, .post_content) td code {
    overflow-wrap: anywhere;
  }

  /* 左端の見出しの列が 1〜2 文字の幅まで潰れないよう、5 文字ぶんの幅を持たせる。
     min-width にしないこと。表のセルの min-width は Safari（WebKit）で効く保証が無い。
     中身の最も長い語がこれより広ければ、列はその幅まで広がる。
     content-box にするのは、5em を中身の幅にするため。余白込み（border-box）だと中身が 3 字強しかなく、
     「通信方／式」「再生周／波数帯／域」と 3 字ずつで折れていた（2026-09-29） */
  :is(.entry-content, .post_content) tr > :first-child:not(:only-child) {
    box-sizing: content-box;
    width: 5em;
  }

  :is(.entry-content, .post_content) .tc-fit td {
    overflow-wrap: anywhere;
  }

  /* ---- カード（.tc-table）---- */
  .table-scroll.tc-wrap {
    overflow-x: visible;
    box-shadow: none;
  }

  :is(.entry-content, .post_content) .tc-table,
  :is(.entry-content, .post_content) .tc-table thead,
  :is(.entry-content, .post_content) .tc-table tbody,
  :is(.entry-content, .post_content) .tc-table tfoot,
  :is(.entry-content, .post_content) .tc-table tr {
    display: block;
  }

  :is(.entry-content, .post_content) .tc-table {
    width: 100%;
    border: 0;
  }

  :is(.entry-content, .post_content) .tc-table .tc-row {
    margin-bottom: 12px;
    border: 1px solid var(--c-line);
  }

  :is(.entry-content, .post_content) .tc-table .tc-row:last-child {
    margin-bottom: 0;
  }

  /* tr まで書いて詳細度を (0,3,2) にし、上の :first-child の width: 5em（(0,3,1)）に、書く順に頼らず勝たせる */
  :is(.entry-content, .post_content) .tc-table tr.tc-row > th,
  :is(.entry-content, .post_content) .tc-table tr.tc-row > td {
    display: block;
    width: auto;
    padding: 8px 12px;
    border: 0;
    border-top: 1px solid var(--c-line);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :is(.entry-content, .post_content) .tc-table tr.tc-row > :first-child {
    border-top: 0;
  }

  /* 1 列目はカードの見出し。列の名前は付けない */
  :is(.entry-content, .post_content) .tc-table .tc-head {
    background: var(--c-bg-sub);
    font-weight: 700;
  }

  /* 値の前に列の名前を出す。本文と同じ色の太字（薄めない） */
  :is(.entry-content, .post_content) .tc-table [data-label]::before {
    content: attr(data-label) "：";
    font-weight: 700;
  }

  /* 画像のセルは、列の名前を画像の上の行に置く */
  :is(.entry-content, .post_content) .tc-table .tc-media[data-label]::before {
    display: block;
    margin-bottom: 4px;
  }

  /* 画像はカードの幅いっぱいまで広げない。広い幅の表の列と同じくらいで止める。
     人物一覧のイラストは people.php が 150px で出しているので、それに揃えた。
     広げると、ロスター表の顔写真（900×900）が 1 人ぶんのカードを縦に長くする */
  :is(.entry-content, .post_content) .tc-table .tc-media img {
    max-width: 150px;
  }

  /* 中身の無いセルは、列の名前ごと出さない */
  :is(.entry-content, .post_content) .tc-table tr.tc-row > td:empty {
    display: none;
  }

  /* 列の見出しの行は、目では見えなくなるが支援技術には残す（読み上げの関連付けを切らない） */
  :is(.entry-content, .post_content) .tc-table .tc-headrow {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* 題の行（人物データのロスター表の「ロスター（選手名簿）」）は、カードの上に帯で残す */
  :is(.entry-content, .post_content) .tc-table .tc-title {
    margin-bottom: 12px;
  }

  :is(.entry-content, .post_content) .tc-table .tc-title > * {
    display: block;
  }
}