/* TASTEOME Unified Site Header — 全 page 共通 */
/* Phase Consistency Overhaul (2026-06-03): hub / legal / root / domain で同一 markup */

/* sticky はこの全幅バーが担う (owner 指示 2026-08-19 — X/Reddit 風のスクロール追従)。
   背景は**不透明 token** (浮遊面規約 — 半透明はコンテンツが透けて contrast 保証がない)。
   z-index はコンテンツより上・drawer(2500)/modal(2000+) より下。 */
.site-header-bar {
  position: sticky; top: 0; z-index: 1000;
  background: var(--t-bg);
  border-bottom: 1px solid var(--t-border);
}
.site-header-bar--domain { background: var(--t-surface); }
/* fragment link (#hash) の飛び先が sticky バーの背後に入らないための共通対策
   (Codex Final M2 — /legal/ の目次・/work/#wk-links 等)。バー実高は言語/折返しで
   56〜72px 程度に振れるため、余裕込みの固定値でカバーする */
html { scroll-padding-top: 4.75rem; }

/* 🔴 **内側も全幅** (owner 指摘 2026-09-05「ヘッダーの左右の余白が大きすぎる。
   youtube とか参考にして。」) — 1100px 中央寄せのままだと 1440 で brand が x≈190・
   右端の action が x≈1240 になり、**左右に約 200px の余白**ができていた。
   参照 (YouTube 1440) = ハンバーガー + ロゴが左端 16px・action 群が右端から 16px。
   ⇒ `max-width` を外して左右 padding **1rem (16px)** に統一する。
   ⚠ **全幅すべてで同じ規則** (1024px 以上の常設 drawer 側も 1023px 以下も) — 面や幅で
     余白の規則を割らない。
   ⚠ 上下の padding は **0.8rem のまま** — バー実高を変えないため
     (`--site-header-h` が drawer の `top` を決めるので、高さを動かすと連動して動く)。
   ⚠ 指示は**余白だけ**なので、検索バーの中央配置などは足さない (YouTube の他の要素は
     借りない)。 */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1rem;
  max-width: none; width: 100%; margin: 0;
  gap: 1rem;
  font-family: var(--t-font-sans);
  flex-shrink: 0;
}

