/* サイト共通トップバー
 *
 * 入口ページ以外の公開ページの先頭に、作り手のアイコンと `SANGA TOOLBOX` を置く。
 * アイコンは入口ページと同じく作成者のXへ、`SANGA TOOLBOX` は入口ページへ向く。
 *
 * 各ページのCSSより後に読み込む。入口ページは自前の .topbar を持つため読み込まない。
 *
 * 設計上の判断
 *  - **画面に固定しない。** 通常のフローに置き、スクロールすればそのまま流れて消える。
 *    固定すると、縦の狭い画面で本文の場所を常に奪い、貼り付く見出しやダイアログとも
 *    重ね順を取り合うため。以前は position: fixed だったが取りやめた。
 *  - そのため高さぶんの余白（body の padding-top）も、`--topbar-h` の宣言も持たない。
 *    読んでいた側（SUPPORTER TIMELINE の貼り付く見出し）も削除済みで、見出しは
 *    画面上端で止まる。リポジトリ内に `--topbar-h` を使う場所はもう無い（2026-09-08）。
 *  - 地は不透明にする。バーの下には白い紙の面や白い表が流れるページがあり、
 *    透かすと白い文字が読めなくなる。
 */

:root{
  --topbar-tap:44px;
}

.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  box-sizing:border-box;
  /* ページ側の左右余白の外へ広げて、画面幅いっぱいの帯にする。
     公開ページの body は「中央寄せの flex」だったり「左右に padding」だったりと
     まちまちで、そのままだと帯が本文の幅に縮む。 */
  margin-inline:calc(50% - 50vw);
  /* 縦並びの flex で中央寄せしている body（予想スカッド・2025シーズン日程）では、
     指定しないと帯が中身の幅（実測220px）に縮む。 */
  align-self:stretch;
  padding:10px clamp(14px,4vw,28px);
  padding-left:max(clamp(14px,4vw,28px), env(safe-area-inset-left));
  padding-right:max(clamp(14px,4vw,28px), env(safe-area-inset-right));
  background:rgba(24,6,26,.94);
  border-bottom:1px solid rgba(255,255,255,.14);
  font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
}

.topbar-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  /* 絵は34pxだが、外部サイトへ移動するリンクなので当たり判定は44px四方にする */
  min-height:var(--topbar-tap);
  width:var(--topbar-tap);
  margin-left:-5px;
  flex:none;
}

/* 元画像は白地の正方形。丸く抜いて、暗い地から浮くように縁を足す（入口ページと同じ）。
   height:auto を落とすと height 属性の128pxが残り、バーが148pxまで伸びる。 */
.topbar-mark img{
  display:block;
  width:34px;
  height:auto;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.28);
}

.topbar-home{
  /* 入口ページのナビに寄せて、字間を広くとった小さな欧文にする */
  display:flex;
  align-items:center;
  min-height:var(--topbar-tap);
  padding:0 2px;
  color:rgba(255,255,255,.72);
  font-size:.68rem;
  letter-spacing:.22em;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:color .25s ease;
}

.topbar-home:hover,
.topbar-home:focus-visible{color:#fff}

.topbar a:focus-visible{outline:2px solid #6fd6e8;outline-offset:2px}

/* 320px幅では字間ぶんが収まらない。詰めて収める（入口ページと同じ考え方） */
@media (max-width:360px){
  .topbar{padding-left:6px;padding-right:8px}
  .topbar-home{letter-spacing:.1em}
}

/* 年間スケジュールの body は「横並びの flex で中央寄せ」で、そのままだとバーが
   本文の隣に並んでしまう（実測で幅220px・高さ2850pxの縦帯になった）。
   折り返しを許して、バーだけで1行を占めるようにする。 */
body.topbar-row{flex-wrap:wrap}
body.topbar-row>.topbar{flex:0 0 100%}

/* 年間スケジュールの画像生成画面は操作UIを隠す画面なので、バーも隠す。
   :has() が無いブラウザではバーが残るだけで、生成画像の対象は
   [data-share-capture-target] の中だけなので画像には入らない。 */
body:has(.phone.is-screenshot-mode) .topbar{display:none}