/*
 * トランペット運指表(/tools/trumpet-fingering)専用スタイル。APP-032。
 * 一覧表(初期表示)と1音表示の2画面。
 *
 * 共通の意匠(配色・プレート・丸ボタン・カバー背景・書体・緑の大ボタン)は
 * css/web/tools-app-skin.css が持つ。このファイルは #tfRoot の中だけを定義し、
 * 共通クラス(.eat-*)の上書きはしない。
 *
 * 色は直値で持たず --eat-* から引く。こうするとライト/ダークの切り替えと、
 * テーマカラーを設定しているユーザーの色(JS の applyAccentVars)にそのまま乗る。
 * 五線譜(SVG)の線と音符もクラス経由で同じ変数を引く。
 *
 * バルブ図は「塗り/白抜き」に加えて必ず数字を出す(色だけで区別しない)。
 *
 * ほかの Web ツールの EMMUS 旧スキン(tools.css の .emmu-tool / et- 系)は使わない。
 */

/* 黒背景でも小さい補助文字を読めるようにする(音感テストと同じ扱い) */
[data-theme="dark"] .tools-trumpet-fingering-page {
    --eat-text2: #D0C8BA;
    --eat-text3: #B8B0A1;
    --eat-text-faint: #A9A193;
}

#tfRoot .eat-plate {
    margin-top: 13px;
}

/* ─── ヘッダー ─── */

#tfRoot .tf-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 4px;
}

#tfRoot .tf-back-ic {
    width: 13px;
    height: 13px;
    fill: var(--eat-text2);
}

#tfRoot .tf-head-name {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 9px;
}

#tfRoot .tf-brand {
    font-size: 9.5px;
    letter-spacing: 2.28px;
    color: var(--eat-bronze);
}

#tfRoot .tf-title {
    margin: 0;
    font-size: 16px;
    letter-spacing: 1.28px;
    color: var(--eat-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── 共通の部品 ─── */

#tfRoot .tf-label {
    font-size: 8.5px;
    letter-spacing: 1.7px;
    color: var(--eat-text3);
}

#tfRoot .tf-plate-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

#tfRoot .tf-cap {
    font-size: 9.5px;
    color: var(--eat-text3);
}

#tfRoot .tf-cap--center {
    text-align: center;
}

#tfRoot .tf-cap--foot {
    align-self: flex-end;
    padding-bottom: 8px;
}

#tfRoot .tf-chip {
    padding: 7px 12px;
    border: none;
    border-radius: 10px;
    font-size: 11px;
    font-family: inherit;
    color: var(--eat-sound-rest-text);
    background: var(--eat-rest-grad);
    box-shadow: var(--eat-rest-shadow-3);
}

#tfRoot .tf-chip--static {
    cursor: default;
}

/* 再生の三角(平ボタンの中は文字色、緑の大ボタンの中は操作色の上の文字色) */
#tfRoot .tf-tri {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--eat-sound-rest-text);
}

#tfRoot .tf-tri--lg {
    border-width: 7.4px 0 7.4px 12px;
    border-color: transparent transparent transparent var(--eat-on-acc);
}

/* ─── 表示のしかた(一覧表 / 1音表示) ───
   画面いちばん上の主役の切り替えなので、プレートに載せず大きく置く */

#tfRoot .tf-view {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    padding: 5px;
    border-radius: 17px;
    background: var(--eat-groove);
    box-shadow: inset 0 1px 2px var(--eat-groove-shadow);
}

#tfRoot .tf-view-btn {
    flex: 1;
    min-width: 0;
    padding: 13px 0;
    border: none;
    border-radius: 13px;
    background: transparent;
    font-size: 14px;
    letter-spacing: 0.6px;
    font-family: inherit;
    color: var(--eat-text3);
    cursor: pointer;
    transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}