.site-brand {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 700; letter-spacing: 0.15em; font-size: 1.05rem;
  color: var(--t-fg);
  text-decoration: none;
  flex-shrink: 0;
  /* 実測 高さ 20px。ヘッダ内で縦に伸ばすだけなのでロゴ・文字は動かない
     (align-items: center のまま。2026-08-30 mobile view 精査)。 */
  min-height: var(--t-tap-min, 44px);
}
.site-brand::before {
  content: '';
  /* mark は 1 : 2.02 の縦長 (assets/logo-mark.svg)。幅は高さ × 0.4949。
     高さ 1.5em (= 25px) は owner 選択 (2026-09-18) — 旧 1.3em 正方の据え置きだと縦長の分だけ
     字面より小さく見えた。⚠ 行の高さは `.site-brand` の min-height (44px) が支配するので動かない。 */
  width: 0.75em; height: 1.5em;
  /* mask + background-color。background-image だと外部 SVG に host の CSS が届かず
     currentColor が黒に落ち、dark theme で線が消えていた (2026-09-18 実測)。 */
  background-color: var(--t-fg);
  -webkit-mask-image: url('/assets/logo-mark.svg');
  mask-image: url('/assets/logo-mark.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.site-brand:hover { opacity: 0.85; text-decoration: none; }

.site-nav {
  display: flex; align-items: center; gap: 0.4rem;
  flex-wrap: nowrap;
}
.site-nav a {
  color: var(--t-muted);
  font-size: 0.88rem;
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  border-radius: var(--t-r-sm);
  transition: all var(--t-trans-fast);
}
.site-nav a:hover {
  color: var(--t-fg);
  background: var(--t-bg-elev);
}
.site-nav a.active {
  color: var(--t-fg);
  font-weight: 600;
  background: color-mix(in srgb, var(--t-accent) 12%, transparent);
}

.site-nav .header-tasteome { margin-left: 0.3rem; }

/* brand を左グループ (hamburger + brand) の末端に固定し nav を右端へ押し出す
   (React SiteHeader は全 variant 同一構造 = hamburger / brand / nav — 旧 :not(--domain)
   条件は legacy の nav-left/right 構造専用で、2026-08-17 の --domain 現役化で撤去) */
.site-header .site-brand {
  margin-right: auto;
}

/* ── Domain modifier (3D map 面) — plot 領域との視覚的境界。
   React SiteHeader が domainChrome prop で付与 (AppShell variant='domain')。
   ⚠ 2026-09-05 に **素の `.site-header` も全幅になった**ので、この変種が持つ意味は
   上下 padding の詰め (0.65rem) と背景/境界線だけになった (`max-width: none` は重複だが、
   規則の由来 [owner 指摘 2026-08-17] を残すため宣言はそのまま置く)。 */
.site-header--domain {
  max-width: none;
  padding: 0.65rem 1rem;
  /* 背景と下境界線は .site-header-bar--domain (sticky バー) 側が持つ */
  flex-shrink: 0;
}

/* Mobile: nav links 非表示にして persistent link のみ */
@media (max-width: 540px) {
  /* ⚠ **直接の子だけ**を畳む。子孫 selector (`.site-nav a`) にすると、`.site-nav` の中に
     置かれた `.acct-nav` の dropdown まで巻き込む。実測 (2026-08-30・390px) では
     アカウントメニュー 6 項目・通知行 `.nt-link`・匿名時の `.acct-nav-signin` が
     すべて display:none になっており、モバイルから `/settings/` (退会・handle 変更・
     公開範囲) へ行く導線が URL 直打ち以外に無い状態だった。
     畳む対象は構造上「nav の直接の子」なので selector もそう書く。
     `.tasteome-link` は `.header-tasteome` div 越しなので、wrapper 側を畳む。
     ⚠ 逃げ道 class (`.always-show`) は置かない — 使用箇所 0 のまま罠だけ残っていた形で、
     「印を知らずに足された要素が既定で消される側に落ちる」のが今回の原因そのもの。 */
  .site-nav > a,
  .site-nav > .header-tasteome { display: none; }
  .site-header { padding: 0.7rem 1rem; }
  .site-header--domain { padding: 0.55rem 0.75rem; }
  .site-brand { font-size: 0.95rem; letter-spacing: 0.12em; }
}

/* 🔴 **狭い端末 (SE 系 320px) でブランドを 1 段小さくする** (2026-09-13)。
   ⚠ 「サインイン」の pill に `white-space: nowrap` を入れて折返しを止めた結果、
     **今度は横にはみ出す言語が出た** — 実測 320px: es 11px / fr 13px (ja / en / ko /
     zh-Hant は収まる)。pill は主導線なので縮めず、**ブランド側が譲る**。
   ⚠ `flex-shrink: 0` を外す案は採らない — 縮むと文字が切れて「TASTEOM」になる。
     font-size と字送りだけ落として**語を保つ**。
   ⚠ 360px 以上には当てない (実測で全言語 44px / はみ出し 0 = 触る理由が無い)。
   ⚠ **直前の段は `@media (max-width: 540px)`** (0.95rem / 0.12em) — ここはそこから
     さらに 1 段。`.site-brand` に font 系を当てるのは repo 全体でこの 3 箇所だけで、
     同詳細度 (0,1,0) の**最後**に置いてあるので ≤359 で勝つ。 */
@media (max-width: 359px) {
  .site-brand { font-size: 0.85rem; letter-spacing: 0.06em; }
  /* 🔴 サインイン中の操作 3 つ (DM / 鐘 / アバター) を 320 に収める残りの 16px (WEB-HEADER-320-OVERFLOW)。
     ≤389 の段 (`apps/web/src/ui/shell/shell.css` の `.acct-nav`) で 14px 詰めても、320 はまだ 14 溢れる。
     ⚠ 余白だけ — `justify-content: space-between` なので、効くのはハンバーガーとロゴの間 (16 → 8) と、
       ロゴと操作群の最小の間隔。 */
  .site-header { gap: 0.5rem; }
}