:root {
  --z-menu: 4000;
  --rb-menu-w: min(92vw, 360px);
  --rb-menu-safe: 12px;
  --rb-menu-safe-top: max(env(safe-area-inset-top, 0px), var(--rb-menu-safe));
  --rb-menu-safe-right: max(env(safe-area-inset-right, 0px), var(--rb-menu-safe));
  --rb-menu-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--rb-menu-safe));
  --rb-menu-safe-left: max(env(safe-area-inset-left, 0px), var(--rb-menu-safe));
}

@supports (width: 100dvw) {
  :root {
    --rb-menu-w: min(92dvw, 360px);
  }
}

#rb-burger {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: color-mix(in oklab, Canvas 92%, CanvasText 8%);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: var(--z-menu);
  flex-shrink: 0;
  margin-left: 8px;
  margin-right: 20px; /* はみ出し問題の修正 */
}

#rb-burger .rb-ico {
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
}

#rb-burger .rb-ico::before,
#rb-burger .rb-ico::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}

#rb-burger .rb-ico::before {
  top: -6px;
}

#rb-burger .rb-ico::after {
  top: 6px;
}

#rb-menu {
  position: fixed;
  top: calc(var(--header-h, 56px) + var(--rb-menu-safe-top));
  right: var(--rb-menu-safe-right);
  width: min(var(--rb-menu-w), calc(var(--rb-viewport-w) - var(--rb-menu-safe-left) - var(--rb-menu-safe-right)));
  max-width: calc(var(--rb-viewport-w) - var(--rb-menu-safe-left) - var(--rb-menu-safe-right));
  max-height: calc(100vh - var(--header-h, 56px) - var(--rb-menu-safe-top) - var(--rb-menu-safe-bottom));
  background: color-mix(in oklab, Canvas 96%, CanvasText 4%);
  color: inherit;
  border: 1px solid color-mix(in oklab, CanvasText 20%, Canvas 80%);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  z-index: var(--z-menu);
  opacity: 0;
  transform: scale(.98);
  pointer-events: none;
  overflow: auto;
  overscroll-behavior: contain;
  transition: opacity .14s ease, transform .14s ease;
}

@supports (height: 100dvh) {
  #rb-menu {
    max-width: calc(100dvw - var(--rb-menu-safe-left) - var(--rb-menu-safe-right));
    max-height: calc(100dvh - var(--header-h, 56px) - var(--rb-menu-safe-top) - var(--rb-menu-safe-bottom));
  }
}

#rb-menu.is-open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

#rb-menu header {
  padding: 12px 14px;
  font-weight: 600;
  border-bottom: 1px solid color-mix(in oklab, CanvasText 18%, Canvas 82%);
}

#rb-menu .rb-menu-user {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px 12px;
  font-size: .88rem;
  border-bottom: 1px solid color-mix(in oklab, CanvasText 16%, Canvas 84%);
  color: color-mix(in oklab, CanvasText 90%, Canvas 10%);
}

#rb-menu .rb-menu-user[hidden] {
  display: none;
}

#rb-menu .rb-menu-user-status {
  font-weight: 600;
  letter-spacing: .04em;
  font-size: .82rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, CanvasText 10%, Canvas 90%);
  color: color-mix(in oklab, CanvasText 80%, Canvas 20%);
}

#rb-menu .rb-menu-user-email {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

#rb-menu .rb-menu-sec {
  padding: 8px 0;
}

#rb-menu .rb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  flex-wrap: wrap;
}

#rb-menu .rb-item[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

#rb-menu .rb-sep {
  height: 1px;
  background: color-mix(in oklab, CanvasText 16%, Canvas 84%);
  margin: 6px 0;
}

#rb-menu .rb-right {
  margin-left: auto;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

#rb-menu .rb-subtext {
  width: 100%;
  margin-left: auto;
  color: color-mix(in oklab, CanvasText 72%, Canvas 28%);
  font-size: .85rem;
  line-height: 1.35;
  opacity: .9;
}

#rb-menu .rb-font-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

#rb-menu .rb-font-label {
  font-family: inherit;
  flex: 1 1 auto;
  min-width: 0;
}

#rb-menu .rb-font-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  margin-left: auto;
  padding-inline: 22px;
  flex: 0 1 auto;
  min-width: 0;
}

#rb-menu .rb-font-scale {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  opacity: .75;
  white-space: nowrap;
  font-size: .88rem;
}

