/* guitar-fx.css : online guitar amp, guitar effects, bass amp. Theme colours from the site variables only. */
#guitar-fx .gfx-top .gfx-start { flex: 2 1 190px; }
#guitar-fx .gfx-top .gfx-demo { flex: 1 1 150px; white-space: nowrap; }
#guitar-fx .gfx-privacy { margin: 10px 0; }
#guitar-fx .gfx-gate { margin: 0 0 12px; border-color: var(--warn); }
#guitar-fx .gfx-gate p { margin: 0 0 8px; }
#guitar-fx [data-in-notice] { margin: 0 0 12px; }
#guitar-fx .gfx-io { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#guitar-fx .gfx-meterbox { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 6px; background: var(--card); min-width: 0; }
#guitar-fx .gfx-meter { position: relative; height: 10px; border-radius: 5px; background: var(--strong); overflow: hidden; margin: 4px 0 6px; }
#guitar-fx .gfx-meter i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--ok); }
#guitar-fx .gfx-meter i.hot { background: var(--bad); }
#guitar-fx .gfx-slider { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--body); }
#guitar-fx .gfx-slider output { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 4px; }
#guitar-fx input[type="range"] { width: 100%; min-height: 32px; margin: 0; }
#guitar-fx .gfx-devrow { margin-top: 10px; }
#guitar-fx .gfx-dev { flex: 1 1 220px; min-width: 0; }
#guitar-fx .gfx-dev select { flex: 1; min-width: 0; max-width: 100%; min-height: 44px; }
#guitar-fx .gfx-ch select { min-height: 44px; }
#guitar-fx .gfx-lat { margin: 6px 0 12px; }
#guitar-fx .gfx-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
#guitar-fx .gfx-card { border: 1px solid var(--line-strong); border-radius: 16px; padding: 10px 12px 12px; background: var(--card); min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#guitar-fx .gfx-card.big { grid-column: 1 / -1; order: -1; }
#guitar-fx .gfx-card.on, #guitar-fx .gfx-card.fixed { border-color: var(--ink); }
#guitar-fx .gfx-card:not(.on):not(.fixed) .gfx-ctrls { opacity: .62; }
#guitar-fx .gfx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#guitar-fx .gfx-name { font-weight: 600; color: var(--ink); font-size: 15px; }
#guitar-fx .gfx-sw { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 72px; padding: 6px 12px; border-radius: 9999px;
  border: 1px solid var(--line-strong); background: var(--strong); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; }
#guitar-fx .gfx-sw[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
#guitar-fx .gfx-led { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); flex: none; }
#guitar-fx .gfx-sw[aria-pressed="true"] .gfx-led { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
#guitar-fx .gfx-ctrls { display: grid; grid-template-columns: 1fr; gap: 4px; }
#guitar-fx .gfx-card.big .gfx-ctrls { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); column-gap: 16px; }
#guitar-fx .gfx-card.big .gfx-choice { grid-column: 1 / -1; }
#guitar-fx .gfx-knob { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; font-size: 13px; }
#guitar-fx .gfx-knob label { color: var(--body); }
#guitar-fx .gfx-knob output { color: var(--ink); font-variant-numeric: tabular-nums; }
#guitar-fx .gfx-knob input { grid-column: 1 / -1; }
#guitar-fx .gfx-choice .chip { min-height: 40px; }
#guitar-fx .gfx-move { display: flex; gap: 6px; margin-top: auto; }
#guitar-fx .gfx-move .chip { min-height: 40px; min-width: 52px; justify-content: center; font-size: 16px; }
#guitar-fx .gfx-move .chip[disabled] { opacity: .35; cursor: default; }
#guitar-fx .gfx-oct-note { margin: 0; }
#guitar-fx .gfx-presets { margin-top: 14px; }
#guitar-fx .gfx-psel { flex: 1 1 220px; min-width: 0; }
#guitar-fx .gfx-psel select { flex: 1; min-width: 0; min-height: 44px; }
#guitar-fx [data-preset-name] { flex: 1 1 180px; min-width: 0; min-height: 44px; }
#guitar-fx .gfx-presets .chip, #guitar-fx .gfx-share .chip { min-height: 44px; }
#guitar-fx .gfx-share { margin-top: 12px; }
#guitar-fx .gfx-keys { margin: 10px 0 0; }
@media (max-width: 640px) {
  #guitar-fx .gfx-io { gap: 8px; }
  #guitar-fx .gfx-meterbox { padding: 6px 10px 4px; }
  #guitar-fx .gfx-board { grid-template-columns: 1fr 1fr; gap: 8px; }
  #guitar-fx .gfx-card { padding: 8px 10px 10px; }
  #guitar-fx .gfx-sw { min-width: 60px; padding: 6px 10px; }
  #guitar-fx .gfx-name { font-size: 14px; }
}
@media (max-width: 400px) {
  #guitar-fx .gfx-head { flex-wrap: wrap; }
}
@media (hover: none) { #guitar-fx .gfx-keys { display: none; } }