:root {
  color-scheme: dark;
  --bg: #111418;
  --fg: #e6e6e6;
  --muted: #8a8f98;
  --accent: #7fbfff;
  --button-bg: #2a2f36;
  --button-bg-hover: #353b44;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  height: 100%;
  /* タップ時の半透明ハイライト・ダブルタップズーム・長押しメニューを抑止。
     ピンチでの拡大は許容（アクセシビリティのため鍵盤外は残す）。 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* 文字選択を許可するのは発音表示と設定パネルの値表示のみ。
   ボタン類・鍵盤・タイトル等はタッチで誤選択されないよう抑止する。 */
button, h2, .keyboard-wrap, .settings-close, .key {
  user-select: none;
  -webkit-user-select: none;
}

main {
  max-width: 1300px;
  margin: 0 auto;
  padding: 16px 20px;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== 上部バー =====
   ロゴ(左)・音程表示(中央)・操作アイコン(右)。高さ固定の帯として全モード共通で表示し
   (コード弾き系モードでも隠さない)、鍵盤/パッドの操作面には一切重ねない。 */

.topbar {
  width: 100%;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

/* 左側: ロゴ＋Stop。演奏全体を止める操作は録音/設定とは別の関心事なので、
   ロゴ側にまとめて右側の録音/設定グループから独立させる。 */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 44px;
  width: auto;
  display: block;
}

/* Stop は録音系の丸アイコンと形自体を変え（角のある枠線ボタン）、混同を防ぐ。 */
.stop-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--fg);
  border: 1px solid #5a5f68;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}

.stop-btn:hover { background: var(--button-bg); }
.stop-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.topbar-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-divider {
  width: 1px;
  height: 20px;
  background: #3a3f48;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--button-bg);
  color: var(--fg);
  border: 1px solid #3a3f48;
  font-size: 0.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.icon-btn:hover { background: var(--button-bg-hover); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 録音ボタン: 常に赤い縁取り（カメラアプリの録画ボタンと同じ慣習）にして、
   押すと即録音開始、もう一度押すと停止。Stop とは色・形の両方で区別する。 */
.rec-btn {
  background: transparent;
  border: 2px solid #d9534f;
  color: #d9534f;
}
.rec-btn:hover { background: rgba(217, 83, 79, 0.15); }

.rec-btn .icon-rec-stop { display: none; }
.rec-btn.recording .icon-rec-dot { display: none; }
.rec-btn.recording .icon-rec-stop { display: block; }

.rec-btn.recording {
  background: #d9534f;
  border-color: #d9534f;
  color: #fff;
}
.rec-btn.recording:hover { background: #c94742; }

.display {
  grid-column: 2;
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ===== 協和音らしさグラフ (R-17) =====
   単音+パッドモードでピッチパッドに重ねて表示する。タッチ判定は持たず
   (pointer-events: none)、パッド自体がタッチ判定を持つ。 */
.consonance-graph {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.consonance-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ===== 設定パネル（スライドイン） =====
   #settings-panel（設定）と #takes-panel（録音テイク）が同じスタイルを共有する。
   排他開閉（片方を開くと他方を閉じる）は ui.js 側で制御。 */

.settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 90vw;
  background: #1a1d22;
  border-left: 1px solid #2a2f36;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
  padding: 24px;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 10;
}

.settings-panel.open {
  transform: translateX(0);
}

.settings-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2a2f36;
  padding-bottom: 12px;
}

.settings-panel-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.settings-close {
  background: transparent;
  color: var(--muted);
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  font-family: inherit;
}

.settings-close:hover { color: var(--fg); }

.settings-panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setting-row {
  display: grid;
  grid-template-columns: 80px 1fr 70px;
  align-items: center;
  gap: 8px 12px;
  font-size: 0.9rem;
  color: var(--fg);
}

.setting-row .setting-unit {
  grid-column: 2 / 4;
  text-align: right;
  font-size: 0.8rem;
}

.setting-label {
  color: var(--muted);
}

.setting-range {
  width: 100%;
}

.setting-number {
  width: 80px;
  background: var(--button-bg);
  color: var(--fg);
  border: 1px solid #444;
  border-radius: 3px;
  padding: 4px 8px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.setting-number:focus { outline: 1px solid var(--accent); }

.setting-radio-group {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setting-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--fg);
}

.setting-radio input[type="radio"] {
  margin: 0;
  accent-color: var(--accent);
}

.setting-unit {
  color: var(--muted);
  white-space: nowrap;
}

.support-link {
  align-self: center;
  margin-top: 8px;
  background: var(--button-bg);
  color: var(--fg);
  border-radius: 4px;
  padding: 8px 24px;
  font-size: 0.9rem;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
}

.support-link:hover { background: var(--button-bg-hover); }
.support-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== 演奏エリア =====
   鍵盤+パッド (通常時) / コード弾き+パッド (コード弾きモード) の切替コンテナ。
   通常時は縦積み (鍵盤の下にパッド)、コード弾きモード時は横並び (左=コード弾き、
   右=パッド) にする (R-19)。 */

.perform-area {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

main.chord-active .perform-area {
  flex-direction: row;
  align-items: stretch;
  gap: 32px;
}

/* ===== 同時発音数バー (R-26) =====
   鍵盤モード専用。1〜6 のボタンをラジオ的に切り替えて最大同時発音数を選ぶ。 */

.voice-count-bar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* display: flex が UA の [hidden] { display: none } に勝ってしまうため明示する */
.voice-count-bar[hidden] { display: none; }

.voice-count-btn {
  width: 34px;
  height: 28px;
  border-radius: 4px;
  background: var(--button-bg);
  color: var(--fg);
  border: 1px solid #3a3f48;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

.voice-count-btn:hover { background: var(--button-bg-hover); }
.voice-count-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.voice-count-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #111418;
}

/* ===== 鍵盤ビジュアル ===== */

.keyboard-wrap {
  width: 100%;
  flex: 0 0 auto;
}

/* display: flex が UA の [hidden] { display: none } に勝ってしまうため明示する
   (コード弾きモード時に hidden 属性で隠す。R-19) */
.keyboard-wrap[hidden] { display: none; }

/* ===== ピッチパッド =====
   通常時: 鍵盤の直下に配置。横幅は鍵盤と同じ、高さは perform-area の残りを全使用 (flex:1)。
   コード弾きモード時: コード弾き領域(左半分)の右に並び、横幅の残りを使用 (flex:1)。
   最小高さを下回ったら非表示にはせず、main の min-height: 100vh によって body 側に
   スクロールバーが出る。
   背景は canvas で 2D グラデーション (通常時: 横=色相/縦=明度、回転時: 縦=色相/横=明度)。 */

.pitch-pad {
  position: relative;
  flex: 1;
  min-height: 40px;
  min-width: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}

.pitch-pad.disabled {
  display: none;
}

/* absolute で通常フローから外す。canvas は幅/高さ属性を持つ置換要素なので、
   フローに残したままだと canvas の実ピクセルサイズが親の auto height 計算に
   混入し、ResizeObserver → paint() → canvas.height 拡大 → 親がさらに拡大…という
   無限フィードバックループを起こす (コード弾きモードの横並びレイアウトで顕在化)。 */
.pitch-pad-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.piano {
  --white-h: 160px;
  --black-h: 100px;
  --black-w: calc((100% / 12) * 0.6);
  --black-half: calc(var(--black-w) / 2);
  position: relative;
  width: 100%;
  height: var(--white-h);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;   /* スクロール／ピンチに横取りされず、すべて pointermove に流す */
}

.piano-whites {
  display: flex;
  width: 100%;
  height: 100%;
}

.piano-blacks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--black-h);
  pointer-events: none;   /* 黒鍵の隙間（透明部分）は下の白鍵に通す */
}

.key {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  transition: background-color 0.05s linear;
}

/* 鍵の地色とハイライト色は keyboard-view.js が --key-base / --key-active を
   各 .key に書き込む。色相は 1 オクターブで一周（A4 = 0°）。
   active は同色相のまま明度のみ持ち上げる。 */

.key.white {
  flex: 1 1 0;
  background: var(--key-base, #f4f1ea);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0 0 4px 4px;
  margin-right: -1px;   /* 隣接する白鍵の枠線を重ねる */
}
.key.white:last-child { margin-right: 0; }

.key.black {
  position: absolute;
  top: 0;
  width: var(--black-w);
  height: var(--black-h);
  background: var(--key-base, #1a1d22);
  color: #eee;
  border: 1px solid #000;
  border-radius: 0 0 3px 3px;
  z-index: 2;
  pointer-events: auto;   /* 親の .piano-blacks は none だが黒鍵自身はイベントを拾う */
}

.key .key-name {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 4px;
}

.key .key-label {
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.7;
}
.key.black .key-label { opacity: 0.6; }

.key.white.active {
  background: var(--key-active, var(--accent));
  color: #0a0d12;
}
.key.black.active {
  background: var(--key-active, #4a8ed4);
  color: #fff;
}

/* ===== 鍵盤ロールモード (R-25) =====
   A0〜C8 の 88 鍵ストリップを白鍵 12 個分のビューポートで切り取り、
   直前にタッチした鍵盤が中心に来るよう transform でスクロールする。
   鍵そのもの (.key ほか) は既存鍵盤のスタイルをそのまま使う。 */

.keyboard-roll {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.keyboard-roll[hidden] { display: none; }

.roll-toolbar {
  display: flex;
  justify-content: flex-end;
}

/* 設定パネルの .setting-radio を流用しつつ、横並びに上書きする */
.roll-voice-toggle {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
}

.roll-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

/* ストリップ: .piano を全 88 鍵ぶんの幅に広げ、translateX でスクロールする。
   --white-count / --visible-whites は keyboard-roll-view.js が書き込む。
   黒鍵幅の基準も 12 → 白鍵総数に置き換える。 */
.roll-strip {
  width: calc(100% * var(--white-count) / var(--visible-whites));
  --black-w: calc((100% / var(--white-count)) * 0.6);
  transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.35, 1);
  will-change: transform;
}

/* ===== コード弾きモード (R-19) =====
   コードタイプの箱を縦一列、ルート音ボタン (A4〜E6, 20音) をその右に縦一列。
   画面の左半分に配置し、右半分は #pitch-pad (回転パッド)。
   ルートボタンを箱にドラッグしている間だけ発音。箱内の X 位置で音量
   (左端=最大、右端=最小)。発音中コードのテキスト表示はしない
   (要素の高さが変わるとドラッグ中に箱の位置がずれるため、全要素高さ固定)。 */

.chord-mode {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 56px;
  align-items: flex-start;
  justify-content: center;
  /* パッド側へ持って行っても無意味であることを示す薄い境界線 (ドラッグ中の
     クランプは chord-mode-view.js の onPointerMove がこの右端を基準に行う) */
  border-right: 1px solid #2a2f36;
  padding-right: 16px;
  user-select: none;
  -webkit-user-select: none;
}

.chord-mode[hidden] { display: none; }

.chord-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 220px;
}

.chord-box {
  border: 1px solid #3a3f48;
  background: #1a1f26;
  border-radius: 8px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 1.05rem;
  transition: background 0.1s, border-color 0.1s, box-shadow 0.1s;
}

.chord-box .chord-box-sub {
  font-size: 0.7rem;
  color: var(--muted);
}

.chord-box.hover {
  border-color: var(--accent);
  background: #1e2a38;
  box-shadow: 0 0 12px rgba(127, 191, 255, 0.25);
}
.chord-box.hover .chord-box-sub { color: var(--accent); }

/* ルート音ボタンの寸法。黒鍵の絶対配置 (top) を chord-root-drag.js が
   この変数から計算するため、寸法を変えるときはここだけ直せばよい。 */
:root {
  --chord-root-size: 56px;        /* 白鍵ボタンの直径 */
  --chord-root-black-size: 48px;  /* 黒鍵ボタンの直径 */
  --chord-root-gap: 10px;         /* 白鍵ボタン同士の縦の隙間 */
}

.chord-roots {
  position: relative;      /* 黒鍵ボタンの絶対配置基準 */
  display: flex;
  flex-direction: column;
  gap: var(--chord-root-gap);
  align-items: flex-start;
  width: 94px;             /* 白鍵 56px + 黒鍵のはみ出し分 */
}

.chord-root {
  width: var(--chord-root-size);
  height: var(--chord-root-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #10130f;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: grab;
  touch-action: none;   /* スクロール等に横取りされず pointerdown 即ドラッグ開始 */
}

/* 黒鍵ルート: 白鍵列の右に、隣り合う白鍵の間へ挟まるよう絶対配置
   (top は chord-root-drag.js が --chord-root-* 変数から計算して指定する) */
.chord-root.black {
  position: absolute;
  left: 46px;
  width: var(--chord-root-black-size);
  height: var(--chord-root-black-size);
  font-size: 0.9rem;
  color: #eee;
  z-index: 1;
}

.chord-root.ghost { opacity: 0.25; }

.chord-root-clone {
  position: fixed;
  margin: 0;
  z-index: 10;
  cursor: grabbing;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* スナップバック時間は chord-root-drag.js が SNAPBACK_MS から
   --snapback-duration をインラインで設定する (値源は JS 側のみ) */
.chord-root-clone.snapback {
  transition: left var(--snapback-duration) ease, top var(--snapback-duration) ease;
}

/* ===== コードα モード =====
   コードタイプ (9種) を「構成音が1音だけ違う」関係で線を結んだグラフとして配置。
   パッドは表示しない (コード弾きモードと違い、ルート音がグラフを取り囲む円弧に
   なっているため不要)。そのぶん画面幅いっぱいに中央寄せで表示する。
   ルート音ボタンはグラフのノード上またはノード間の線上に置くと発音する
   (当たり判定・モーフィングは chord-alpha-view.js)。 */

.chord-alpha {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 32px;
  user-select: none;
  -webkit-user-select: none;
}

.chord-alpha[hidden] { display: none; }

/* グラフとルート円弧を重ねて中央寄せする器。真円ではなく縦長の楕円で良いので、
   ring 自体を正方形 (aspect-ratio:1) ではなく縦長 (3:4) にする。左右対称の
   percent 座標で位置指定しているだけなので、ring が正方形でなくなれば
   ルート円弧 (chord-root-drag.js の buildArcRootButtons) も自動的に
   楕円になる（コード側の計算は変更不要）。ルート円弧 (radiusPct=44%) が
   この中に収まるよう、グラフ自体はこれより一回り小さいサイズ
   (下記 .chord-alpha-graph) にする。 */
.chord-alpha-ring {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
}

/* aspect-ratio は chord-alpha-view.js が VB_W/VB_H からインラインで設定する。
   viewBox と一致させないと SVG (preserveAspectRatio: xMidYMid meet により
   等比縮小・レターボックス) と、% 指定で絶対配置しているノード div
   (コンテナの実サイズに対する割合。レターボックスを考慮しない) の座標系が
   ズレて、線とノードの位置が合わなくなるため、値源を JS 側に一本化している。
   幅70%: ルート円弧 (radiusPct=44%、ボタン半径ぶん内側) とぶつからない範囲で
   できるだけ大きく。 */
.chord-alpha-graph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}

/* ルート音ボタンの円弧を重ねるオーバーレイ。ボタン自体は
   chord-root-drag.js の buildArcRootButtons が個別に絶対配置する。 */
.chord-roots-arc {
  position: absolute;
  inset: 0;
}

.chord-alpha-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chord-alpha-edges line {
  stroke: #3a3f48;
  stroke-width: 2;
}

/* ルート音ボタン (.chord-root, 56px の円) と同じくらいの大きさの円にする。
   ノードを小さく保つことで、辺 (エッジ) がその分長く伸び、線上でモーフィング
   させる操作がしやすくなる。 */
.chord-alpha-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid #3a3f48;
  background: #1a1f26;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  transition: background 0.1s, border-color 0.1s, box-shadow 0.1s;
}

.chord-alpha-node .chord-alpha-node-name {
  font-size: 0.65rem;
}

.chord-alpha-node .chord-alpha-node-sub {
  display: block;
  font-size: 0.48rem;
  color: var(--muted);
}

.chord-alpha-node.hover {
  border-color: var(--accent);
  background: #1e2a38;
  box-shadow: 0 0 12px rgba(127, 191, 255, 0.25);
}
.chord-alpha-node.hover .chord-alpha-node-sub { color: var(--accent); }

/* ===== 録音テイクパネル (R-9) =====
   保存済みテイクの一覧。録音の開始/停止は上部バーのボタンが担うため、ここは
   一覧の閲覧・読み込みに専念する。IndexedDB に保存され、リロード後も残る。
   1テイク = 1カードとして縦に情報を積み、狭いパネル幅でも要素が潰れないようにする。 */

.takes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.takes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.import-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--muted);
  border: 1px solid #3a3f48;
  border-radius: 4px;
  padding: 7px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.import-toggle:hover { color: var(--fg); background: var(--button-bg); }
.import-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.takes-hint {
  color: var(--muted);
  font-size: 0.8rem;
}

.takes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.take-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #1a1d22;
  border: 1px solid #2a2f36;
  border-radius: 8px;
  padding: 10px 12px;
}

/* 日時・録音時間の静的表示。ボタン (再生・重ね録り・保存・削除) とは行を分ける。
   日時は控えめ、録音時間は主情報として濃く見せて濃淡をつける。 */
.take-label {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.take-label-date {
  color: var(--muted);
}

.take-label-duration {
  color: var(--fg);
  font-weight: 600;
}

.take-label-kind {
  color: var(--muted);
}

/* audio 要素自体は画面に出さない。再生は take-play ボタンが player.play()/pause() を
   呼ぶだけで駆動し、ネイティブの再生バーは表示しない。 */
.take-player {
  display: none;
}

.take-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  row-gap: 6px;
}

/* 再生・重ね録り・保存・削除は同じ大きさのアイコンボタンに揃える。 */
.take-icon-btn {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  border: 1px solid #3a3f48;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.take-icon-btn:hover { color: var(--fg); background: var(--button-bg); }

.take-play .icon-pause { display: none; }
.take-play.playing .icon-play { display: none; }
.take-play.playing .icon-pause { display: block; }

/* 重ね録り系ボタン（重ね録り／ループ+重ね録り／ループ+重ね録り+puntoneのみ）は
   下地アイコン（再生の三角 or repeat）＋右上のオレンジのドット数（1/1/2個）で区別する。
   文字ラベルを足すとボタン列が圧迫されるため、色分けの代わりに aria-label で説明する。
   録音中を示す上部バーの赤（rec-toggle-mini）とは意味が違うため、あえて別色にしている。 */
.take-loop.active { color: var(--fg); background: var(--button-bg); border-color: var(--fg); }

.take-badge-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e67e22;
}

.take-badge-dot-2 { right: 8px; }

/* ===== デュアルパッドモード (R-22) =====
   モック: docs/experiments/dual-pad-mode-mockup.html
   左パッド: 横軸=ルート音 (A3〜E5)、縦軸=-5(b5,+6半音)/5(完全5度,+7半音)/
   aug(増5度,+8半音) を全域で連続線形補間する。バーの中心にちょうど乗ったときだけ
   整数半音に一致する。
   右パッド: 無彩色バーの市松模様。縦軸=sus4/Major/minor/sus2 (+5〜+2半音)、
   横軸=Six/7th/Δ7th/Oct (+9〜+12半音)。左のルート音に2音を重ねる。 */

.dual-pad-mode {
  --bar-thickness: 44px;  /* バーの太さ。左右の半円タブもこの寸法の正円に揃える */
  --bump-height: 20px;    /* 上部ラベル行の高さ（左右共通。パッド上端が揃う）*/
  --box-bg: #1a1f26;
  --box-border: #3a3f48;
  /* バー1枚ぶんの明るさ（左右共通の無彩色。右パッドでは交差部が2枚重なって濃くなる） */
  --rp-bar-tint: rgba(255, 255, 255, 0.10);

  /* 高さ: デフォルトは画面の残り全部 (flex:1)。下端のハンドルをドラッグすると
     JS が inline の height + flex:0 0 auto を設定して縮められる（ダブルクリックで
     全高に戻す）。最大は perform-area の高さ = 画面の残りまで。 */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 左右パッドを横に並べる行（高さ可変部） */
.dual-pad-row {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 16px;
}

/* 高さ変更用のドラッグハンドル。パッド直下の帯全体が当たり判定で、
   中央にグリップの棒を出す。ホバーで帯全体をうっすら光らせて操作可能なことを示す。 */
.dual-pad-resize-handle {
  flex: 0 0 auto;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  touch-action: none;
  border-radius: 4px;
}

.dual-pad-resize-handle:hover,
.dual-pad-resize-handle.dragging {
  background: rgba(255, 255, 255, 0.06);
}

.dual-pad-resize-handle::before {
  content: '';
  width: 72px;
  height: 5px;
  border-radius: 3px;
  background: var(--box-border);
}

.dual-pad-resize-handle:hover::before,
.dual-pad-resize-handle.dragging::before { background: var(--muted); }

.dual-pad-mode[hidden] { display: none; }

.dual-pad-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pad-outer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ルート音ラベル行。左に bar-caps と同じ幅のスペーサーを入れて pad-wrap と x 軸を揃える。 */
.root-bumps-row {
  flex: 0 0 auto;
  height: var(--bump-height);
  display: flex;
}

.bar-caps-spacer {
  flex: 0 0 auto;
  width: var(--bar-thickness);
}

.root-bumps {
  flex: 1;
  min-width: 0;
  display: flex;
}

/* パッド上端の外側にぴったり貼り付く半円タブ。右パッドと同じ無彩色系にし、
   白鍵/黒鍵の別だけ明度差で示す。 */
.root-bump {
  flex: 1 0 auto;
  height: 100%;
  border-right: 1px solid var(--bg);
  border-radius: 999px 999px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: var(--fg);
  overflow: hidden;
}
.root-bump.white { background: #3a4150; }
.root-bump.black { background: #22262e; }
.root-bump:last-child { border-right: none; }

.pad-row {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* -5/5/aug の半円タブ。pad-wrap と同じ行で stretch させ、高さを一致させる。 */
.bar-caps {
  flex: 0 0 auto;
  width: var(--bar-thickness);
  position: relative;
}

.bar-caps-field {
  position: absolute;
  inset: calc(var(--bar-thickness) / 2) 0;
}

/* パッド左端の外側にぴったり貼り付く半円タブ（バーの太さの正円）。
   bar 本体と同じ縦位置 (0/50/100%) に合わせる。 */
.bar-cap {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--bar-thickness);
  transform: translateY(-50%);
  border-radius: 999px 0 0 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bar-cap {
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-right: none; /* パッド側に接する辺は継ぎ目を作らない */
}
.bar-cap.minus5 { top: 0%; }
.bar-cap.five   { top: 50%; }
.bar-cap.aug    { top: 100%; }
.bar-cap .name { font-size: 0.75rem; font-weight: 600; color: var(--fg); }

.pad-wrap {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  position: relative;
  overflow: hidden;
  background: var(--box-bg);
  /* 上端・左端は半円タブが直接くっつくので枠線を引かず、継ぎ目を作らない */
  border-right: 1px solid var(--box-border);
  border-bottom: 1px solid var(--box-border);
  touch-action: none;
}

/* バーが上端/下端ぴったりだと半分切れて見えるため、上下に半バー分の余白を持たせた
   「有効エリア」を用意する。-5/5/aug の 0%/50%/100% はすべてこの基準。 */
.pad-field {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--bar-thickness) / 2);
  bottom: calc(var(--bar-thickness) / 2);
}

/* 横軸の鍵盤風グリッド（白黒同幅の短冊）。右パッドに合わせた無彩色で、
   白鍵/黒鍵の別だけ明度差で示す。 */
.key-grid {
  position: absolute;
  inset: 0;
  display: flex;
}

.key-col {
  flex: 1 0 auto;
  height: 100%;
  border-right: 1px solid rgba(0, 0, 0, 0.35);
}
.key-col.white { background: rgba(255, 255, 255, 0.06); }
.key-col.black { background: rgba(0, 0, 0, 0.12); }
.key-col:last-child { border-right: none; }
.key-col.hover { background: rgba(255, 255, 255, 0.22); }

/* -5 / 5 / aug の横断バー。太さのみでバーの存在を示す（縁のグロー等は無し）。
   バーの上でもルート音の区切りが分かるよう、key-grid と同じ列数の縦線を重ねる
   (--key-count は JS が pad-field に設定、子の .bar へ継承される)。 */
.bar {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--bar-thickness);
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% / var(--key-count) - 1px),
    rgba(0, 0, 0, 0.35) calc(100% / var(--key-count) - 1px),
    rgba(0, 0, 0, 0.35) calc(100% / var(--key-count))
  );
}
.bar.minus5 { top: 0%;   background-color: rgba(255, 255, 255, 0.14); }
.bar.five   { top: 50%;  background-color: rgba(255, 255, 255, 0.14); }
.bar.aug    { top: 100%; background-color: rgba(255, 255, 255, 0.14); }

/* ── 右パッド: 無彩色バーの市松模様 ──
   列タブ (Six/7th/Δ7th/Oct) は上、行タブ (sus4/Major/minor/sus2) は右に置く。
   バー間の隙間が約50pxになる固定幅（モックで確認した比率）。 */
.dual-pad-right {
  flex: 0 0 auto;
  width: 370px;
  display: flex;
  flex-direction: column;
}

/* 列タブ行。右端に行タブ列ぶんのスペーサーを置いて rp-pad-wrap と x 軸を揃える。
   高さは左パッドのルート音タブ行と同じ → パッド上端が揃う。 */
.rp-col-bumps-row {
  flex: 0 0 auto;
  height: var(--bump-height);
  display: flex;
}

.rp-col-bumps {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* 列バーの実位置 (0/33.3/66.7/100%) と x 座標がぴったり揃うよう、
   rp-field-h と同じ左右余白を持たせる。 */
.rp-col-bumps-field {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--bar-thickness) / 2);
  right: calc(var(--bar-thickness) / 2);
}

.rp-col-bump {
  position: absolute;
  top: 0;
  width: var(--bar-thickness);
  height: 100%;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
}

.rp-caps-spacer {
  flex: 0 0 auto;
  width: var(--bar-thickness);
}

.rp-row {
  flex: 1;
  min-height: 0;
  display: flex;
}

.rp-pad-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  /* 上端は列タブ、右端は行タブが直接くっつくので枠線を引かない */
  border-left: 1px solid var(--box-border);
  border-bottom: 1px solid var(--box-border);
  overflow: hidden;
  background: var(--box-bg);
  touch-action: none;
}

