/* SPDX-License-Identifier: GPL-3.0-only */
@font-face { font-family: Barlow; src: url('BarlowSemiCondensed-Medium.ttf') format('truetype'); font-display: swap; font-weight: 500; }
@font-face { font-family: Barlow; src: url('BarlowSemiCondensed-SemiBold.ttf') format('truetype'); font-display: swap; font-weight: 600; }

:root {
  color-scheme: dark;
  --page: #0e0e0f;
  --seam: #131314;          /* the dark lines between panels */
  --bar: #1c1c1d;           /* top bar */
  --panel: #2a2a2c;
  --inset: #151516;
  --control: #353537;
  --control-hi: #3c3c3f;
  --control-edge: #4b4b4f;
  --control-on: #5b5b60;
  --text: #e6e6e8;
  --label: #b9b9bd;
  --muted: #86868b;
  --accent: #f08a2b;
  --accent-hi: #ffa24a;
  --accent-ink: #261404;
  --radius: 5px;
  --knob: 44px;
  --btn-h: 40px;
  --bar-h: 36px;
  --keys-h: 112px;
  font: 500 14px Barlow, "Arial Narrow", Arial, sans-serif;
  background: var(--page);
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--page); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, .knob:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { cursor: wait; opacity: .6; }
[hidden] { display: none !important; }

.app-shell {
  margin: auto; width: min(1180px, 100%); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; background: var(--seam);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------------------------------------------------------------- bar: brand, Hold, Menu (over KNOB1–4 in landscape, across the top in portrait) */
.bar {
  grid-area: bar;
  --tool-h: calc((var(--bar-h) - 10px) * 1.3);          /* Hold and Menu: 1.3 times the old buttons */
  display: flex; align-items: center; gap: 8px; height: calc(var(--tool-h) + 10px); padding: 0 8px; background: var(--bar);
}
.brand { margin-right: auto; font-size: 17px; font-weight: 600; letter-spacing: .5px; color: var(--text); white-space: nowrap; }
.brand span {
  margin-left: 6px; padding: 1px 5px; border-radius: 3px; font-size: 11px; letter-spacing: 1px;
  vertical-align: 2px; color: var(--accent); border: 1px solid #5a3a1c;
}
.tool {
  flex: none; height: var(--tool-h); min-width: 57px; padding: 0 14px; border-radius: 5px;
  border: 1px solid var(--control-edge); background: var(--control); color: var(--text); font-size: 18px; letter-spacing: .2px;
  box-shadow: inset 0 1px 0 #ffffff0f;
}
.tool:active { background: var(--control-on); }
.tool[aria-pressed=true] { background: var(--control-on); border-color: #707075; }
#settings-open { position: relative; background: var(--accent); border-color: var(--accent-hi); color: var(--accent-ink); font-weight: 600; }
#settings-open.has-update::after { /* an update is waiting in Menu */
  content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--bar);
}

/* ---------------------------------------------------------------- device grid */
.device {
  position: relative; flex: 1; min-height: 0; display: grid; gap: 1px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "bar bar" "screen screen" "main panels" "keys keys";
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
}
.screen-panel { grid-area: screen; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 8px; background: var(--panel); }
.screen-bezel {
  position: relative; width: var(--screen-size, 240px); height: var(--screen-size, 240px); padding: 3px; border-radius: 6px;
  background: #060606; box-shadow: 0 0 0 1px #000, 0 1px 0 1px #ffffff12, inset 0 0 0 1px #ffffff08;
}
#screen { width: 100%; height: 100%; display: block; border-radius: 3px; background: #000; image-rendering: pixelated; }

