/* ヘッダーの正本（RULEBOOK §10-9）。解説ページ以外の全ページが読む。
 *
 * なぜ1ファイルにしたか：
 *   2026-08-04 まで**9ページが同じヘッダーCSSを個別に持っていた**。
 *   コピー元が少しずつ古く、実測すると3系統に分かれていた：
 *     A 紙地・左寄せ・墨h1（トップ・運営メモ）
 *     B 紙地・左寄せ・墨h1＋右上に青ピル（単語帳・ガイド・論述・ログイン紹介・仕組み43枚）
 *     C **青のグラデーション帯・中央寄せ・白h1**（解答用紙・マイページ・ポリシー）
 *   ロゴは 52/56/60/64px の4種、h1 は 24/25/26/28/31px の5種に散っていた。
 *   ★**コピーを配ると必ずこうなる。ヘッダーを直すときはこのファイルだけを直す。**
 *
 * ★絶対配置を使わない（§10-9）。
 *   .logo/.back を position:absolute で置き h1 に margin-left で場所を空ける作りだと、
 *   タイトルが折り返した瞬間にボタンの下へ潜り込む。実際 390px で43枚中30枚が被った。
 *   grid で列を分ければ、何行に折り返しても列の外へ出ない。
 *   検査＝`node scripts/check_overlap.mjs`（390/640/1200px）。
 *
 * ページごとに本文幅が違うので、読み込む側で --hd-max を上書きする：
 *   :root{--hd-max:1160px}   （単語帳・仕組み索引・トップ）
 *   既定は 900px。
 */
:root{ --hd-max:900px }

header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  /* 3行目は「幅いっぱいのナビ」用。使わないページでは高さ0に潰れるので害はない。 */
  grid-template-areas:"logo h1 nav" "logo tag nav" "navrow navrow navrow";
  align-items:center;
  column-gap:16px;
  padding:22px max(20px,calc((100vw - var(--hd-max))/2));
  border-top:6px solid var(--blue,#527bac);
  border-bottom:2px solid var(--ink,#191919);
  background:var(--paper,#f5f0e7);
  color:var(--ink,#191919);
  text-align:left;
}
header .logo{ grid-area:logo; width:56px; height:56px; object-fit:contain; border-radius:0 }
header h1{
  grid-area:h1; margin:0;
  font-family:var(--display,"IBM Plex Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,sans-serif);
  font-size:28px; line-height:1.25; font-weight:900; letter-spacing:.04em;
}
header h1 a{ color:inherit; text-decoration:none }
/* ★2026-08-05：ワードマークは「スジ」だけ青（ロゴと同じ塗り分け）。
   「トキ」は墨のまま、`.ev`（TRACE THE EVIDENCE）は --muted のまま。 */
header h1 > span:nth-of-type(2){ color:var(--blue,#527bac) }
header .tag{ grid-area:tag; margin:5px 0 0; color:var(--muted,#66645f); font-size:13px; line-height:1.6 }

/* ★トップのブランド表記だけは §10-4（キャッチ二段・ロゴまわり）が優先する。
   説明行の13px とは役割が違うので、`.tag.catch` と `.ev` を別に持つ。
   §10-3b-2 の「.tag は13px」はこの2つには当てはまらない。 */
header h1 .ev{
  font-size:12px; font-weight:700; letter-spacing:.28em;
  color:var(--muted,#66645f); margin:0 22px 0 12px; white-space:nowrap; vertical-align:2px;
}
/* ★2026-08-05：キャッチは**地の文をグレー、鍵括弧の中だけ青**にする。
   18px の太字が全部黒だと威圧感がある、という指摘。全部を青にすると今度は主張が強いので、
   読ませたい「解ける人の思考回路」だけ青で立て、前後は --muted に落とす。 */
header .tag.catch{
  max-width:820px; color:var(--muted,#66645f);
  font-family:var(--display,"IBM Plex Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif);
  font-size:18px; font-weight:900; line-height:1.4; letter-spacing:.04em;
}
header .tag.catch b{ color:var(--blue,#527bac) }
@media (max-width:640px){ header .tag.catch{ font-size:15px } }

/* 導線はすべて .nav の中へ流し込む。auth.js のログイン／ログアウトもここに入る。 */
/* `.hd-right` は単語帳・ガイド・ログイン紹介で使われている .nav の別名。
   同じものとして扱う（片方だけ直すと、また3ページだけ挙動が変わる）。 */
header .nav,
header .hd-right{ grid-area:nav; justify-self:end; display:flex; flex-wrap:wrap; align-items:center; gap:8px }
/* ★項目が3つ以上の「ナビゲーション」は右列に押し込まない（`.nav wide`）。
   トップの5連ナビを右列に入れたら、折り返して h1「トキスジ｜TRACE THE EVIDENCE」に
   重なった。狭い列に多項目を入れると必ずこうなる。行を分ける。 */
header .nav.wide,
header .hd-right.wide{ grid-area:navrow; justify-self:stretch; margin-top:14px }
/* ★直接の子だけを対象にする。`header .nav a` と広く書くと、auth.js が入れる
   #authbox の中のリンク（ログイン中のユーザー名など）まで青ピルになる。
   authbox は自前で見た目を持つので、ここでは触らない。 */
header .nav > a,
header .hd-right > a,
header > .back{
  font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap;
  color:#fff; background:var(--blue,#527bac);
  padding:7px 13px; border-radius:999px; border-bottom:0; margin:0;
}
/* .nav の外に置かれた .back も同じ列に載せる（HTMLを触らずに移行できるように） */
header > .back{ grid-area:nav; justify-self:end }

@media (max-width:640px){
  /* 狭い画面では導線を1行下ろす。横に並べようとすると必ず見出しとぶつかる。
     ★説明行もロゴの右列から出して全幅にする。列に押し込むと横幅が 278px しか無く、
     単語帳の説明（83字）が5行に折り返してヘッダーが 245px まで伸びた。 */
  /* ★`navrow` を必ず含める。`.nav.wide{grid-area:navrow}` が指す領域を
     ここに書き忘れると、ブラウザが**暗黙の列**を作って h1 の列幅が 0px に潰れる。
     2026-08-05 にトップのモバイル表示が「トキ／ス／ジ」と1文字ずつ折り返して崩れた。
     areas を狭い画面用に書き換えるときは、広い画面側の全領域を必ず引き継ぐこと。 */
  header{ grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"logo h1" "tag tag" "nav nav" "navrow navrow";
    padding-top:16px; padding-bottom:16px; column-gap:12px }
  /* ★ロゴは56→44px。行の高さはロゴが決めているので、ここが12px効く。
     小さい端末（375×553 等）では一覧の1件目が画面に入るかどうかがこの差で決まる。 */
  header .logo{ width:44px; height:44px }
  header h1{ font-size:22px }
  header .tag{ font-size:12px; margin-top:8px }
  header .nav,
  header .hd-right,
  header > .back{ justify-self:start; margin-top:12px }
}