#tfRoot .tf-view-btn.is-on {
    font-weight: 500;
    color: var(--eat-on-acc);
    background: linear-gradient(180deg, var(--eat-acc-lit), var(--eat-acc) 58%, var(--eat-acc-dim));
    box-shadow: 0 3px 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#tfRoot .tf-view-btn.is-on:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ─── 記音 / 実音 ─── */

#tfRoot .tf-display-plate {
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#tfRoot .tf-display-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#tfRoot .tf-mode-desc {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--eat-text);
}

#tfRoot .tf-mode-sub {
    font-size: 10px;
    line-height: 1.6;
    color: var(--eat-text2);
}

#tfRoot .tf-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--eat-groove);
    box-shadow: inset 0 1px 2px var(--eat-groove-shadow);
}

#tfRoot .tf-seg--sm {
    flex: none;
}

#tfRoot .tf-seg-btn {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-size: 11.5px;
    font-family: inherit;
    color: var(--eat-text2);
    cursor: pointer;
}

#tfRoot .tf-seg-btn.is-on {
    font-weight: 500;
    color: var(--eat-text);
    background: var(--eat-mold-top);
    border-bottom: 2px solid var(--eat-acc);
    box-shadow: 0 1px 2px var(--eat-plate-shadow-faint);
}

/* ─── バルブ図 ───
   押すバルブを塗り、押さないバルブを白抜きにする。
   数字は塗りの有無と関係なく必ず入れる(色だけで区別しない)。 */

#tfRoot .tf-valves {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#tfRoot .tf-valve {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "IBM Plex Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-style: normal;
    line-height: 1;
    color: var(--eat-text3);
    background: var(--eat-mold-top);
    border: 1px solid var(--eat-rule);
    box-shadow: inset 0 1px 0 var(--eat-plate-top);
}

#tfRoot .tf-valve.is-on {
    font-weight: 500;
    color: var(--eat-on-acc);
    border-color: transparent;
    background: linear-gradient(180deg, var(--eat-acc-lit), var(--eat-acc) 58%, var(--eat-acc-dim));
    box-shadow: 0 2px 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

#tfRoot .tf-valves--sm {
    gap: 3px;
}

#tfRoot .tf-valves--sm .tf-valve {
    width: 15px;
    height: 15px;
    font-size: 8px;
}

#tfRoot .tf-valves--sm .tf-valve.is-on {
    box-shadow: 0 1px 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

#tfRoot .tf-valves--lg {
    gap: 12px;
}

#tfRoot .tf-valves--lg .tf-valve {
    width: 52px;
    height: 52px;
    font-size: 19px;
}

#tfRoot .tf-valves--lg .tf-valve.is-on {
    box-shadow: 0 4px 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}


/* 4バルブ楽器は丸が1つ増えるので、その1本ぶんだけ詰める(行の幅は変えない) */
#tfRoot .tf-valves--four {
    gap: 4px;
}

#tfRoot .tf-valves--four .tf-valve {
    width: 19px;
    height: 19px;
    font-size: 9.5px;
}

#tfRoot .tf-valves--four.tf-valves--sm {
    gap: 2px;
}

#tfRoot .tf-valves--four.tf-valves--sm .tf-valve {
    width: 13px;
    height: 13px;
    font-size: 7px;
}

#tfRoot .tf-valves--four.tf-valves--lg {
    gap: 9px;
}

#tfRoot .tf-valves--four.tf-valves--lg .tf-valve {
    width: 46px;
    height: 46px;
    font-size: 17px;
}
/* ─── 五線譜(SVG。JS が組む) ─── */

#tfRoot .tf-ln,
#tfRoot .tf-led {
    stroke: var(--eat-text3);
    stroke-width: 1.1;
    fill: none;
}

#tfRoot .tf-head {
    stroke: var(--eat-text);
    stroke-width: 1.7;
    fill: none;
}

#tfRoot .tf-sharp-v {
    stroke: var(--eat-text);
    stroke-width: 1.1;
}