/* 4段の端バーが半分切れないよう、軸方向だけ半バー分の余白を持たせる。
   行用と列用で別フィールドにし、交差方向はパッド全面に伸ばす
   （共有すると交差方向の端に背景色の隙間ができる）。 */
.rp-field-v {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--bar-thickness) / 2);
  bottom: calc(var(--bar-thickness) / 2);
}

.rp-field-h {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--bar-thickness) / 2);
  right: calc(var(--bar-thickness) / 2);
}

/* 行バー・列バーとも同じ半透明の白。単独では薄く、交差した升目だけ
   2枚重なって濃くなり、色を使わずに市松模様になる。位置は JS が設定。 */
.rp-row-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--bar-thickness);
  transform: translateY(-50%);
  background: var(--rp-bar-tint);
}

.rp-col-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--bar-thickness);
  transform: translateX(-50%);
  background: var(--rp-bar-tint);
}

/* 行タブ列（パッドの右側、右へ丸く膨らむ半円） */
.rp-row-caps {
  position: relative;
  flex: 0 0 auto;
  width: var(--bar-thickness);
}

.rp-row-caps-field {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--bar-thickness) / 2);
  bottom: calc(var(--bar-thickness) / 2);
}

.rp-row-cap {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--bar-thickness);
  transform: translateY(-50%);
  border-radius: 0 999px 999px 0;
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-left: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--fg);
  text-align: center;
  line-height: 1.1;
  overflow: hidden;
}

