/* テーマトークン(このファイルはTailwind非経由・静的ページにも単体で
   読み込まれるため、index.cssのCSS変数とは独立して自前で持つ)。
   ダークは [data-theme="dark"] のときだけ(OSの設定は見ない。いつもライトで開く)。 */
:root {
  --header-bg: #F9EC8E;
  --header-border: rgba(0, 0, 0, 0.12);
  --header-text: rgba(26, 26, 26, 0.9);
  --header-box-bg: #F9EC8E;
  --header-box-border: rgba(0, 0, 0, 0.12);
  /* index.css の --color-accent と同じ値。こちらは静的ページにも単体で
     読み込まれるためTailwindを経由できず、独立して持つ必要がある。 */
  --header-accent: #FAA0A0;
  --header-accent-dim: rgba(250, 160, 160, 0.14);
}


:root[data-theme="dark"] {
  --header-bg: #121212;
  --header-border: rgba(255, 255, 255, 0.12);
  --header-text: rgba(237, 237, 237, 0.9);
  --header-box-bg: #121212;
  --header-box-border: rgba(255, 255, 255, 0.12);
  --header-accent: #FAA0A0;
  --header-accent-dim: rgba(250, 160, 160, 0.14);
}

:root[data-theme="light"] {
  --header-bg: #F9EC8E;
  --header-border: rgba(0, 0, 0, 0.12);
  --header-text: rgba(26, 26, 26, 0.9);
  --header-box-bg: #F9EC8E;
  --header-box-border: rgba(0, 0, 0, 0.12);
  --header-accent: #FAA0A0;
  --header-accent-dim: rgba(250, 160, 160, 0.14);
}

/* サン/ムーンアイコンの出し分け。両方を常にDOMに置き、CSSだけで
   表示を切り替える(静的ページ側でJSXの三項演算子が使えないため)。
   デフォルト(data-theme未設定 = ライト相当)では月を出し、暗くする操作を促す。 */
.cosmic-header__icon--moon {
  display: block;
}
.cosmic-header__icon--sun {
  display: none;
}
:root[data-theme="dark"] .cosmic-header__icon--moon {
  display: none;
}
:root[data-theme="dark"] .cosmic-header__icon--sun {
  display: block;
}


/* メニュー(マス目)の色。開いた行のマスは、ライトは白、ダークは白っぽい薄いピンク
   (2026-10-04 本人指定。アイコンはどちらも濃い色)。
   ボタンの記号(2×2 のマス)の左上は、ライトは白、ダークはピンクで塗る(decisions のヘッダー)。 */
:root {
  --menu-cell-on: #FFFFFF;
  --menu-cell-ink: rgba(26, 26, 26, 0.9);
  --menu-glyph-fill: #FFFFFF;
  --menu-ink-on-accent: #1A1A1A;
}
:root[data-theme="dark"] {
  --menu-cell-on: #F2C4C4;
  --menu-cell-ink: #1A1A1A;
  --menu-glyph-fill: #FAA0A0;
}
:root[data-theme="light"] {
  --menu-cell-on: #FFFFFF;
  --menu-cell-ink: rgba(26, 26, 26, 0.9);
  --menu-glyph-fill: #FFFFFF;
}

/* ヘッダーには帯(地の色と下線)を付けない。背景のマスを画面の上まで見せるため、
   画面の幅に関係なく、左上にロゴ、右上にメニューのボタン、右下にテーマ切り替えだけを置く。
   スクロールした本文がボタンの後ろを通ることは、本人に伝えたうえで決めた(decisions のヘッダー)。 */
.cosmic-header {
  background: none;
  border: none;
  padding: 0;
}

.cosmic-header__container {
  display: block;
  padding: 0;
}

/* 右側グループは中身を画面の角へ置くだけの空箱 */
.cosmic-header__right-group {
  display: contents;
}

.cosmic-header__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* 左上のロゴ。トップの題字「@オーバーライド」と同じクラフト明朝・同じ配色(ピンクの字に黒い縁)。
   縁の太さは題字と同じ比率(題字は最大 6rem で縁 6px なので、文字の大きさの 1/16)。
   代わりの書体は使わない: 専用の名前で読み込み、読み込むまでは字を出さない(font-display: block)。 */