#tfRoot .tf-sharp-h {
    stroke: var(--eat-text);
    stroke-width: 2.1;
}

#tfRoot .tf-clef {
    fill: var(--eat-text);
}

/* ─── 一覧表 ─── */

#tfRoot .tf-list-plate {
    padding: 14px 15px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#tfRoot .tf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px;
    border-top: 1px solid var(--eat-hair);
}

#tfRoot .tf-row:first-child {
    border-top: none;
}

/* オクターブの変わり目は少し濃い線で区切る */
#tfRoot .tf-row.is-octave {
    border-top-color: var(--eat-rule);
}

#tfRoot .tf-row-note {
    flex: none;
    width: 56px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#tfRoot .tf-row-name {
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: 0.5px;
    color: var(--eat-text);
}

#tfRoot .tf-row-kana {
    font-size: 9.5px;
    line-height: 1.2;
    color: var(--eat-text2);
}

/* 代替が2つある音(C♯5)は狭い画面で図が2段になる。折り返しても縦位置を揃える */
#tfRoot .tf-row-alt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

#tfRoot .tf-alt-cap {
    font-size: 9px;
    color: var(--eat-text3);
}

#tfRoot .tf-play {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--eat-rest-grad);
    box-shadow: var(--eat-rest-shadow-3);
    transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}

#tfRoot .tf-play .tf-tri {
    margin-left: 2px;
}

#tfRoot .tf-play:active {
    transform: translateY(3px);
    box-shadow: none;
}


/* ─── 一覧表の画像書き出し ───
   ボタンは一覧表プレートの下。書き出した画像はその下のプレートに出し、
   保存(ダウンロード)と長押し保存の両方ができるようにする。 */

#tfRoot .tf-shot-actions {
    display: flex;
    gap: 10px;
    margin-top: 13px;
}

#tfRoot .tf-shot-btn {
    flex: 1;
    min-width: 0;
    padding: 14px;
    font-size: 15px;
    letter-spacing: 1.6px;
}

#tfRoot .tf-shot-plate {
    padding: 14px 15px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* スマホは画像そのものへのリンク(タップで開く)。PC は href を入れないので普通の入れ物 */
#tfRoot .tf-shot-link {
    display: block;
    line-height: 0;
    border-radius: 10px;
}

#tfRoot .tf-shot-link[href] {
    cursor: zoom-in;
}
#tfRoot .tf-shot-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--eat-plate-edge);
    background: var(--eat-plate-solid);
}

#tfRoot .tf-shot-foot {
    display: flex;
    align-items: center;
    gap: 12px;
}

#tfRoot .tf-shot-save {
    flex: 1;
    min-width: 0;
    padding: 13px;
    font-size: 15px;
    letter-spacing: 1.6px;
}

#tfRoot .tf-shot-close {
    flex: none;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 11.5px;
    color: var(--eat-text2);
    cursor: pointer;
}

#tfRoot .tf-shot-msg {
    margin: 10px 2px 0;
    font-size: 10.5px;
    line-height: 1.7;
    color: var(--eat-text2);
}
/* ─── 1音表示: 五線譜から選ぶ ───
   1音ぶんが1つのボタン。五線の線をボタンの端から端まで引いてあるので、
   隣どうしがつながって1本の五線に見える(すき間・枠を入れないこと) */

#tfRoot .tf-pick-plate {
    padding: 14px 4px 12px 15px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

#tfRoot .tf-pick-plate .tf-plate-head {
    padding-right: 15px;
}

#tfRoot .tf-strip {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#tfRoot .tf-strip-clef {
    position: sticky;
    left: 0;
    z-index: 1;
    flex: none;
    /* 貼り付いたまま残るので、スクロールしてくる音符が透けないよう地を敷く */
    background: var(--eat-plate-solid);
}

#tfRoot .tf-strip-clef svg {
    display: block;
}

