/* だれでも軌道設計 — 画面を覆って出るもの (確認ダイアログ・天体を追加する画面)

   css/ は index.html に書いた順で読み込まれる。同じ強さの規則は後勝ちなので、
   順番を入れ替えたり <link> の並びを変えたりしないこと。 */

/* ==================================================================
   天体を追加する画面
   ================================================================== */
/* ==================================================================
   Confirm dialog (js/ui/dialog.js)
   ================================================================== */
/* 天体を選ぶ画面より手前に出す (そこから消す操作を尋ねることがあるため) */
.dlg-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim);
}

.dlg-window {
  width: min(420px, 100%);
  padding: 20px 22px 16px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.dlg-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.dlg-text {
  /* 改行をそのまま出す (文をJS側で組み立てているため) */
  white-space: pre-line;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

.dlg-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.dlg-btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dlg-btn:hover {
  background: var(--gray-100);
}
.dlg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.dlg-btn--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}
.dlg-btn--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
/* 消えたら戻せないほう。押す前に色で気づけるようにする */
.dlg-btn--danger,
.dlg-btn--danger:hover {
  border-color: var(--danger);
  background: var(--danger);
  color: #ffffff;
}
.dlg-btn--danger:hover {
  filter: brightness(0.94);
}

.bp-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim);
}

.bp-window {
  display: flex;
  flex-direction: column;
  width: min(880px, 100%);
  height: min(600px, 100%);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-size: 12px;
}

.bp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 16px;
  background: var(--chrome-alt);
  color: var(--chrome-text);
  flex: 0 0 auto;
}
.bp-title {
  font-size: 13px;
  font-weight: 600;
}
.bp-close {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--chrome-dim);
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.bp-close:hover {
  background: var(--chrome-hover);
  color: var(--chrome-text);
}

.bp-search {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
  flex: 0 0 auto;
}
.bp-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
}
.bp-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.bp-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

