/* Desk patchbay — a black 19" rack panel screwed onto every desk: SEND jacks
   on top, RECEIVE jacks below, and a scribble strip naming each tie line. */

.pb {
  --ink: #e9e6de;
  --ink-dim: #8b9095;
  --line: rgba(233, 230, 222, 0.32);

  display: flex;
  align-items: stretch;
  width: max-content;
  border-radius: 4px;
  box-shadow: 0 16px 22px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.4);
}

/* Rack ears with the screws that hold the panel to the desk. */
.pb-ear {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 30px;
  padding: 16px 0;
  border: 1px solid #070708;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #303337, #1c1e21);
}
.pb-ear:first-child { border-right: 0; border-radius: 4px 0 0 4px; }
.pb-ear:last-child { border-left: 0; border-radius: 0 4px 4px 0; }
.pb-screw {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e0e3e6, #8a8f94 60%, #484c50);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 -1px 1px rgba(0, 0, 0, 0.35);
}
.pb-screw::after {
  /* the slot */
  content: "";
  position: absolute;
  top: 6px;
  left: 2px;
  right: 2px;
  height: 2px;
  border-radius: 1px;
  background: #34373a;
  transform: rotate(-35deg);
}
.pb-screw + .pb-screw::after { transform: rotate(50deg); }
.pb-ear:last-child .pb-screw::after { transform: rotate(15deg); }
.pb-ear:last-child .pb-screw + .pb-screw::after { transform: rotate(-70deg); }

.pb-face {
  display: flex;
  gap: 22px;
  padding: 12px 22px 14px;
  border-block: 1px solid #070708;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #27292c, #161719);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  color: var(--ink);
}

/* Rows: title/number, SEND jacks, scribble strip, RECEIVE jacks. */
.pb-brand { display: grid; grid-template-rows: 36px 38px 22px 38px; row-gap: 6px; min-width: 104px; }
.pb-head { display: flex; flex-direction: column; gap: 5px; }
.pb-logo { font: 700 15px/1 var(--logo-font); letter-spacing: 0.08em; color: var(--ink); }
.pb-desk {
  overflow: hidden;
  max-width: 120px;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e0782e;
}
.pb-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  font: 700 10px var(--font);
  letter-spacing: 0.16em;
}
.pb-row small { margin-top: 3px; font: 600 7px var(--font); letter-spacing: 0.14em; color: var(--ink-dim); }
.pb-row-strip { font-size: 8px; color: var(--ink-dim); }

.pb-group-title {
  height: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font: 700 8px/12px var(--font);
  letter-spacing: 0.26em;
  text-align: center;
  color: var(--ink-dim);
}
.pb-group-midi { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.07); }
/* Sixteen MIDI lines, as narrow as the MIX inputs below, so the patchbay stays as wide. */
.pb-group-midi .pb-cols { gap: 4px; }
.pb-group-midi .pb-col { width: 46px; }
.pb-group-midi .pb-scribble { width: 44px; font-size: 9.5px; }
.pb-cols { display: flex; gap: 6px; }
.pb-col { display: grid; grid-template-rows: 16px 38px 22px 38px; row-gap: 6px; justify-items: center; width: 62px; }
.pb-num { display: flex; align-items: center; gap: 5px; font: 700 10px var(--font); letter-spacing: 0.1em; }
.pb ws-jack .jack-label { display: none; }

