/* ヘッダの共有メニュー(src/components/public/ShareMenu.tsx、#482)。
   SPA の SiteHeader / HeaderShell と A 層 prerender(scripts/exams/lib/render.mjs の静的
   ヘッダ。public/exams/assets/share-menu.css はこのファイルのコミット済みコピー)で共有する。
   起点はテーマ切替・ログイン・アカウントメニューと同寸(38px・丸・外枠)のアイコンボタン、
   パネルはアカウントメニュー(site.css .site-account-panel)と同じ見た目。
   tokens.css の変数(--fg / --glass-border / --bg / --eval-bg)だけに依存する */

.site-share-menu {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

.site-share-toggle {
  background: transparent;
  border: 2px solid var(--glass-border);
  color: var(--fg);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

/* 開いている印はタッチでも塗る。hover の塗りは (hover: hover) の中に置き、タップ後に
   残らないようにする(sticky hover、web#628。site.css の冒頭の説明と同じ) */
.site-share-toggle.open {
  background: var(--glass-border-hover);
}

@media (hover: hover) {
  .site-share-toggle:hover {
    background: var(--glass-border-hover);
  }
}

.site-share-toggle svg {
  display: block;
}

/* ボタン直下・右寄せ。ヘッダは sticky(z-index 100)なので本文より前に出る。
   モバイルはヘッダの横 padding(1.5rem × 2)ぶんを引いた幅に収める */
.site-share-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 3rem));
  background: var(--bg);
  border: 2px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* display: flex を持つ要素は UA の [hidden] { display: none } に勝ってしまうので明示(web#436) */
.site-share-panel[hidden],
.site-share-item[hidden] {
  display: none;
}

.site-share-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 1rem;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

@media (hover: hover) {
  .site-share-item:hover {
    background: var(--eval-bg);
  }
}

.site-share-item svg {
  flex-shrink: 0;
}

/* 状態行(コピーの結果)。空のときは場所を取らず、文言が出たらパネルの中だけが伸びる
   (パネルは absolute なので本文は動かない) */
.site-share-status {
  margin: 0;
  padding: 0 1rem;
  font-size: 0.8rem;
  color: var(--fg-muted);
  white-space: normal;
  overflow-wrap: anywhere;
}

.site-share-status:not(:empty) {
  padding: 0.5rem 1rem 0.7rem;
  border-top: 2px solid var(--glass-border);
}