/* 見出し（ui/page-head.js）・切り替え（ui/tabs.js）・本文の幅（R1 #20）。色は ui/style.css の変数（light / dark） */

/* 本文の幅は 2 通り: 1 列の画面（ホーム・挑戦・通信対戦・観戦・AI どうしの観戦・組み合わせ）= narrow、一覧の画面（名鑑・棋譜・戦績・称号）= wide */
:root { --page-narrow: 560px; --page-wide: 720px; }

/* 見出し: 左 = 戻る・中 = 題・右 = 「？」ほか */
.page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 4px 0 8px; min-width: 0; }
.page-h1 { flex: 1 1 0; min-width: 0; margin: 0; font-size: 1.35rem; line-height: 1.3; letter-spacing: 0.04em; overflow-wrap: anywhere; text-align: left; }
.page-head-right { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.page-head-right .metric-help { margin: 0; }
/* 戻る: どの画面でも同じ見た目（テーマの色・下線なし・押せる高さ 40px） */
.page-back {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px 0 2px; flex: none;
  color: var(--accent); font-weight: 700; font-size: 0.92rem; text-decoration: none; white-space: nowrap;
}
.page-back:hover, .page-back:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* 切り替え: 札の並び（押せる高さ 44px）。1 段目 = 下線・2 段目 = 丸い枠 */
.tabs { display: flex; width: 100%; min-width: 0; margin: 0 0 10px; }
.tab {
  flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 8px; font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; word-break: keep-all;
  color: var(--text-2); background: transparent; border: 0; cursor: pointer;
}
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-sub { font-size: 0.75rem; font-weight: 600; }
.tabs-1 { gap: 6px; border-bottom: 1px solid var(--border); }
.tabs-1 .tab { border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; }
.tabs-1 .tab:hover { color: var(--text); }
.tabs-1 .tab[aria-current='page'], .tabs-1 .tab[aria-pressed='true'] { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-soft); }
.tabs-2 { border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.tabs-2 .tab + .tab { border-left: 1px solid var(--border); }
.tabs-2 .tab[aria-current='page'], .tabs-2 .tab[aria-pressed='true'] { background: var(--accent); color: #fff; }
.tabs-2 .tab[aria-current='page'] .tab-sub, .tabs-2 .tab[aria-pressed='true'] .tab-sub { color: #fff; }
@media (max-width: 400px) {
  .tab { padding: 4px 4px; font-size: 0.86rem; }
}
/* 札の中身に合わせて分ける（名鑑の一覧の「レート測定済み」が長い） */
@media (max-width: 720px) {
  .tabs-2 .tab { flex: 1 1 auto; }
}

/* 先へ進む小さなリンク（「名前 ›」・地の文の中の行き先）: 押せる高さ 40px（R1 #26） */
.go-link { display: inline-flex; align-items: center; min-height: 40px; color: var(--accent); font-weight: 600; text-decoration: none; }
.go-link:hover, .go-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* 押せる高さ（R1 #26）: select・たたむ見出し・☰ のボタンは 40px 以上 */
select { min-height: 40px; }
summary { min-height: 40px; padding-block: 8px; box-sizing: border-box; cursor: pointer; }
.menu-open-btn { min-height: 40px; }

/* 1 列の画面の幅（ui/style.css は旧と同じに保つので、ここで重ねる） */
.menu, .lobby { max-width: var(--page-narrow); }