/* スマホで横スクロールさせない指定のための組み替え。判定・ARIAは既存main.js。
   公式Core/Techlogは通常の表を担当し、このファイルは列とカード化だけを担当する。
   600px/5em/150pxは従来tables.cssの対応記録に基づく機能値（docs/lism-migration.md）。 */
@layer lism-custom {
  .c--content .has-fixed-layout { table-layout:fixed; }
  .c--content :where(table:not(.has-fixed-layout)) tbody th { white-space:nowrap; }
  .c--content :is(th,td) { word-break:normal; }
  .table-scroll { overflow-x:auto; }
  .table-scroll.is-all-centered :is(th,td) { text-align:center; vertical-align:middle; }
  /* 列の多い表（8 列から）は、セルの左右の余白を詰め、語の途中で折らない（2026-11-11、鍋ログ系の Redmine #781）。
     Lism の既定の余白（--cells-p の左右 .875em）は 10 列で 280px を食い、幅 768・1280 で数字と製品名のセルが潰れていた
     （FPSイヤホンの /valorant-recommended-earphones/ の表。左右を --s10 にした案は幅 768 で「有線1位」「距離感」が折れ、--s5 で全部 1 行に収まった）。
     同じ日に数えた本文の表は 5 列までと 10 列が 1 つで、5 列までの表の見た目は変わらない。カードに組み替える幅（下の 600px 以下）には当てない。 */
  @media (min-width:601px) {
    .c--content table:has(tr > :nth-child(8)) { --cells-p:var(--s10) var(--s5); }
    .c--content table:has(tr > :nth-child(8)) :is(th,td,td a) { overflow-wrap:break-word; }
  }
  @media (max-width:600px) {
    .c--content table, .c--content table.has-fixed-layout { min-width:0; table-layout:auto; }
    .c--content :is(th,td) { overflow-wrap:break-word; }
    .c--content tbody th { white-space:normal; }
    .c--content tr > :first-child:not(:only-child) { box-sizing:content-box; width:5em; }
    .c--content .tc-fit td { overflow-wrap:anywhere; }
    .table-scroll.tc-wrap { overflow-x:visible; }
    .c--content :is(.tc-table,.tc-table thead,.tc-table tbody,.tc-table tfoot,.tc-table tr) { display:block; }
    .c--content .tc-table { width:100%; border:0; }
    .c--content .tc-table .tc-row { margin-block-end:var(--flow--s); border:1px solid var(--divider); }
    .c--content .tc-table .tc-row:last-child { margin-block-end:0; }
    .c--content .tc-table tr.tc-row > :is(th,td) { display:block; width:auto; border:0; border-block-start:1px solid var(--divider); text-align:start; white-space:normal; overflow-wrap:anywhere; }
    .c--content .tc-table tr.tc-row > :first-child { border-block-start:0; }
    .c--content .tc-table [data-label]::before { content:attr(data-label) '：'; font-weight:var(--fw--bold); }
    .c--content .tc-table .tc-media[data-label]::before { display:block; }
    .c--content .tc-table .tc-media img { max-width:150px; }
    .c--content .tc-table tr.tc-row > td:empty { display:none; }
    .c--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; }
    .c--content .tc-table .tc-title { margin-block-end:var(--flow--s); }
    .c--content .tc-table .tc-title > * { display:block; }
  }
}
