/* 上部の小さな表示設定。本文や下部の投稿ボタンと重ねない。 */
.display-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 44px;
  padding-top: max(.25rem, env(safe-area-inset-top, 0px));
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .4rem .65rem;
  border: 1px solid var(--control);
  border-radius: 999px;
  background: var(--white);
  color: var(--text-2);
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}
.theme-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
:root[data-theme="dark"] .theme-toggle:hover { background: #362139; }
:root[data-theme="light"] .theme-toggle:hover { background: var(--red-tint); }
/* 表示モードを問わず、開始カードの左端は他の辺と同じ細い枠にする。 */
#screen-intro .intro { border-left-width: 1px; }
/* 共有ページも同じ表示設定を引き継ぐ。 */
.share-landing .display-tools { max-width: 820px; margin-inline: auto; padding-inline: 1rem; }
.share-landing main { padding-top: .5rem; }