* { box-sizing: border-box; }

body {
  margin: 0;
  background: #111318;
  color: #d8dae0;
  font: 14px/1.4 system-ui, -apple-system, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- shared controls ------------------------------------------------------ */

select, input[type="number"], input[type="text"], button {
  background: #21252e;
  color: #d8dae0;
  border: 1px solid #363c48;
  border-radius: 5px;
  padding: 5px 8px;
  font: inherit;
}

button { cursor: pointer; }
button:hover { border-color: #f0913a; }
button.active { background: #f0913a; color: #14161a; border-color: #f0913a; font-weight: 600; }
button:disabled { opacity: 0.35; cursor: default; }
button:disabled:hover { border-color: #363c48; }

#output { max-width: 210px; }
input[type="number"] { width: 62px; }
input[type="range"] { accent-color: #f0913a; }

.field {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #9aa0ab;
}

.dim { color: #7d8590; }
.hidden { display: none !important; }
.push { margin-left: auto; }

.pagelink { color: #7d8590; text-decoration: none; }
.pagelink:hover { color: #f0913a; }

#status {
  font-size: 12px;
  color: #7d8590;
  min-height: 15px;
}
#status.error { color: #e46962; }

/* --- console + difflab pages: header, toolbar rows, hex log --------------- */

header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid #2a2e38;
  background: #171a20;
  flex: none;
}

h1 {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f0913a;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.toolbar + .toolbar { margin-top: 7px; }
header #status { margin-top: 6px; }

h1 .sub {
  color: #7d8590;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.backlink { color: #7d8590; margin-left: auto; text-decoration: none; }
.backlink:hover { color: #f0913a; }

#deviceInfo { font-size: 12px; }
#deviceInfo b { color: #d8dae0; }

#importBar, #writeBar, #copyBar {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid #2a2e38;
  background: #171a20;
  font-size: 12px;
}
#importBar .dim, #writeBar .dim, #copyBar .dim { color: #7d8590; }
#importBar button, #writeBar button, #copyBar button { padding: 2px 8px; font-size: 12px; }
#impPatternInfo, #wrInfo, #copySrcInfo, #copyInfo { color: #9aa0ab; }
#copyInfo.warn, #copyDstBox.warn { color: #e8b339; }
#copyDstBox { color: #d8dae0; }

/* The one thing the copy row can't show by itself: that Connect is the target
   picker, and how a track gets from one box to the other. */
.barhint {
  flex: none;
  padding: 5px 14px;
  border-bottom: 1px solid #2a2e38;
  background: #14161b;
  color: #7d8590;
  font-size: 11px;
  line-height: 1.5;
}
.barhint b { color: #d8dae0; font-weight: 600; }
.barhint em { color: #9aa0ab; font-style: italic; }
.barhint code { font-family: inherit; color: #9aa0ab; }

#consoleWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.logbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-bottom: 1px solid #2a2e38;
  background: #171a20;
  font-size: 12px;
}
.logbar .dim { color: #7d8590; margin-right: auto; }
.logbar button { padding: 2px 8px; font-size: 12px; }

#log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #14161a;
}

.msg { margin-bottom: 6px; white-space: pre-wrap; word-break: break-all; }
.msg .meta { color: #7d8590; }
.msg.out .meta b { color: #f0913a; }   /* sent */
.msg.in  .meta b { color: #6db2f0; }   /* received */
.msg.note { color: #9aa0ab; }
.msg.error { color: #e46962; }
.msg .hex { color: #b7bdc8; }

/* --- piano roll page: top bar (transport only) ---------------------------- */

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #171a20;
  border-bottom: 1px solid #2a2e38;
}

.logo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f0913a;
  white-space: nowrap;
}

.sep { width: 1px; height: 22px; background: #2a2e38; margin: 0 2px; flex: none; }

/* The status line shares the top bar; long messages truncate and keep the full
   text in the tooltip (main.js mirrors it into title). */
.topbar #status {
  flex: 1;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.syncwrap { position: relative; flex: none; }

#syncPop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  background: #1b1f27;
  border: 1px solid #2a2e38;
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
  min-width: 210px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}

/* --- workspace: rail + panel + grid --------------------------------------- */

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

.rail {
  flex: none;
  width: 62px;
  background: #171a20;
  border-right: 1px solid #2a2e38;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  gap: 2px;
}

.rail button {
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  color: #7d8590;
  padding: 9px 0 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  letter-spacing: .4px;
}
.rail button .ic { font-size: 17px; line-height: 1; }
/* the rail stacks, so pushing to the end means margin-top, not margin-left */
.rail .push { margin: auto 0 0; }
.rail button:hover { color: #d8dae0; background: #1d212a; }
.rail button.active {
  color: #f0913a;
  background: #1d212a;
  border-left-color: #f0913a;
  font-weight: 600;
}
/* A dot on the rail when something in that panel is armed or in play. */
.rail button.flag .ic::after {
  content: '';
  position: absolute;
  margin: -2px 0 0 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f0913a;
}
.rail button .ic { position: relative; }

.panel {
  flex: none;
  width: 272px;
  background: #1b1f27;
  border-right: 1px solid #2a2e38;
  overflow-y: auto;
  padding: 12px 14px 20px;
}
.panel.wide-panel { width: 430px; }

.panel h2 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #f0913a;
  display: flex;
  align-items: center;
}
.panel h2 .x { margin-left: auto; color: #7d8590; cursor: pointer; font-size: 15px; }
.panel h2 .x:hover { color: #d8dae0; }

.grp { border-top: 1px solid #2a2e38; margin-top: 14px; padding-top: 12px; }
.grp:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.grp .cap {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #5f6672;
  margin-bottom: 8px;
}

.row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.row .lab { flex: 1; color: #9aa0ab; font-size: 13px; }
.row select { flex: none; width: 140px; } /* fixed so stacked rows line up */
.row:last-child { margin-bottom: 0; }

/* The send destination is two selects on one line, so they share the space
   the single fixed-width select would have had. */
.row.dest .lab { flex: none; }
.row.dest select { flex: 1; width: auto; min-width: 0; }

/* The Generate panel mixes a wide field with small buttons on one row — the
   progression and the seed — which the panel's full-width inputs would break. Its
   slot menus are narrow (one per part), and the readouts sit hard right. */
#generatePanel .row input[type="text"],
#generatePanel .row input[type="number"] { flex: 1; width: auto; min-width: 0; }
#generatePanel .row button { flex: none; padding: 2px 7px; }
#generatePanel .row .field { flex: 1; }
#generatePanel .row select { width: 96px; }
#generatePanel .row b { flex: none; color: #d8dae0; font-size: 12px; min-width: 34px; text-align: right; }
#generatePanel input[type="range"] { margin-bottom: 8px; }
#genProgHint.error, #genSlotHint.error { color: #d9635f; }

.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.panel .wide { width: 100%; }
.panel input[type="range"] { width: 100%; }
.panel input[type="text"] { width: 100%; }
.panel #velLabel { color: #d8dae0; }

.hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: #5f6672;
  margin: 8px 0 0;
}
.hint:empty { margin: 0; }

#bankList {
  width: 100%;
  padding: 4px;
}
#bankList:focus { outline: none; border-color: #f0913a; }

/* Help is the one panel with prose in it, so it gets more room. */
#helpPanel { font-size: 13px; }
#helpPanel h3 { font-size: 13px; color: #f0913a; margin: 16px 0 6px; }
#helpPanel h3:first-of-type { margin-top: 0; }
#helpPanel h4 { font-size: 12.5px; color: #d8dae0; margin: 13px 0 4px; }
#helpPanel ol, #helpPanel ul { margin: 0; padding-left: 18px; }
#helpPanel li { margin-bottom: 5px; }
#helpPanel p { margin: 8px 0; color: #b7bdc8; }
#helpPanel a { color: #f0913a; }

/* The roll and its trig lane share a column so the lane sits under the grid
   and stays put while the roll scrolls vertically. */
#rollArea {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;      /* the COND picker anchors here, clear of the lane's clip */
}

#rollWrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #14161a;
}

#trigLaneWrap {
  flex: none;
  overflow: hidden;        /* scrollLeft is driven from #rollWrap */
  border-top: 1px solid #2a2e38;
  background: #15171b;
}
#trigLaneWrap canvas { cursor: pointer; }

/* P-lock lanes sit below the trig lane and scroll with it. The strip carries
   .hidden whenever the pattern has no lanes, so it costs no height until there
   is automation to show. */
#plockLaneWrap {
  flex: none;
  overflow: hidden;        /* scrollLeft is driven from #rollWrap, like the trig lane */
  border-top: 1px solid #2a2e38;
  background: #15171b;
}
#plockLaneWrap canvas { cursor: ns-resize; }

/* One row per lane in the Edit panel's P-locks group. */
.laneRow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #b7bdc8;
  padding: 3px 0;
}
.laneRow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.laneRow .laneDot { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.laneRow.ro span { color: #7d8590; }
.laneRow button { margin-left: auto; flex: none; padding: 1px 6px; }

/* COND picker: 76 values need grouping, so it opens on tabs. */
.trigPicker {
  position: absolute;
  z-index: 20;
  width: 232px;
  padding: 6px;
  border: 1px solid #3a4050;
  border-radius: 6px;
  background: #1b1e24;
  box-shadow: 0 6px 20px #0009;
  font-size: 11px;
}
.trigPickerHead { color: #f0913a; margin-bottom: 5px; }
.trigPickerTabs { display: flex; gap: 2px; margin-bottom: 5px; }
.trigPickerTabs button {
  flex: 1;
  padding: 2px 0;
  font-size: 10px;
  background: #14161a;
  color: #7d8590;
  border: 1px solid #2a2e38;
  border-radius: 3px;
  cursor: pointer;
}
.trigPickerTabs button.on { background: #2a2e38; color: #e4e7ec; border-color: #4a5060; }
.trigPickerBody {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.trigPickerBody button {
  padding: 3px 0;
  font: 10px ui-monospace, Menlo, monospace;
  background: #14161a;
  color: #d8dae0;
  border: 1px solid #2a2e38;
  border-radius: 3px;
  cursor: pointer;
}
.trigPickerBody button:hover { border-color: #f0913a; }
.trigPickerBody button.on { background: #f0913a; color: #14161a; border-color: #f0913a; }
.trigPickerNone {
  width: 100%;
  margin-top: 5px;
  padding: 3px 0;
  font-size: 10px;
  background: #14161a;
  color: #9aa0ab;
  border: 1px solid #2a2e38;
  border-radius: 3px;
  cursor: pointer;
}
.trigPickerNone.on { border-color: #4a5060; color: #e4e7ec; }

canvas { display: block; cursor: crosshair; }