/*
 * forgejo-mobile-1 (2026-09-26, 庵野 → 鷹野裁定で修正)
 * スマホ幅(767px以下)だけの読みやすさ調整。デスクトップの見た目は一切変えない。
 * custom/templates/custom/header.tmpl から読み込む。
 */
@media (max-width: 767px) {

  /* ---- 1. Markdown 本文の表 ----
   * table-layout:auto のまま日本語がどこでも折れるため、列が1文字幅まで
   * 潰れて行の高さが爆発する。nowrap で止めると今度は1行が2500〜5300px
   * になり横スクロールが長すぎる(鷹野裁定 2026-09-26)。
   * white-space は normal のまま、列に min-width を与えて「1文字幅への
   * 潰れ」だけを止める。ページ全体の幅は変わらず、表だけが横スクロール。
   */
  .file-view.markup.markdown table td,
  .file-view.markup.markdown table th,
  .markdown table td,
  .markdown table th {
    white-space: normal;
    min-width: 9em;
  }

  /* ---- 2. コード(ファイル表示のみ) ----
   * .code-inner が white-space:pre-wrap; word-break:break-all; のため、
   * 識別子や URL の途中で折り返され読めない。ファイル表示(.file-view.code-view)
   * だけ折り返しをやめて横スクロールにする。
   * diff の .code-inner は既定のまま(鷹野裁定 2026-09-26 ── diff の大半は
   * 日本語の地の文で、読む相手は人見。コードが折れる損より地の文が
   * 横に流れる損の方が大きいので、diff 用の追加(overflow / width /
   * min-width)は実測のうえ全部外した。外しても崩れないことを確認済み)。
   */
  .file-view.code-view .code-inner {
    white-space: pre;
    word-break: normal;
  }
  .file-view.code-view {
    overflow-x: auto;
  }
  .file-view.code-view table {
    width: max-content;
    min-width: 100%;
  }

  /* ---- 3. commit 一覧の表 ----
   * #commits-table は class="unstackable" が付き、Fomantic UI の
   * レスポンシブ折返し(stackable)が効かない。Author/SHA/Message/Date の
   * 固定グリッド比率のまま幅375pxに収めようとして Message 列が1文字幅まで
   * 潰れ、185 commits で表全体が22000px超になる。カード型に組み直す。
   */
  #commits-table thead {
    display: none;
  }
  #commits-table,
  #commits-table tbody,
  #commits-table tr,
  #commits-table td {
    display: block;
    width: auto !important;
    box-sizing: border-box;
  }
  #commits-table tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-secondary, rgba(0, 0, 0, 0.1));
  }
  #commits-table td {
    padding: 2px 0;
    white-space: normal;
    text-align: left;
  }
  #commits-table td.message {
    padding: 4px 0;
  }
  #commits-table td:last-child {
    display: flex;
    gap: 8px;
    padding-top: 6px;
  }

  /* ---- 4. 余白 ----
   * ui.container.fluid.padded の左右余白が広く、375px幅では本文が
   * 実質340px前後まで狭まる。読む面積を少し取り戻す。
   */
  .page-content.repository {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}