/* 上のボタンの段（色のめがね Web・色のシミュレータ Web 共通。並べ方は ui-web/js/toolbar_fit.js が決める）。
   部品の大きさは全部 --u（縮尺。1 = ボタン 52×39、最小 40/52 = アプリと同じ 40×30）に比例する（絵・間隔・札・虫めがねも同じ割合）。スライダーの棒だけは長さ（--slider-bar。最小 90・最大 240）で決まる。 */
:root { --u: 1; }
.toolbar { --cluster-gap: calc(26px * var(--u)); --slider-bar: 90px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--cluster-gap); row-gap: calc(6px * var(--u)); }
.buttons { display: contents; }   /* ボタンの組（.cluster・.seg）は、そのまま段の中の「割らないかたまり」になる。スライダーは .sliders 全体で 1 つ */
.sliders { display: flex; flex: none; align-items: center; gap: var(--cluster-gap); padding-top: 11px; }   /* 上の 11px は、棒の上の数字（x100%）が上の行のボタンに重ならない高さ */
.cluster { display: flex; flex: none; gap: calc(6px * var(--u)); }
.group { display: flex; align-items: center; gap: calc(6px * var(--u)); }

/* 板（アプリのボタンと同じ: 灰の地・角丸・影。押した物は選択の青）。当たりの範囲は、縮めても 44px 角を保つ（::after） */
.plate, .pbtn, .btn-name, .seg-btn { position: relative; }
.plate::after, .pbtn::after, .btn-name::after, .seg-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.plate {
  width: calc(52px * var(--u)); height: calc(39px * var(--u)); padding: 0; border: 1px solid rgba(0,0,0,.35); border-radius: calc(7px * var(--u));
  background: var(--ui-bar-gray); box-shadow: 0 1px 2px rgba(0,0,0,.35); cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.plate img { width: calc(48px * var(--u)); height: calc(36px * var(--u)); display: block; pointer-events: none; }
.plate[aria-pressed="true"] { background: linear-gradient(var(--ui-selection-blue-light), var(--ui-selection-blue)); }
.plate:disabled, .plate.disabled { opacity: var(--ui-disabled-alpha); cursor: default; }
#btnSettings.plate img { width: calc(24px * var(--u)); height: calc(24px * var(--u)); }   /* 歯車の絵は枠いっぱいなので、他の絵と同じ見た目の大きさに */
/* 絵だけのボタン（色のめがね Web。絵が板を含む） */
.pbtn, .btn-name { width: calc(52px * var(--u)); height: calc(39px * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pbtn img, .btn-name img { width: 100%; height: 100%; display: block; pointer-events: none; }
.pbtn:disabled, .btn-name:disabled { opacity: var(--ui-disabled-alpha); cursor: default; }
.pbtn:focus-visible, .plate:focus-visible, .btn-name:focus-visible { outline: 3px solid #f5c518; outline-offset: 2px; }

/* 型の 4 連 */
.seg { flex: none; gap: 0; border: 1px solid var(--ui-segment-border); border-radius: calc(7px * var(--u)); box-shadow: 0 1px 2px rgba(0,0,0,.35); display: flex; }
.seg-btn {
  flex: none; width: calc(56px * var(--u)); height: calc(38px * var(--u)); border: 0; border-left: 1px solid var(--ui-segment-border); cursor: pointer; font-weight: bold; font-size: calc(18px * var(--u));
  color: var(--ui-segment-text-off); background: linear-gradient(var(--ui-segment-off-top), var(--ui-segment-off-bottom));
  touch-action: manipulation; user-select: none; -webkit-user-select: none; padding: 0;
}
.seg-btn:first-child { border-left: 0; border-radius: calc(6px * var(--u)) 0 0 calc(6px * var(--u)); } .seg-btn:last-child { border-radius: 0 calc(6px * var(--u)) calc(6px * var(--u)) 0; }
.seg-btn[aria-pressed="true"] { color: #fff; background: linear-gradient(var(--ui-selection-blue-light), var(--ui-selection-blue)); }

/* スライダー（棒の長さは --slider-bar 1 つ。2 本は同じ長さ） */
.slider { --slider-gap: calc(4px * var(--u)); display: grid; grid-template-columns: auto var(--slider-bar) auto; column-gap: var(--slider-gap); row-gap: 0; align-items: center; flex: none; }
.slider .s-left { grid-column: 1; grid-row: 2; } .slider .lens { display: block; } .slider input[type="range"] { grid-column: 2; grid-row: 2; } .slider .s-right { grid-column: 3; grid-row: 2; }
.slider output { grid-column: 2; grid-row: 1; }   /* 数字は棒の上の中央 */
.slider label { font-size: 13px; white-space: nowrap; }
.slider output { height: 5px; line-height: 5px; transform: translateY(-1px); font-size: 11px; text-align: center; font-weight: bold; color: var(--ui-selection-blue); }
.slider input[type="range"] { width: 100%; min-width: 0; accent-color: var(--ui-selection-blue); margin: 0; }
.slider input[type="range"]:disabled { opacity: var(--ui-disabled-alpha); }
.lens { height: auto; } img[src$="btn_zoomSmall.svg"] { width: calc(13px * var(--u)); } img[src$="btn_zoomLarge.svg"] { width: calc(19.5px * var(--u)); }   /* 虫めがねは絵の余白を切ってあり、他の絵と同じ縮尺（0.9px／単位） */
/* 色差モードの両端の札（アプリの DiffEndPill: 2:1 の丸い札。左半分が模擬の前、右半分が模擬の後の色。数字は白の太字に影） */
.diffpill, .endpill { flex: none; width: calc(34px * var(--u)); height: calc(17px * var(--u)); margin: calc(5px * var(--u)) 1px; border-radius: calc(9px * var(--u)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: max(9px, calc(10px * var(--u))); line-height: 1; text-shadow: 1px 1px 1.5px #000; }
.cluster[data-empty] { display: none; }   /* 中身がみな隠れているかたまりは段から外す（toolbar_fit.js が付ける） */
/* スライダーが自分の行になる時（toolbar_fit.js が .sep を付ける）: ボタンは幅 --btn-w の箱の中で折り返し（行の幅がそろう）、スライダーは下の行 */
.toolbar.sep { flex-direction: column; flex-wrap: nowrap; row-gap: calc(6px * var(--u)); }
.toolbar.sep .buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--cluster-gap); row-gap: calc(6px * var(--u)); width: var(--btn-w); max-width: 100%; }