.panels { /* as on the FM-1: the 2×2 encoders over OCT left of the screen, KNOB1–4 over the functions right of it */
  grid-area: panels; min-width: 0; min-height: 0; display: grid; gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1.4fr);
  grid-template-areas: "params" "functions";
}
.panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 6px 8px; background: var(--panel); }
.panel-params { grid-area: params; }
.panel-main { grid-area: main; gap: 6px; }
.panel-functions { grid-area: functions; }
.main-knobs { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(var(--knob), max-content)); column-gap: 8px; align-content: space-evenly; }

/* ---------------------------------------------------------------- knobs */
.knob-row { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
.knob {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  padding: 2px 0; border-radius: 6px; touch-action: none; cursor: ns-resize;
}
.knob-face {
  position: relative; width: var(--knob); height: var(--knob); border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #434346 0%, #222224 46%, #0f0f10 100%);
  box-shadow: 0 0 0 1px #070707, 0 3px 6px #000c, inset 0 1px 1px #ffffff1c;
}
.knob-face::after { /* the knurled cap */
  content: ""; position: absolute; inset: 16%; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2c2c2f, #151516 75%); box-shadow: 0 1px 2px #0008, inset 0 1px 0 #ffffff12;
}
.knob-indicator { position: absolute; inset: 0; z-index: 1; border-radius: 50%; }
.knob-indicator::before {
  content: ""; position: absolute; left: calc(50% - 1.5px); top: 7%; width: 3px; height: 30%; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 5px #f08a2b88;
}
.knob-master .knob-face::before { /* MASTER is the one absolute knob: show its level */
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from -135deg, var(--accent) 0 calc(var(--level, .68) * 270deg), #3d3d41 0 270deg, transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.knob-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; letter-spacing: .4px; color: var(--label); white-space: nowrap; }
.knob:active .knob-label { color: var(--accent); }

/* ---------------------------------------------------------------- hardware buttons */
.function-buttons {
  flex: 1; max-height: 150px; display: grid; gap: 5px;
  grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(var(--btn-h), 1fr));
}
.function-buttons { margin-block: auto; }
.octave { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; height: var(--btn-h); }
.control-button {
  position: relative; min-width: 0; padding: 0 2px; touch-action: none;
  border: 1px solid var(--control-edge); border-radius: var(--radius);
  background: linear-gradient(var(--control-hi), var(--control)); color: var(--text);
  box-shadow: 0 1px 2px #0009, inset 0 1px 0 #ffffff12;
  font-size: 13px; font-weight: 600; letter-spacing: .5px;
  transition: background-color .06s, color .06s;
}
.control-button[data-button=PLAY]::before, .control-button[data-button=REC]::before {
  content: ""; display: inline-block; margin-right: 5px; vertical-align: 0;
}
.control-button[data-button=PLAY]::before { border-left: 7px solid currentColor; border-block: 4.5px solid transparent; }
.control-button[data-button=REC]::before { width: 8px; height: 8px; border-radius: 50%; background: #e2553f; }
.control-button.held { background: var(--control-on); border-color: #75757a; box-shadow: inset 0 1px 3px #0008; }
.control-button.lit { background: var(--accent); border-color: var(--accent-hi); color: var(--accent-ink); box-shadow: 0 0 10px #f08a2b40, inset 0 1px 0 #ffffff40; }
.control-button.lit.held { background: var(--accent-hi); }
.control-button.dim { color: var(--accent); border-color: #6a4a2a; }   /* a firmware's glow LED */
.control-button.lit[data-button=REC]::before { background: var(--accent-ink); }
.control-button.latched::after {
  content: ""; position: absolute; inset: 2px; border-radius: 3px; border: 2px solid var(--accent); pointer-events: none;
}
.control-button.lit.latched::after { border-color: var(--accent-ink); }

/* ---------------------------------------------------------------- keys */
.keyboard {
  grid-area: keys; position: relative; height: var(--keys-h); display: grid; grid-template-columns: repeat(16, minmax(0, 1fr));
  padding: 3px 4px 4px; background: #0b0b0c; box-shadow: inset 0 3px 4px #000;
}
.key {
  position: relative; min-width: 0; touch-action: none; padding: 0 0 6px; margin: 0 .5px;
  border: 0; border-radius: 0 0 4px 4px;
  background: linear-gradient(#e3e3e3, #fafafa 12%, #f1f1f1 88%, #d8d8d8);
  box-shadow: inset 0 -3px 0 #c7c7c7, 0 1px 1px #000;
  color: #8f8f94; display: flex; align-items: end; justify-content: center; font-size: 11px; font-weight: 600;
}
.key.black {
  position: absolute; top: 3px; width: 4.1%; height: 60%; margin: 0; z-index: 2; padding: 0;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #050505, #2a2a2c 18%, #202022 82%, #050505);
  box-shadow: inset 0 -5px 0 #39393c, 0 3px 4px #000c;
}
.key.white.dim { background: linear-gradient(#ead6c0, #f6e6d4 12%, #f1dfca 88%, #dcc2a4); color: #8a6a4a; }   /* a glow LED: X0X's pattern steps, Felucca's backlight */
.key.black.dim { background: linear-gradient(90deg, #120c07, #4a3420 18%, #3f2c1a 82%, #120c07); box-shadow: inset 0 -5px 0 #5a3f26, 0 3px 4px #000c; }
.key.lit, .key.held { background: var(--accent); color: var(--accent-ink); }
.key.white.held { box-shadow: inset 0 -1px 0 #b8661d, inset 0 3px 6px #0004; }
.key.black.lit, .key.black.held { background: linear-gradient(90deg, #8b4a10, var(--accent) 18%, #e07c22 82%, #8b4a10); box-shadow: inset 0 -2px 0 #b8661d, 0 3px 4px #000c; }

/* ---------------------------------------------------------------- over the screen until the sound runs */
.screen-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 24px);
  padding: 10px 16px; border-radius: 8px; background: #1c1c1de8; border: 1px solid #3a3a3d;
  color: var(--text); font-size: 15px; line-height: 1.35; text-align: center; pointer-events: none;
}
.screen-hint.error { border-color: #a2412c; }

/* ---------------------------------------------------------------- settings */
dialog {
  width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 0 18px 18px;
  background: var(--panel); color: var(--text); border: 1px solid #3f3f43; border-radius: 10px; box-shadow: 0 20px 60px #000c;
}
dialog::backdrop { background: #050506c0; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog-header {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -18px; padding: 10px 12px 10px 18px; background: var(--bar); border-bottom: 1px solid var(--seam);
}
h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: .4px; }
h2 { margin: 20px 0 6px; font-size: 16px; font-weight: 600; }
p { line-height: 1.5; margin: 8px 0; color: #cfcfd3; }
.detail { color: var(--muted); }
dialog button, .slot label {
  background: var(--control); color: var(--text); border: 1px solid var(--control-edge); border-radius: 4px; padding: 7px 12px;
  box-shadow: inset 0 1px 0 #ffffff0f;
}
#settings-close { font-size: 22px; line-height: 1; padding: 3px 10px 5px; }
.quick { display: grid; gap: 8px; margin: 14px 0 4px; }
.setting { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px 8px 12px; border-radius: 6px; background: var(--inset); border: 1px solid #3f3f43; }
.setting-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 15px; }
.setting-text small { font-size: 12px; color: var(--muted); }
.setting.update { border-color: var(--accent); }
.display-led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #48484c; }
.app-shell.running ~ dialog .display-led { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
#audio-toggle { min-width: 84px; }
.switch { position: relative; flex: none; width: 50px; height: 28px; padding: 0 !important; border-radius: 14px !important; background: #3a3a3d !important; }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #d8d8dc; box-shadow: 0 1px 3px #000a; transition: transform .15s;
}
.switch[aria-pressed=true] { background: var(--accent) !important; border-color: var(--accent-hi) !important; }
.switch[aria-pressed=true]::after { transform: translateX(22px); background: #fff; }
#reset[data-armed] { background: #6b2a1d; border-color: #a2412c; }
.firmwares { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 12px 0; }
.firmware {
  display: grid; grid-template-columns:88px minmax(0,1fr); align-items:start; gap:3px 10px; text-align: left; padding: 10px 12px !important;
  background: var(--inset) !important; border-color: #3f3f43 !important; border-radius: 6px !important;
}
.firmware[aria-pressed=true] { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.firmware-shot { width:88px; height:88px; object-fit:contain; background:#111113; border-radius:4px; grid-column:1; grid-row:1/4; align-self:center; }
.firmware-name { grid-column:2; font-size: 16px; font-weight: 600; }
.firmware[aria-pressed=true] .firmware-name::after { content: " · running"; color: var(--accent); font-weight: 500; font-size: 13px; }
.firmware-about { grid-column:2; font-size: 13px; color: #cfcfd3; line-height: 1.35; }
.firmware-by { grid-column:2; font-size: 12px; color: var(--muted); }
.firmware-credit { font-size:12px; color:var(--muted); }
.slots { display: grid; gap: 8px; margin: 12px 0; }
.slot { border: 1px solid #3f3f43; border-radius: 6px; background: var(--inset); padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.slot.over { border-color: var(--accent); }
.slot .sname { flex: 1; min-width: 150px; color: var(--label); }
.slot input { display: none; }
.slot label { cursor: pointer; }
footer { color: var(--muted); font-size: 12px; margin-top: 20px; }
footer p { color: inherit; }
a { color: var(--accent-hi); }

/* ---------------------------------------------------------------- portrait sizes */
@media (orientation: portrait) {
  :root { --knob: clamp(34px, 10.5vw, 58px); --btn-h: clamp(32px, 5.2vh, 52px); --keys-h: clamp(88px, 14vh, 160px); }
  .app-shell { max-width: 640px; }
  .function-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(var(--btn-h), 1fr)); max-height: 200px; }
  .control-button { font-size: 12px; letter-spacing: .3px; }
}
@media (orientation: portrait) and (max-height: 700px) {
  :root { --knob: clamp(30px, 9vw, 40px); --btn-h: 32px; --keys-h: 84px; --bar-h: 34px; }
  .panel { padding: 5px 8px; }
  .knob { gap: 2px; }
  .knob-label { font-size: 10px; }
}
/* ---------------------------------------------------------------- landscape: screen beside the panels */
@media (orientation: landscape) {
  :root {
    --bar-h: clamp(30px, 8.5vh, 40px); --knob: clamp(28px, 10.5vh, 72px); --btn-h: clamp(26px, 8.6vh, 52px);
    --keys-h: clamp(100px, 33vh, 250px);   /* 1.5 times the old keys: easier to hit */
  }
  .device {
    grid-template-columns: auto var(--screen-col, 40%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "main screen bar" "main screen panels" "keys keys keys";
  }
  .screen-panel { padding: 4px; }
  .key.black { height: 50%; }
  .panel { padding: 4px 8px 6px; }
  .knob { gap: 3px; }
  .knob-label { font-size: clamp(9px, 2.8vh, 11px); letter-spacing: .2px; }
  .function-buttons { gap: clamp(3px, 1.2vh, 6px); }
  .control-button { font-size: clamp(11px, 3.4vh, 14px); }
}
@media (orientation: landscape) and (max-height: 420px) {
  .brand { font-size: 16px; }
  .tool { font-size: 17px; padding: 0 12px; }
}

.more-firmwares { margin-top: 12px; }
.more-firmwares summary { cursor: pointer; padding: 12px 14px; border: 1px solid #48484c; border-radius: 6px; font-weight: 600; }
.more-firmwares summary > span { float: right; font-size: 13px; font-weight: 400; color: var(--muted); }
.more-firmwares:not([open]) > :not(summary) { display: none; }