/* ヘッダーに並ぶ部品(戻る・移動・テーマ切り替え)の唯一の定義。

   同じ役目のものが4つの名前で書かれていた。index=.settings-link、history と
   dashboard=.btn、settings/login/legal/share=.back。名前が違うだけでなく形も
   違い、history と dashboard だけ文字が細く(400)、index だけ背景が白で角丸が
   9px だった。どの画面から来たかで見た目が変わる。

   色は画面ごとの --rule / --line / --color-line を参照しない。3系統の名前が
   同じ色を別名で指しているので、どれか1つに寄せると残り2つを巻き込む。ここでは
   tokens.css の原板から自前の --control-* を宣言して閉じる。

   .btn (撮影・地図・記録の操作) と .button (フォームの送信) は別の役目なので
   そのまま。ここに混ぜると、flex:1 で伸びる規則までヘッダーに掛かる。 */
:root{
  --control-bg:var(--n-964);
  --control-line:var(--n-88);
  --control-line-hover:var(--n-60);
  --control-ink:var(--n-27);
  --control-focus:var(--gr-48);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --control-bg:var(--n-22);
  --control-line:var(--n-31);
  --control-line-hover:var(--n-52);
  --control-ink:var(--n-96);
  --control-focus:var(--gr-78);
}}
:root[data-theme="dark"]{
  --control-bg:var(--n-22);
  --control-line:var(--n-31);
  --control-line-hover:var(--n-52);
  --control-ink:var(--n-96);
  --control-focus:var(--gr-78);
}
.control{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 13px;border:1px solid var(--control-line);border-radius:8px;background:var(--control-bg);color:var(--control-ink);font:inherit;font-weight:650;text-decoration:none;white-space:nowrap;cursor:pointer}
.control:hover:not(:disabled){border-color:var(--control-line-hover)}
.control:active{transform:translateY(1px)}
.control:focus-visible{outline:2px solid var(--control-focus);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){.control{transition:border-color .15s ease,background-color .15s ease,transform .08s ease}}
.theme-toggle{min-width:84px;gap:6px}