#tfRoot .tf-note {
    flex: none;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: inherit;
    cursor: pointer;
}

#tfRoot .tf-note-staff {
    display: block;
}

#tfRoot .tf-note-name {
    font-size: 10.5px;
    letter-spacing: 0.3px;
    color: var(--eat-text2);
}

#tfRoot .tf-note-kana {
    font-size: 9px;
    color: var(--eat-text3);
}

/* 選択中。音符とラベルを操作色にし、うしろに帯を敷く */
#tfRoot .tf-note.is-on .tf-head {
    fill: var(--eat-acc);
    stroke: var(--eat-acc);
}

#tfRoot .tf-note.is-on .tf-sharp-v,
#tfRoot .tf-note.is-on .tf-sharp-h {
    stroke: var(--eat-acc);
}

#tfRoot .tf-note.is-on .tf-note-name {
    font-weight: 500;
    color: var(--eat-text);
}

#tfRoot .tf-note.is-on .tf-note-kana {
    color: var(--eat-text2);
}

#tfRoot .tf-note.is-on .tf-note-staff {
    border-radius: 9px;
    background: var(--eat-groove);
}


/* ─── 楽器(オプション) ───
   選んだ楽器を1行で見せ、押すと一覧が開く。楽器で変わるのは実音と
   第4バルブの有無だけなので、選択肢に「3バルブ/4バルブ」を添える */

#tfRoot .tf-inst-plate {
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

#tfRoot .tf-inst-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 13px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    cursor: pointer;
    color: var(--eat-sound-rest-text);
    background: var(--eat-rest-grad);
    box-shadow: var(--eat-rest-shadow-3);
}

#tfRoot .tf-inst-current:active {
    box-shadow: none;
    transform: translateY(3px);
}

#tfRoot .tf-inst-name {
    min-width: 0;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-align: left;
}

#tfRoot .tf-inst-caret {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--eat-text3);
    border-bottom: 2px solid var(--eat-text3);
    transform: rotate(45deg) translate(-2px, -2px);
}

#tfRoot .tf-inst-current[aria-expanded="true"] .tf-inst-caret {
    transform: rotate(225deg) translate(-2px, -2px);
}

/* プルダウンの中身(デザイン案 24a のリスト)。
   3バルブ/4バルブの2組に分け、行は「バルブ本数のバッジ → 楽器名と補助表示 →
   移調の半音数」。選んでいる行だけ地を敷いて操作色の枠を回す。 */

#tfRoot .tf-inst-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 8px 6px 10px;
    border-radius: 12px;
    background: var(--eat-groove);
    box-shadow: inset 0 1px 2px var(--eat-groove-shadow);
}

#tfRoot .tf-inst-group-label {
    padding: 2px 6px 0;
    font-size: 8.5px;
    letter-spacing: 1.7px;
    color: var(--eat-bronze);
}

#tfRoot .tf-inst-group {
    display: flex;
    flex-direction: column;
    padding: 4px;
    border-radius: 13px;
    border: 1px solid var(--eat-plate-edge);
    background: var(--eat-plate-solid);
    box-shadow: 0 1px 2px var(--eat-plate-shadow-faint);
}

#tfRoot .tf-inst-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

#tfRoot .tf-inst-item.is-on {
    background: var(--eat-mold-top);
    box-shadow: inset 0 0 0 1px var(--eat-acc);
}

/* 左のバルブ本数。選んでいる行だけ操作色にする */
#tfRoot .tf-inst-item-badge {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 13px;
    line-height: 1;
    color: var(--eat-bronze);
    background: var(--eat-groove);
    box-shadow: inset 0 1px 2px var(--eat-groove-shadow);
}

