/* ============================================================
   settings.css — 設定画面専用（#backupTab）
   スコープ: 設定カードの並び替え（.set-dragging）、設定の上のタブ（.set-tabs / .st-hide）
   動き: js/settings-order.js / js/settings-tabs.js / js/settings-fold.js（base.css の後に読み込む）
   ============================================================ */
/* ===== 設定の並び替え（ドラッグ&ドロップ）。動きは js/settings-order.js ===== */
/* v151: ☰ボタン廃止。∨以外のカード上をドラッグ */
#backupTab .card[data-set]{
  cursor:grab;
  -webkit-user-select:none;user-select:none;
  touch-action:pan-y;   /* 縦スクロールは許可しつつ、ドラッグ開始はJSで判定 */
}
#backupTab .card[data-set] button,
#backupTab .card[data-set] input,
#backupTab .card[data-set] textarea,
#backupTab .card[data-set] select,
#backupTab .card[data-set] a,
#backupTab .card[data-set] .set-fold{
  cursor:pointer;
  -webkit-user-select:auto;user-select:auto;
}
.set-dragging{
  position:relative;
  z-index:50;
  opacity:.94;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  transition:none;
  cursor:grabbing;
}

/* ===== 設定の上のタブ（基本／掲示板／データ）。動きは js/settings-tabs.js ===== */
.set-tabs{margin-bottom:12px}
#backupTab>.card.st-hide{display:none}

/* ===== 設定カードの折りたたみ（v150）。動きは js/settings-fold.js ===== */
/* 見出しを横並びにして、右に「∨／∧」を置く */
#backupTab .card[data-set]>.card-title{display:flex;align-items:center;gap:8px;min-height:36px;flex-wrap:wrap}
#backupTab .card[data-set]>.card-title .ttl{flex:none;white-space:nowrap}
.set-fold{
  flex:none;margin:0 0 0 auto;
  width:52px;height:36px;padding:0;
  border:1px solid var(--input-border);border-radius:18px;
  background:var(--pill-bg);background-image:var(--face);
  color:var(--sub);box-shadow:var(--elev-1);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.set-fold:active{box-shadow:var(--press)}
.set-fold svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.set-fold.is-open svg{transform:rotate(180deg)}   /* 開いているとき「∧」、閉じているとき「∨」 */
/* 閉じているときは、見出しだけ残す */
#backupTab .card.set-folded>:not(.card-title){display:none!important}
#backupTab .card.set-folded>.card-title{margin-bottom:0}