/* 左: 分類の木 */
.bp-tree {
  flex: 0 0 210px;
  border-right: 1px solid var(--border);
  background: var(--surface-muted);
  overflow-y: auto;
  padding-bottom: 8px;
}
/* 見出し。押すとその塊ごと開閉する */
.bp-section {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px 7px 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  cursor: pointer;
}
.bp-section:hover {
  color: var(--text);
}
.bp-section.open .bp-node-mark {
  transform: rotate(90deg);
}
.bp-tree-empty {
  padding: 8px 12px;
  color: var(--text-muted);
}
.bp-node {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 12px 6px 8px;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.bp-node:hover {
  background: var(--gray-100);
}
.bp-node.active {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}
.bp-node-count {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* 開閉の目印。子を持つ分類だけ矢印が入り、開くと下を向く */
.bp-node-mark {
  flex: 0 0 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transition: transform 0.15s ease;
}
.bp-node.open .bp-node-mark {
  transform: rotate(90deg);
}
.bp-node-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右: 天体の一覧 */
.bp-list {
  flex: 1 1 auto;
  overflow-y: auto;
  min-width: 0;
}
.bp-list-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
}
.bp-list-more {
  color: var(--warn-text);
}
.bp-empty,
.bp-loading {
  padding: 28px 14px;
  color: var(--text-muted);
  text-align: center;
}

.bp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
}
.bp-row:hover {
  background: var(--gray-50);
}
.bp-row.selected {
  background: var(--accent-soft);
}
.bp-row-main {
  flex: 1 1 auto;
  min-width: 0;
}
.bp-row-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bp-row-name {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-row-sub {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-row-nums {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.bp-row-nums span {
  min-width: 74px;
  text-align: right;
}
/* 開いた軌道 (双曲線・放物線) の目印 */
.bp-badge {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
}
/* すでに天体の一覧に入っているもの */
.bp-badge--in {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* 取り込んだ天体を一覧から外すボタン。押し間違えると設計が消えるので、
   普段は控えめにしておき、触ったときだけ赤くする */
.bp-del {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bp-del:hover {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger-text);
}

/* 左の木の末尾、「軌道要素を入力して追加」への区切りと入口。
   分類の並びとは性質が違う(上級者向けの入口)ので、線で分けて控えめに置く */
.bp-tree-sep {
  height: 1px;
  margin: 8px 12px;
  background: var(--border);
}
.bp-manual-link {
  color: var(--text-muted);
  font-style: italic;
}

/* ==================================================================
   軌道要素を自分で入力
   ================================================================== */
.bp-manual {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  max-width: 520px;
}
/* e・i・Ω・ωなど軌道要素の記号は大文字化すると意味が変わるので、そのまま出す */
.bp-manual label {
  text-transform: none;
}
.bp-manual-hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.bp-manual-kind {
  gap: 6px;
  justify-content: flex-start;
}
.bp-manual-error {
  min-height: 16px;
  color: var(--danger-text);
  font-size: 12px;
}
.bp-manual-actions {
  justify-content: flex-end;
}

.bp-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
  flex: 0 0 auto;
}
.bp-detail {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-add {
  flex: 0 0 auto;
  padding: 7px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.bp-add:hover {
  background: var(--accent-strong);
}
.bp-add:disabled {
  border-color: var(--border);
  background: var(--gray-100);
  color: var(--gray-400);
  cursor: default;
}

.bp-status {
  padding: 0 14px 8px;
  color: var(--text-muted);
  font-size: 11px;
  min-height: 8px;
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .bp-tree {
    flex-basis: 150px;
  }
  .bp-row-nums span:nth-child(n + 3) {
    display: none;
  }
}

/* 区間 (レグ) の周回数を選ぶ行。
   見出しを左、ボタンを右に寄せて「打上げ (脱出速度)」などの行と同じ並びに揃える。
   .row の space-between のままだとボタンが横いっぱいに散ってスカスカに見える */
.leg-head {
  gap: 8px;
  flex-wrap: nowrap;
}
.leg-head > .fold-head {
  flex: 0 0 auto;
  white-space: nowrap;
}
.leg-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  flex-wrap: wrap;
}
.leg-head .leg-btns {
  justify-content: flex-end;
}
.leg-branch-label {
  color: var(--text-muted);
  font-size: 11px;
  flex: 0 0 auto;
}

/* 「軌道の取り方」と読み取りを1行に。左は見出し+ボタンを縦に積み、
   右にその他の読み取りを並べる (幅が余っているぶんを使って詰める) */
.leg-body {
  align-items: flex-start;
  gap: 16px;
}
.leg-branch {
  flex: 0 0 auto;
  gap: 4px;
}
.leg-branch:empty {
  display: none;
}
.leg-body .orbit-readout {
  flex: 1 1 auto;
  padding-top: 1px; /* 「軌道の取り方」の文字と高さを揃える */
}
/* 「軌道の取り方」は左寄せのまま、読み取りは右寄せにして左右で分ける */
.leg-body .swingby-readout--inline {
  justify-content: flex-end;
}
#leg_revs .mode-btn:disabled {
  color: var(--gray-400);
  background: var(--surface-muted);
  border-color: var(--border);
  cursor: default;
}

/* ==================================================================
   キーボード操作の一覧 (js/ui/shortcuts.js)
   ==================================================================
   確認ダイアログと同じ「画面を覆って出るもの」だが、読むための画面なので
   幅を広く取り、キーと説明を左右に並べる。 */
.ks-overlay {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim);
}
.ks-window {
  width: min(560px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ks-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.ks-title {
  font-size: 14px;
  font-weight: 700;
}
.ks-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.ks-close:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.ks-body {
  padding: 6px 14px 12px;
  overflow-y: auto;
}
.ks-group {
  padding: 10px 0 2px;
}
.ks-group + .ks-group {
  border-top: 1px solid var(--border);
}
.ks-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding-bottom: 4px;
}
/* キーは幅を決め打ちにして、説明の頭を縦に揃える (一覧として読めるように) */
.ks-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
}
.ks-keys {
  flex: 0 0 190px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 4px;
}
/* 「Ctrl+Shift+Z」のようなひとまとまりは、途中で折り返さない */
.ks-combo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.ks-desc {
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 1.45;
}
.ks-keys kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--text);
}
.ks-plus,
.ks-or {
  font-size: 10px;
  color: var(--text-muted);
}
.ks-or {
  padding: 0 2px;
}
.ks-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* 狭い画面ではキーと説明を上下に積む (168pxを取ると説明が潰れる) */
@media (max-width: 480px) {
  .ks-row {
    flex-direction: column;
    gap: 2px;
  }
  .ks-keys {
    flex: 0 0 auto;
  }
}