@font-face {
  font-family: 'Craft Mincho Logo';
  src: url('/fonts/craft-mincho.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.cosmic-header__logo {
  --logo-size: 28px;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  height: 45px;
  font-family: 'Craft Mincho Logo';
  font-size: var(--logo-size);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: #FAA0A0;
  -webkit-text-stroke: calc(var(--logo-size) / 16) #000;
  paint-order: stroke fill;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.cosmic-header__logo:focus-visible {
  outline: 2px solid var(--header-accent);
  outline-offset: 4px;
}

/* トップでは大きな題字と重なるので出さない */
/* トップで大きな題字が見えている間は隠す。外れたら、ふわっと出す */
.cosmic-header__logo--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 右上のメニュー(ProjectMenu.jsx / src/fx/projectMenu.js / src/data/projectMenuMarkup.js)。
   背景のマス目と同じ部品の見た目: 1行は 40px、左端の 40px のマスにアイコン、右に項目名。
   枠はサイトのテーマに合わせる(ライトは黄色の地、ダークは黒の地に細い線)。 */
.cosmic-header__menu {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
}

.cosmic-header__menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 45px;
  height: 45px;
  padding: 0;
  background: var(--header-box-bg);
  border: 1px solid var(--header-box-border);
  border-radius: 4px;
  color: var(--header-text);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.cosmic-header__menu-trigger:hover,
.cosmic-header__menu-trigger[aria-expanded="true"] {
  border-color: var(--header-accent);
}

.cosmic-header__menu-trigger:focus-visible {
  outline: 2px solid var(--header-accent);
  outline-offset: 2px;
}

/* ボタンの記号: 2×2 のマス(左上だけ塗る) */
.cosmic-header__menu-glyph {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.cosmic-header__menu-glyph-fill {
  fill: var(--menu-glyph-fill);
  stroke: none;
}

.cosmic-header__menu-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1002;
  width: 264px;
  box-sizing: border-box;
  background: var(--header-bg);
  border: 1px solid var(--header-box-border);
  border-radius: 4px;
  overflow: hidden;
}

.cosmic-header__menu-panel[hidden] {
  display: none;
}

.cosmic-header__menu-item {
  display: flex;
  align-items: center;
  height: 40px;
  text-decoration: none;
  color: var(--header-text);
  font-family: 'Zen Kurenaido', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  font-size: 0.95rem;
  white-space: nowrap;
}

.cosmic-header__menu-item:focus-visible {
  outline: 2px solid var(--header-accent);
  outline-offset: -2px;
}

/* 左端の 40px のマス。開くと上の行から順に白く(ダークは白っぽい薄いピンクに)なる */
.cosmic-header__menu-cell {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--menu-cell-ink);
  background: transparent;
  transition: background-color 220ms ease-out;
}

.cosmic-header__menu-cell svg {
  width: 20px;
  height: 20px;
}

/* 項目名は、マスより少し遅れて出る */
.cosmic-header__menu-label {
  padding: 0 0.9rem 0 0.75rem;
  opacity: 0;
  transition: opacity 160ms ease-out;
}

.cosmic-header__menu-panel[data-phase="open"] .cosmic-header__menu-cell {
  background: var(--menu-cell-on);
  transition-delay: calc(var(--i) * 60ms);
}

.cosmic-header__menu-panel[data-phase="open"] .cosmic-header__menu-label {
  opacity: 1;
  transition-delay: calc(var(--i) * 60ms + 120ms);
}

/* 閉じるときは、下の行から順にマスが元に戻る(項目名も同じ順で消える) */
.cosmic-header__menu-panel[data-phase="closing"] .cosmic-header__menu-cell {
  transition-delay: calc((var(--n) - 1 - var(--i)) * 45ms);
}

.cosmic-header__menu-panel[data-phase="closing"] .cosmic-header__menu-label {
  transition-delay: calc((var(--n) - 1 - var(--i)) * 45ms);
}

/* カーソルを乗せた行と、今いるページの行は、マスをピンクにする(アイコンは濃い色で読めるように) */
.cosmic-header__menu-panel[data-phase="open"] a.cosmic-header__menu-item:hover .cosmic-header__menu-cell,
.cosmic-header__menu-panel[data-phase="open"] a.cosmic-header__menu-item:focus-visible .cosmic-header__menu-cell {
  background: var(--header-accent);
  color: var(--menu-ink-on-accent);
  transition-delay: 0ms;
  transition-duration: 120ms;
}

.cosmic-header__menu-panel[data-phase="open"] .cosmic-header__menu-item--current .cosmic-header__menu-cell {
  background: var(--header-accent);
  color: var(--menu-ink-on-accent);
}

/* 今いるページの行は押せない */
.cosmic-header__menu-item--current {
  cursor: default;
}

/* 端末で動きを減らす設定なら、動きなしで開閉する(src/fx/projectMenu.js も同じ分岐を持つ) */
@media (prefers-reduced-motion: reduce) {
  .cosmic-header__menu-cell,
  .cosmic-header__menu-label {
    transition: none !important;
  }
}

/* スマホでは、角のボタンを指で押しやすい大きさ(44px)にそろえる
   (テーマ切り替えのボタンは、下の --theme-toggle-size で同じ 44px になる) */
@media (max-width: 640px) {
  .cosmic-header__menu-trigger {
    width: 44px;
    height: 44px;
  }

  .cosmic-header__logo {
    height: 44px;
  }
}

/* テーマ切替ボタン。以前はヘッダー内(デスクトップ)/モバイルのみ右下固定と
   画面幅で挙動が分かれていたが、「右下に移動したい」という指示を受けて
   常時position:fixedに統一した(2026-08-08)。ヘッダーの通常フローからは
   完全に外れるため、.cosmic-header__right-group内のどこに置いても見た目は
   変わらない。
   大きさは --theme-toggle-size で決める。以前はスマホの 44px の指定がこのルールより前にあり、
   後ろの 45px に負けてスマホでも 45px のままだった(2026-10-04 に気づいて直した)。
   Spotify ページは、プレイヤーの位置とページ下の余白をこの値から決めている(spotify/index.html)。 */
:root {
  --theme-toggle-size: 45px;
}
@media (max-width: 640px) {
  :root {
    --theme-toggle-size: 44px;
  }
}

.cosmic-header__theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1001;
  width: var(--theme-toggle-size);
  height: var(--theme-toggle-size);
  padding: 0;
  background: var(--header-box-bg);
  border: 1px solid var(--header-box-border);
  border-radius: 4px;
  color: var(--header-text);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.cosmic-header__theme-toggle:hover {
  border-color: var(--header-accent);
}