#rb-menu .rb-font-btn {
  appearance: none;
  border: 1px solid color-mix(in oklab, CanvasText 18%, Canvas 82%);
  background: color-mix(in oklab, Canvas 95%, CanvasText 5%);
  color: inherit;
  border-radius: 8px;
  padding: 6px 8px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

#rb-menu .rb-font-btn:hover {
  background: color-mix(in oklab, Canvas 92%, CanvasText 8%);
}

#rb-menu .rb-font-btn:focus-visible {
  outline: 2px solid color-mix(in oklab, currentColor 55%, Canvas 45%);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  #rb-menu {
    right: max(calc(var(--rb-menu-safe) + var(--rb-safe-right)), calc(8px + var(--rb-safe-right)));
  }
}


/* === Header compact + brand centered + tighter burger =================== */
/* 値だけいじれば微調整できます */
:root {
  --header-h: 48px;
  /* ヘッダーの高さ（前は56px） */
  --pad-x: 12px;
  /* 既存の左右paddingと合わせる */
  --wrap-max: 1100px;
  --burger-size: 34px;
  /* 少し小さくして縦余白を詰める */
  --burger-radius: 10px;
  --brand-size: 18px;
  /* アプリ名を大きく */
}

/* ヘッダー自体を薄く */
header.topbar {
  min-height: var(--header-h);
}

/* 内側のwrapで垂直中央寄せ（既にalign-items:centerだが高さを固定） */
header.topbar .wrap {
  min-height: var(--header-h);
  padding-top: 0;
  /* 上下の余白を圧縮 */
  padding-bottom: 0;
  padding-right: calc(var(--pad-x) + var(--rb-safe-right));
}

header.topbar .topbar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ブランド（アプリ名）：サイズUP & ベースライン調整 */
.brand {
  font-size: var(--brand-size);
  line-height: 1;
  /* 縦センターで見栄え良く */
  display: flex;
  align-items: center;
  /* 小さい文字でも中央に */
}

.brand:hover,
.brand:focus-visible {
  text-decoration: none;
}

.rb-user-email {
  font-size: .85rem;
  opacity: .85;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  max-width: min(46vw, 260px);
  padding-right: 8px;
  overflow: hidden;
  cursor: default;
  position: relative;
}

.rb-user-email[hidden] {
  display: none !important;
}

.rb-user-email:focus-visible {
  outline: 2px solid color-mix(in oklab, currentColor 55%, Canvas 45%);
  outline-offset: 3px;
}

.rb-user-email-status {
  font-size: .75rem;
  letter-spacing: .08em;
  color: color-mix(in oklab, currentColor 72%, Canvas 28%);
  white-space: nowrap;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, currentColor 10%, Canvas 90%);
}

.rb-user-email-address {
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  max-width: 0;
  transition: max-width .18s ease, opacity .18s ease;
}

.rb-user-email:hover .rb-user-email-address,
.rb-user-email:focus-visible .rb-user-email-address,
.rb-user-email:focus-within .rb-user-email-address {
  opacity: 1;
  max-width: min(46vw, 220px);
}

@media (max-width: 600px) {
  .rb-user-email {
    max-width: min(56vw, 180px);
    font-size: .8rem;
  }

  .rb-user-email:hover .rb-user-email-address,
  .rb-user-email:focus-visible .rb-user-email-address,
  .rb-user-email:focus-within .rb-user-email-address {
    max-width: min(56vw, 160px);
  }
}

/* バーガー：ヘッダー内で正確に縦中央 + 少し小さめ + 明るめ */
#rb-burger {
  width: var(--burger-size);
  height: var(--burger-size);
  border-radius: var(--burger-radius);
  z-index: var(--z-menu);
  display: grid;
  place-items: center;
  border: 1px solid #36465f;
  background: #1a2533;
  color: #e9eef3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .02);
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  margin-left: 8px;
}

/* アイテムボタンの視認性向上 */
.translation-item {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: grab;
  user-select: none;
  background: #f9f9f9;
  color: #333;
  /* ボタンの文字色を黒に */
  font-weight: bold;
  /* ボタンの文字を太字に */
}

.translation-item:hover {
  background-color: #f0f0f0;
  /* ホバー時に少し色が変わる */
}

/* アイテムを並べるためのレイアウト調整 */
.sortable {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* アイテム同士の間隔を広げて、移動しやすく */
  justify-content: flex-start;
}

#visible-translations,
#hidden-translations {
  max-height: 300px;
  overflow-y: auto;
  /* アイテムが多すぎる場合にスクロール可能に */
}