/* ── デュアルパッド改 (R-23) ──
   モック: docs/experiments/dual-pad-scale-mockup.html
   左パッドのルート音階を A3〜G#4 の12音に縮め、敷き詰めの短冊ではなく
   「隙間を開けたバー並び」にする。配色は R-22 と同じ無彩色。 */

.dual-pad-scale {
  --lp-bar-thickness: 28px; /* ルート音バーの太さ。半円タブも同じ幅 */
}

/* ルート音タブ: バー中心の真上に absolute 配置（lp-field と同じ左右余白で x を揃える） */
.dual-pad-scale .root-bumps { position: relative; }

.root-bumps-field {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--lp-bar-thickness) / 2);
  right: calc(var(--lp-bar-thickness) / 2);
}

.dual-pad-scale .root-bump {
  position: absolute;
  top: 0;
  flex: none;
  width: min(var(--lp-bar-thickness), calc(100% / var(--lp-bar-count, 12)));
  height: 100%;
  transform: translateX(-50%);
  border-right: none;
  overflow: hidden;
}

/* ルート音バー用フィールド: 左右に半バー分の余白。バー中心 (i/11) はここ基準 */
.lp-field {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--lp-bar-thickness) / 2);
  right: calc(var(--lp-bar-thickness) / 2);
}

/* ルート音の縦バー。白鍵=背景より明るい / 黒鍵=背景より暗い（明度差のみ。隙間=素の背景色）。
   狭い画面ではバー中心の間隔 (100%/(N-1)) より細く縮めて、隣と重ならないようにする
   (--lp-bar-count は JS が設定。JS 側は offsetWidth を読むので判定も自動で追従する)。 */
.lp-note-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(var(--lp-bar-thickness), calc(100% / var(--lp-bar-count, 12)));
  transform: translateX(-50%);
}
.lp-note-bar.white { background: rgba(255, 255, 255, 0.10); }
.lp-note-bar.black { background: rgba(0, 0, 0, 0.18); }
.lp-note-bar.hover { background: rgba(255, 255, 255, 0.22); }

/* 隙間あきバーでは -5/5/aug バーとの交差自体が区切りになるため、
   R-22 の鍵盤区切り縦線パターンは引かない */
.dual-pad-scale .bar { background-image: none; }