/* ユースタッツ 共通ヘッダー。全ページ（生成物含む）から読み込む */
/* ヘッダーの高さ。アンカーで飛んだときに見出しが隠れないよう scroll-padding に使う */
:root{--ys-header-h:129px}
@media(min-width:640px){ :root{--ys-header-h:83px} }
html{scroll-padding-top:calc(var(--ys-header-h) + 8px)}

/* PCは1段（ロゴ｜検索窓）。スマホ幅では折り返して2段になる。
   スクロールしても残るよう画面上部に固定する。 */
.site-header{
  position:sticky; top:0; z-index:400;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px 12px;
  background:var(--ys-surface); border-bottom:1px solid var(--ys-line);
  padding:8px 16px;
  padding-top:calc(8px + env(safe-area-inset-top,0px));
}
.site-header__logo{display:inline-flex; align-items:center; padding:11px 0; line-height:0}
.site-header__logo img{height:44px; width:auto; display:block}
.site-header__note{
  font-size:.75rem; color:var(--ys-text-sub); text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52vw;
}
.site-header__logo:focus-visible{outline:2px solid var(--ys-crimson); outline-offset:2px}
@media(max-width:639px){
  .site-header{padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .site-header__logo{padding:10px 0}
  .site-header__logo img{height:40px}
}

/* ── 選手名検索（ヘッダー内）──────────────────────────────
   入力欄は全ページで常に表示する。PCはロゴの右、スマホ幅では2段目に横幅いっぱい。 */
.site-search{position:relative; flex:0 1 300px; display:flex; justify-content:flex-end}
.site-search__panel{position:relative; width:100%}
.site-search__input{
  width:100%; height:44px; padding:0 12px; font:inherit; font-size:14px;
  color:var(--ys-text); background:var(--ys-surface);
  border:1px solid var(--ys-line); border-radius:6px; -webkit-appearance:none;
}
.site-search__input::placeholder{color:var(--ys-text-label)}
.site-search__input:focus{outline:2px solid var(--ys-crimson); outline-offset:1px}

.site-search__list{
  position:absolute; z-index:300; top:calc(100% + 6px); right:0; left:0;
  margin:0; padding:4px; list-style:none; max-height:60vh; overflow-y:auto;
  background:var(--ys-surface); border:1px solid var(--ys-line); border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,0.12);
}
.site-search__list li{margin:0}
.site-search__list a{
  display:block; padding:8px 10px; border-radius:6px; text-decoration:none; color:var(--ys-text);
}
.site-search__list a:hover,.site-search__list li[aria-selected="true"] a{background:var(--ys-tag)}
.site-search__name{font-size:14px; font-weight:700; display:block}
.site-search__meta{font-size:11px; color:var(--ys-text-sub); display:block; margin-top:1px}
.site-search__empty{padding:10px; font-size:13px; color:var(--ys-text-sub)}

@media(max-width:639px){
  /* 検索窓を2段目に送り、横幅いっぱいにする */
  .site-search{flex:1 0 100%; justify-content:stretch}
}

/* ── 全ページ共通フッター ──────────────────────────────
   マークアップは search_ui.py の site_footer() が持つ。 */
.site-footer{
  border-top:1px solid var(--ys-line); margin-top:28px; padding-top:16px;
  font-size:13px; line-height:1.9; color:var(--ys-text-sub);
}
.site-footer p{margin:0}
.site-footer a{color:var(--ys-crimson)}
.site-footer__nav{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.site-footer__nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-weight:700; text-decoration:none;
}
.site-footer__nav a:hover{text-decoration:underline}
.site-footer__sep{color:var(--ys-line)}