/* アカウントのメニュー（account-menu.js）の見た目。2026-10-27 に account-menu.js の中の文字列から出した（CSP でインラインの style を禁じたため）。
   account-menu.js と同じ場所（/admin/）に置く。サインイン専用サイトでは公開のときに site/admin/ に写し、レツデンでは sync-auth.ps1 で web/admin/ に写す */
.sam-account { position: relative; flex: none; font-size: 16px; line-height: 1.6; }
.sam-account[hidden] { display: none; }
:where(.sam-account) button, :where(.sam-account) a { font: inherit; color: inherit; }   /* :where で弱くし、下の大きさの指定を優先する */
/* ボタンの文字は .9em（16px なら 14.4px）。高さ 36px・幅 168px などは、その文字の大きさで割った em で書く */
.sam-button {
  display: inline-flex; align-items: center; gap: .5556em; height: 2.5em; padding: 0 .8333em; font-size: .9em;
  border: 1px solid var(--line); border-radius: .5em; background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap;
}
.sam-button:hover, .sam-button[aria-expanded="true"] { background: var(--surface-2); }
.sam-button svg { width: .9722em; height: .9722em; color: var(--muted); transition: transform .15s; }
.sam-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.sam-menu {   /* max-width: none … ページの CSS（例：レツデンの *{max-width:100%}）で、名前のボタンの幅に縮まないように */
  position: absolute; right: 0; top: calc(100% + .5em); z-index: 300; display: grid; gap: .5em; padding: .875em; max-width: none;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius, 12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.sam-menu[hidden] { display: none; }
.sam-who { padding-bottom: .625em; border-bottom: 1px solid var(--line); }
.sam-who .sam-name { font-weight: 700; font-size: .9375em; }
.sam-who .sam-id { color: var(--muted); font-size: .8em; }
.sam-label { color: var(--muted); font-size: .78em; margin-top: .125em; }
.sam-theme {
  display: flex; width: 10.5em; height: 2.25em; padding: .1875em;
  border: 1px solid var(--line); border-radius: .5em; background: var(--surface-2);
}
.sam-theme button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .25em; padding: 0;
  border: none; border-radius: .375em; background: transparent; color: var(--muted); font-size: .85em; cursor: pointer;
}
.sam-theme button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow, 0 1px 2px rgba(16, 24, 40, .12)); }
.sam-item {   /* 画面の色の切り替えと同じ幅 168px・高さ 36px（文字 .9em で割った値） */
  display: inline-flex; align-items: center; justify-content: center; width: 11.6667em; height: 2.5em; padding: 0 .6944em; font-size: .9em;
  border: 1px solid var(--line); border-radius: .5556em; background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.sam-item:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }