/* ===================================================================
   サイトの帯（ヘッダー）
   紹介ページ（lp.html）と道具側（style.css を読む各ページ）で共有する。
   以前は 2箇所に別々に書いていて、余白・寸法・色が少しずつずれていた。
   ここを唯一の置き場にする。片方だけ直さないこと。

   使うトークン: --line --text --muted --accent --on-accent --bg --bg2
   ここが決めるトークン: --gut（帯の左右の余白）
   =================================================================== */

/* hidden 属性は display 指定より優先させる（account-bar などの表示制御用）。 */
[hidden] { display: none !important; }

/* 帯の左右の余白。以前は紹介ページだけが自前の広いガターで上書きしていて、
   ページを移ると帯のロゴが 34px 横に飛んでいた。広い方（紹介ページの柱）に
   全ページを合わせ、置き場をここ1つにする。紹介ページの .shell もこれを使う。 */
:root { --gut: clamp(20px, 5vw, 64px); }

/* 縦スクロールバーの幅を常に確保する。紹介ページは必ずスクロールし、変換画面は
   中身が短いとスクロールしないので、確保しないとページを移るたびに帯が
   スクロールバーの幅（環境により15px程度）だけ横に動く。 */
html { scrollbar-gutter: stable; }

/* ===== サイトの帯 =====
   LP のヘッダーと同じ組み方。名前は帯だけに出し、カードは作業に専念させる。 */
.sitebar {
  /* body が縦の flex（中央寄せ）なので、伸ばさないとカード幅に縮む。 */
  align-self: stretch; width: 100%;
  max-width: 1180px; margin: 0 auto 28px; padding: 14px var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.1));
  /* 読み込む側の本文の行送りを継がない。紹介ページは 1.85 で組んでいるため、
     継ぐと札が縦に膨らんで帯の高さが道具側とずれる。 */
  line-height: normal;
}
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  transition: opacity .18s; }
.mark:hover { opacity: .8; }
.mark img { width: 52px; height: auto; display: block; }
.mark b { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.mark-en { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sitebar-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: flex-end; }
/* 変換の入口。選択中は塗って、いまどちらを扱っているか判るようにする。 */
/* 今いるページの札。動画／画像は app.js が、掲示板はサーバー(_modes)が付ける。
   ⚠️ .mode-link ではなく .navlink に付けること。掲示板の札は .mode-link を持たないので、
      限定すると掲示板にいる間だけ色が付かない。 */
.navlink.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.navlink.active:hover { background: var(--accent); color: var(--on-accent); }

/* ナビリンク */
.topnav { margin-top: 14px; }
.navlink {
  color: var(--muted); font-size: 12.5px; font-weight: 700; text-decoration: none;
  border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; transition: .18s;
  display: inline-block; cursor: pointer;
}
.navlink:hover { color: var(--text); border-color: rgba(132, 147, 255,0.5); }
.navlink.as-btn { background: transparent; font-family: inherit; }

/* アカウントバー（ログイン中） */
.topnav { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.account-bar { display: inline-flex; align-items: center; gap: 8px; }
.account-link {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px 4px 5px; transition: .18s;
}
.account-link:hover { border-color: rgba(132, 147, 255,0.5); }
.account-link { background: transparent; font-family: inherit; cursor: pointer; }
.account-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.account-name { color: var(--accent); font-size: 12.5px; font-weight: 700; }
/* 押すと開くことを示す小さな三角。開いたら上向きにする。 */
.account-caret {
  width: 0; height: 0; margin-left: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--muted); transition: transform .18s;
}
.account-menu.open .account-caret { transform: rotate(180deg); }

/* 名前を押すと出る、本人向けのページの一覧。 */
.account-menu { position: relative; display: inline-flex; }
.account-pop {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  flex-direction: column; min-width: 168px; padding: 6px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.account-menu.open .account-pop { display: flex; }
.account-item {
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
  color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: .15s;
}
.account-item:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* ===================================================================
   狭い画面のメニュー
   札を並べると帯が二段三段になるので、右上のボタンにまとめる。
   ボタンは nav.js が組み立てるので、ここには出てくる時の見た目だけを書く。
   =================================================================== */
.menu-btn { display: none; }

@media (max-width: 640px) {
  .sitebar { position: relative; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: auto; flex: 0 0 auto;
    background: transparent; border: 1px solid var(--line); border-radius: 12px;
    color: var(--text); cursor: pointer; transition: border-color .18s, background .18s;
  }
  .menu-btn:hover { border-color: rgba(255, 255, 255, 0.22); }
  .menu-ico { position: relative; display: block; width: 18px; height: 12px; }
  .menu-ico i {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .22s ease, opacity .16s ease;
  }
  .menu-ico i:nth-child(1) { top: 0; }
  .menu-ico i:nth-child(2) { top: 5px; }
  .menu-ico i:nth-child(3) { top: 10px; }
  /* 開いている間は×に組み替える。閉じる場所が分かる。 */
  .sitebar.menu-open .menu-ico i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .sitebar.menu-open .menu-ico i:nth-child(2) { opacity: 0; }
  .sitebar.menu-open .menu-ico i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .sitebar .sitebar-nav {
    position: absolute; top: calc(100% - 4px); right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 6px; min-width: 216px; max-width: calc(100vw - 20px); padding: 10px;
    background: var(--bg2); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.97);
    transform-origin: top right;
    transition: opacity .18s ease, transform .24s cubic-bezier(.2, .85, .3, 1),
      visibility .24s;
  }
  .sitebar.menu-open .sitebar-nav {
    opacity: 1; visibility: visible; transform: none;
  }
  /* 縦に積むので幅に余裕がある。狭い画面で落としていた語を戻す。 */
  .sitebar .sitebar-nav .nav-full { display: inline; }
  .sitebar .sitebar-nav .navlink,
  .sitebar .sitebar-nav .account-link {
    justify-content: flex-start; border-radius: 10px; font-size: 13px;
    padding: 9px 12px;
  }
  .sitebar .sitebar-nav .account-bar {
    flex-direction: column; align-items: stretch; gap: 6px;
    padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--line);
  }
  /* この帯自体が既に開閉式なので、中で二重に開かせない。行き先はそのまま並べる。
     ⚠️ .account-menu.open より後に書くこと。開いた状態の指定に負けて、
        名前を押すたびに浮いた小箱が出てしまう。 */
  .sitebar .sitebar-nav .account-menu { display: block; }
  .sitebar .sitebar-nav .account-menu .account-pop,
  .sitebar .sitebar-nav .account-menu.open .account-pop {
    display: flex; position: static; min-width: 0; padding: 6px 0 0;
    background: none; border: none; border-radius: 0; box-shadow: none;
  }
  .sitebar .sitebar-nav .account-item { padding: 9px 12px; }
  /* 開閉しないので三角は意味を持たない。 */
  .sitebar .sitebar-nav .account-caret { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sitebar .sitebar-nav, .menu-ico i { transition: none; }
}

/* 狭い画面。英字表記を落とし、札を詰めて1行に収める。
   ここも両方のページで共有する（片方だけ英字が残る、といったずれを防ぐ）。 */
@media (max-width: 480px) {
  .sitebar { padding: 12px var(--gut); margin-bottom: 20px; gap: 6px; }
  .sitebar-nav { gap: 6px; }
  .mark-en { display: none; }
  .mark img { width: 40px; }
  .mark b { font-size: 14px; white-space: nowrap; }
  .sitebar .nav-full { display: none; }
  .sitebar .navlink { font-size: 12px; padding: 6px 8px; }
}