/* Signal LED per line: audio glows with the level, MIDI blinks on notes. */
.pb-led {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d240f;
  box-shadow: 0 0 0 1px #000;
}
.pb-led::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4dff8a;
  box-shadow: 0 0 6px 1px rgba(77, 255, 138, 0.8);
  opacity: var(--level, 0);
}
.pb-led-midi { background: #3a1309; }
.pb-led-midi::after { background: #ff6a2a; box-shadow: 0 0 7px 2px rgba(255, 106, 42, 0.75); opacity: 0; }
.pb-led-midi.on::after { opacity: 1; }

/* The scribble strip: a piece of tape and a marker. */
.pb-scribble {
  width: 60px;
  height: 22px;
  padding: 0 3px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #f3efe2, #e2dccb);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.5);
  color: #1c2768;
  font: 700 11px/22px "Segoe Print", "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive;
  text-align: center;
  transform: rotate(-0.6deg);
}
.pb-col:nth-child(even) .pb-scribble { transform: rotate(0.5deg); }
.pb-col:not(.labelled) .pb-scribble:not(:focus) { opacity: 0.5; }
.pb-scribble.auto:not(:focus) { color: rgba(48, 52, 64, 0.62); font-weight: 400; } /* a channel named after its source */
.pb-scribble:focus { outline: 2px solid var(--focus); outline-offset: 1px; transform: none; }

/* Two rack rows: tie lines on top, the console's inputs and aux sends below. */
.pb-rack { display: flex; flex-direction: column; }
.pb-rack .pb-face + .pb-face { border-top: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 2px 0 rgba(0, 0, 0, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.35); }
.pb-logo-small { font-size: 12px; letter-spacing: 0.12em; }
.pb-brand-console { grid-template-rows: 36px 38px 22px 12px; }
.pb-group-mix .pb-cols, .pb-group-aux .pb-cols { gap: 4px; }
.pb-col.pb-mix { grid-template-rows: 16px 38px 22px 12px; width: 46px; }
.pb-mix .pb-scribble { width: 44px; font-size: 9.5px; }
.pb-col.pb-aux { grid-template-rows: 16px 38px 22px 12px; width: 52px; }
.pb-aux .pb-num { font-size: 9px; color: #f0c040; }
.pb-ret .pb-num { color: #7fd0ff; }
.pb-dir { align-self: start; font: 700 7px/22px var(--font); letter-spacing: 0.12em; color: #8b9095; }
.pb-ret .pb-where, .pb-key .pb-where { grid-row: 3; align-self: start; line-height: 22px; }
.pb-key .pb-num { color: #ffa142; }
.pb-group-aux { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.07); }
/* A console channel fed from another desk. */
.pb-col.taken ws-jack { opacity: 0.28; }
.pb-col.taken .pb-scribble { opacity: 0.35; }
.pb-where {
  max-width: 46px;
  overflow: hidden;
  font: 700 7.5px/12px var(--mono);
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ff8a6a;
}

/* USB MIDI: a column per hardware port (FROM keyboards, TO hardware); unplugged ones dim. */
.pb-brand-usb { grid-template-rows: 36px 38px 22px; }
.pb-group-usb .pb-cols { gap: 4px; min-height: 66px; align-items: start; }
.pb-col.pb-usb { grid-template-rows: 16px 38px 22px; width: 74px; }
.pb-usb .pb-num { font-size: 8.5px; letter-spacing: 0.14em; color: #c9a8ff; }
.pb-usb-out .pb-num { color: #8fd8ff; }
.pb-hw {
  max-width: 72px;
  overflow: hidden;
  padding: 0 4px;
  border-radius: 2px;
  background: #0b0c0d;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  font: 600 9px/22px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vfd);
  text-shadow: 0 0 5px var(--vfd-dim);
}
.pb-usb.gone ws-jack, .pb-usb.gone .pb-num { opacity: 0.35; }
.pb-usb.gone .pb-hw { color: #8b9095; text-decoration: line-through; text-shadow: none; }
/* Audio inputs: a column per input jack the desk added (its label sets it up), then + INPUT. */
.pb-col.pb-io { width: 62px; }
.pb-io-set {
  justify-content: center;
  height: 16px;
  padding: 0 4px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #9fe6b0;
  font: 700 9.5px var(--font);
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
}
.pb-io-stereo .pb-io-set { color: #8fd8ff; }
.pb-io-set:hover { background: rgba(255, 255, 255, 0.1); }
.pb-io-set:focus-visible, .pb-io-plus:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pb-io .pb-scribble { width: 60px; font-size: 10px; }
.pb-io .pb-scribble.auto:not(:focus)::placeholder { color: rgba(48, 52, 64, 0.55); }
.pb-io.gone ws-jack, .pb-io.gone .pb-io-set { opacity: 0.35; }
.pb-col.pb-io-add { grid-template-rows: 16px 38px 22px; width: 70px; }
.pb-io-plus {
  grid-row: 2;
  align-self: center;
  height: 30px;
  padding: 0 8px;
  border: 1px dashed rgba(233, 230, 222, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font: 700 9px var(--font);
  letter-spacing: 0.12em;
  cursor: pointer;
}
.pb-io-plus:hover { background: rgba(255, 255, 255, 0.1); border-style: solid; }
.pb-face.folded .pb-io-add { visibility: hidden; }

/* The I/O row: audio inputs, then (past a separator) the MIDI jacks. */
.pb-group-sep { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.07); }
.pb-usb-in .pb-io-set { color: #c9a8ff; }
.pb-usb-out .pb-io-set { color: #8fd8ff; }
.pb-off { padding: 0 3px; border-radius: 2px; background: #4a2020; font: 700 7px/10px var(--font); letter-spacing: 0.1em; color: #ffd6d0; }
.pb-off[hidden] { display: none; }
.pb-usb.off .pb-hw { text-decoration: none; font-style: italic; }
.pb-usb-empty { align-self: center; padding: 0 6px; font: 600 9px var(--font); letter-spacing: 0.08em; color: var(--ink-dim); }

/* Folding rack rows: ▾ at the top left of each row folds it to a slim strip.
   The columns keep their widths, so a cable still ends where its jack is: a
   plugged jack shrinks to a small socket on the strip, the others are hidden. */
.pb-face { position: relative; }
.pb-fold {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-dim);
  font: 700 9px/16px var(--font);
  cursor: pointer;
}
.pb-fold:hover { background: rgba(255, 255, 255, 0.14); color: var(--ink); }
.pb-fold:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pb-fold-arrow { display: inline-block; transition: transform 0.15s; }
.pb-face.folded .pb-fold { top: 50%; margin-top: -8px; }
.pb-face.folded .pb-fold-arrow { transform: rotate(-90deg); }
.pb-fold-info { display: none; }

.pb-face.folded { align-items: center; padding-block: 6px; }
.pb-face.folded .pb-brand { display: block; height: 20px; }
.pb-face.folded .pb-brand > * { display: none; }
.pb-face.folded .pb-fold-info {
  position: absolute;
  top: 50%;
  left: 28px;
  display: block;
  width: 96px;
  font: 700 7.5px/10px var(--font);
  letter-spacing: 0.16em;
  white-space: pre-line;
  color: var(--ink-dim);
  transform: translateY(-50%);
  pointer-events: none;
}
.pb-face.folded .pb-group-title,
.pb-face.folded .pb-num,
.pb-face.folded .pb-scribble,
.pb-face.folded .pb-where,
.pb-face.folded .pb-dir,
.pb-face.folded ws-channel,
.pb-face.folded .jack-led { display: none; }
.pb-face.folded .pb-col { display: flex; justify-content: center; align-items: center; gap: 6px; height: 20px; }
.pb-face.folded .pb-group-usb .pb-cols { min-height: 0; }
.pb-face.folded ws-jack { pointer-events: none; }
.pb-face.folded ws-jack:not(.patched) { visibility: hidden; }
.pb-face.folded .jack-socket { width: 12px; height: 12px; }