#tfRoot .tf-inst-item.is-on .tf-inst-item-badge {
    color: var(--eat-on-acc);
    background: linear-gradient(180deg, var(--eat-acc-lit), var(--eat-acc) 58%, var(--eat-acc-dim));
    box-shadow: 0 3px 0 var(--eat-acc-side), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#tfRoot .tf-inst-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#tfRoot .tf-inst-item-name {
    font-size: 12.5px;
    color: var(--eat-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tfRoot .tf-inst-item.is-on .tf-inst-item-name {
    font-weight: 500;
}

/* 補助表示(基準・記音＝実音・B♭管と同じ など) */
#tfRoot .tf-inst-item-sub {
    font-size: 9.5px;
    color: var(--eat-text2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 実音が記音から何半音ずれるか。ずれない C 管だけ弱い色にする */
#tfRoot .tf-inst-item-tr {
    flex: none;
    font-size: 10px;
    color: var(--eat-bronze);
}

#tfRoot .tf-inst-item-tr.is-zero {
    color: var(--eat-text3);
}

/* ─── 再生と音量 ───
   つまみはメトロノーム・音感テストと同じ VolumeKnob(canvas を JS が描く) */

#tfRoot .tf-play-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

#tfRoot .tf-play-row .tf-cta {
    flex: 1;
    min-width: 0;
}

#tfRoot .tf-volume {
    flex: none;
    width: 66px;
    touch-action: none;
}

#tfRoot .tf-volume-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

#tfRoot .tf-volume-label {
    font-size: 9px;
    color: var(--eat-text2);
}

#tfRoot .tf-volume-val {
    font-size: 9.5px;
    color: var(--eat-text2);
}

#tfRoot .tf-knob {
    margin-top: 5px;
    width: 66px;
    height: 66px;
}
/* ─── 1音表示: 選んだ音 ─── */

#tfRoot .tf-one-plate {
    padding: 18px 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}

#tfRoot .tf-one-kind {
    font-size: 8.5px;
    letter-spacing: 1.7px;
    color: var(--eat-text3);
}

#tfRoot .tf-one-staff svg {
    display: block;
}

#tfRoot .tf-one-name {
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: 1px;
    color: var(--eat-text);
}

#tfRoot .tf-one-other {
    font-size: 11.5px;
    color: var(--eat-text2);
}

#tfRoot .tf-one-valves {
    margin-top: 4px;
}

#tfRoot .tf-one-code {
    font-size: 12px;
    letter-spacing: 1.2px;
    color: var(--eat-text2);
}

#tfRoot .tf-cta {
    margin-top: 6px;
    gap: 12px;
}

/* ─── 代替運指 ─── */

#tfRoot .tf-alt-plate {
    padding: 14px 15px 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

#tfRoot .tf-alts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#tfRoot .tf-alt-item {
    display: flex;
    align-items: center;
    gap: 11px;
}

#tfRoot .tf-alt-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#tfRoot .tf-alt-code {
    font-size: 11.5px;
    letter-spacing: 1.1px;
    color: var(--eat-text);
}

#tfRoot .tf-alt-note {
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--eat-text2);
}

/* ─── 注意書き ─── */

#tfRoot .tf-note-plate {
    padding: 14px 15px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#tfRoot .tf-notes {
    margin: 0;
    padding-left: 17px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 10.5px;
    line-height: 1.7;
    color: var(--eat-text2);
}

#tfRoot .tf-legend {
    padding-left: 0;
    list-style: none;
}

#tfRoot .tf-legend-item {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* ─── 狭い画面 ─── */

@media (max-width: 380px) {
    #tfRoot .tf-row {
        gap: 8px;
    }

    #tfRoot .tf-row-note {
        width: 50px;
    }

    #tfRoot .tf-row-name {
        font-size: 16px;
    }

    #tfRoot .tf-valves {
        gap: 4px;
    }

    #tfRoot .tf-valve {
        width: 20px;
        height: 20px;
    }

    #tfRoot .tf-valves--lg .tf-valve {
        width: 46px;
        height: 46px;
        font-size: 17px;
    }
}