/* 「総当たり戦の対戦表」の画面。共通の部品(入力・結果の数字・注意)と色・大きさの変数は、src/style.css。ここは、この道具だけの物。 */
.col { margin-top: 0.4rem; }
.field input[type="text"], .field input[type="time"], .field textarea { width: 100%; max-width: 22rem; }
.field textarea { max-width: 100%; min-height: 10rem; resize: vertical; line-height: 1.5; }
.printbox { margin-top: var(--sp-4); }
.printbox .actions { margin-top: 0.6rem; }

/* 表 */
.blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.8rem 1.2rem; }
.block { min-width: 0; overflow-x: auto; }
.block .bye { margin: 0.3rem 0 0; font-size: var(--fs-s); }
.result table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: var(--fs-s); }
.result caption { text-align: left; font-weight: 700; padding-bottom: 0.2rem; }
.result th, .result td { border: 1px solid var(--line); padding: 0.2rem 0.5rem; text-align: left; }
.result thead th { background: var(--bg); }
/* 見出しと名前は、文字の途中で折らない(body の overflow-wrap: anywhere で、狭い画面で「コー/ト」「チー/ムA」と折れるのを防ぐ)。
   名前は 40 字まで入るので、長い名前(.long。app.js が付ける)だけは、幅の上限で折り返す。表が画面より広いときは、横へ送る */
.result th { white-space: nowrap; overflow-wrap: normal; }
.result td.name, .result th.rowname { white-space: nowrap; overflow-wrap: normal; }
.result td.name.long, .result th.rowname.long { white-space: normal; overflow-wrap: anywhere; min-width: 10rem; max-width: 12rem; }
/* 時間枠が変わる行(同じ時間枠=同時に行う試合のまとまりが、目で分かるように) */
.result tr.slot-start td { border-top-width: 2px; border-top-color: var(--muted); }
.result td.dash { color: var(--muted); }
/* 星取表: 結果を書きこむ欄は、書ける高さと幅に */
table.grid { width: auto; }
table.grid th.no, table.grid td.box { min-width: 2.2rem; text-align: center; }
table.grid td.box { height: 2.2rem; }
table.grid td.self { text-align: center; background: var(--bg); color: var(--muted); }
table.grid th.rowname { position: sticky; left: 0; background: var(--bg); }
table.grid td.sum, table.grid th.sum { min-width: 2.6rem; text-align: center; }
table.stats-table td, table.stats-table th.rowname { text-align: right; }
table.stats-table th.rowname { text-align: left; }

/* 印刷: 選んだ表だけを出す(結果が新しいときだけ。html.rr-print)。表が途中で切れないように、1つずつまとめて送る */
@page { margin: 12mm; }
@page rr-grid { size: A4 landscape; margin: 12mm; }
@media print {
  html.rr-print header.site, html.rr-print footer.site, html.rr-print .skip,
  html.rr-print main .wrap > :not(#tool), html.rr-print #tool > :not(#result), html.rr-print .no-print { display: none !important; }
  html.rr-print.rr-no-rounds #sec-rounds, html.rr-print.rr-no-teams #sec-teams, html.rr-print.rr-no-grid #sec-grid { display: none !important; }
  html.rr-print, html.rr-print body { background: #fff; color: #000; }
  html.rr-print body { display: block; min-height: 0; }
  html.rr-print main { padding: 0; }
  html.rr-print .wrap { max-width: none; padding: 0; }
  html.rr-print .tool { border: 0; border-radius: 0; padding: 0; margin: 0; background: none; }
  html.rr-print .result.old { opacity: 1; }
  html.rr-print .result > h2, html.rr-print dl.stats, html.rr-print .warn, html.rr-print .caveat { display: none !important; }
  /* 大会名(入れたときだけ)を、表ごとの紙の先頭に出す */
  html.rr-print .print-only:not(:empty) { display: block; margin: 0 0 4mm; font-size: 14pt; font-weight: 700; }
  /* 表ごとに紙を改める。前に出す表が有るときだけ(隠した表の後ろに改ページを置くと、ブラウザによっては先頭が白紙になる) */
  html.rr-print:not(.rr-no-rounds) #sec-teams,
  html.rr-print:not(.rr-no-rounds) #sec-grid, html.rr-print:not(.rr-no-teams) #sec-grid { break-before: page; }
  /* 星取表は、横向きの紙に(名前つきの @page が使えるブラウザだけ。使えないときは、画面の注意の文のとおり、印刷の画面で向きを選ぶ) */
  html.rr-print #sec-grid { page: rr-grid; }
  html.rr-print .result thead th, html.rr-print table.grid td.self { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html.rr-print table.grid th.rowname { position: static; background: none; }
  html.rr-print .block { overflow: visible; }
  html.rr-print .sec h3 { margin-top: 0; }
  html.rr-print .blocks { display: block; column-count: 2; column-gap: 8mm; }
  html.rr-print .block { break-inside: avoid; margin-bottom: 5mm; }
  html.rr-print .note { color: #000; }
  html.rr-print .result table { font-size: 9pt; }
  html.rr-print .result th, html.rr-print .result td { border-color: #000; padding: 1px 4px; }
  html.rr-print .result thead th, html.rr-print table.grid td.self { background: #e6e6e6; color: #000; }
  html.rr-print .table-wrap { overflow: visible; }
  html.rr-print table.grid { font-size: 8pt; width: 100%; }
  html.rr-print table.grid td.box { height: 7mm; min-width: 0; }
  html.rr-print table.grid th.no { min-width: 0; padding: 1px 2px; }
  /* 21 チームから: 行を低く・字を小さくして、横向きの紙 1 ページに入れる */
  html.rr-print table.grid.many { font-size: 7pt; line-height: 1.3; }
  html.rr-print table.grid.many td.box { height: 4.2mm; }
}