/* ==================================================================
   例を読み込む (js/ui/examples.js)
   ==================================================================
   キーボード操作の一覧と同じ「読むための画面」。こちらは1行ずつが押せる
   ボタンなので、名前と説明を縦に積んで当たりを大きく取る。 */
.ex-overlay {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim);
}
.ex-window {
  width: min(520px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ex-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.ex-title {
  font-size: 14px;
  font-weight: 700;
}
.ex-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.ex-close:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.ex-body {
  padding: 6px 12px 12px;
  overflow-y: auto;
}
.ex-group {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding: 12px 2px 4px;
}
.ex-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.ex-item {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.ex-item:hover {
  background: var(--surface-muted);
  border-color: var(--border);
}
.ex-item--busy {
  opacity: 0.5;
  cursor: default;
}
.ex-name {
  font-size: 13px;
  font-weight: 600;
}
.ex-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  padding-top: 2px;
}
/* 解説へは別のページに飛ぶので、読み込む枠とは離して置く */
.ex-doc {
  flex: 0 0 auto;
  align-self: center;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.ex-doc:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.ex-note {
  padding: 16px 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.ex-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ==================================================================
   フィードバックを送る (js/ui/feedback.js)
   ==================================================================
   書いてもらう画面なので、文字を打つ欄をいちばん大きく取る。 */
.fb-overlay {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim);
}
.fb-window {
  width: min(520px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.fb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.fb-title {
  font-size: 14px;
  font-weight: 700;
}
.fb-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.fb-close:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.fb-body {
  padding: 12px 14px;
  overflow-y: auto;
}
.fb-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 4px;
}
.fb-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
.fb-text:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.fb-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 2px 0;
  font-size: 12.5px;
  cursor: pointer;
}
.fb-details {
  padding: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.fb-details > summary {
  cursor: pointer;
  padding: 2px 0;
}
/* 送る中身は、そのままの形で見せる (書き換えずに渡すことが分かるように) */
.fb-preview {
  margin: 6px 0 0;
  padding: 8px 10px;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  font-size: 11px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text-muted);
}
.fb-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 0 0;
}
.fb-btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.fb-btn:hover {
  background: var(--surface-muted);
}
.fb-btn--primary {
  border-color: transparent;
  background: var(--accent);
  color: #ffffff;
}
.fb-btn--primary:hover {
  filter: brightness(0.94);
}
.fb-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ==================================================================
   表示設定 (js/ui/settings.js)
   ================================================================== */
.st-overlay {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim);
}
.st-window {
  width: min(460px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.st-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.st-title {
  font-size: 14px;
  font-weight: 700;
}
.st-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.st-close:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.st-body {
  padding: 14px;
  overflow-y: auto;
}
.st-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 8px;
}

.st-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.st-choice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.st-choice:hover {
  border-color: var(--gray-300);
}
.st-choice--on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.st-choice-name {
  font-size: 13px;
  font-weight: 700;
}
.st-choice--on .st-choice-name {
  color: var(--accent-text);
}
.st-choice-desc {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* 配色の見本。中身は「上に濃い帯、下に文字が2行」という画面の縮図。
   選んでいないほうも見えないと選べないので、色は変数を使わず直に書く */
.st-swatch {
  position: relative;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.st-swatch-bar {
  height: 11px;
}
.st-swatch-line {
  height: 4px;
  margin: 7px 8px 0;
  border-radius: 2px;
}
.st-swatch-line--short {
  margin-right: 22px;
}
.st-swatch--light {
  background: #f3f4f6;
}
.st-swatch--light .st-swatch-bar {
  background: #17181a;
}
.st-swatch--light .st-swatch-line {
  background: #c8cbd2;
}
.st-swatch--dark {
  background: #131417;
}
.st-swatch--dark .st-swatch-bar {
  background: #0c0d0f;
}
.st-swatch--dark .st-swatch-line {
  background: #4a5058;
}
/* 「自動」は、左半分が明るく右半分が暗い。斜めに切って両方を見せる */
.st-swatch--auto {
  background: linear-gradient(105deg, #f3f4f6 0 50%, #131417 50% 100%);
}
.st-swatch--auto .st-swatch-bar {
  background: linear-gradient(105deg, #17181a 0 50%, #0c0d0f 50% 100%);
}
.st-swatch--auto .st-swatch-line {
  background: linear-gradient(105deg, #c8cbd2 0 50%, #4a5058 50% 100%);
}

.st-note {
  padding: 12px 2px 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-muted);
}
.st-foot {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-muted);
}