/* Modular Fighters — patch panel (owner: ui agent)
   Dark pure-grey surfaces (r=g=b), single coral accent (HSB H=12).
   Host may override --mfp-acc / --mfp-acc-dim / --mfp-acc-glow.
   Layout: one rail of modules side by side (width in HP), fixed row height,
   scrolls horizontally; footer AUTO / SEND / OUT pinned under it.
   The panel's height = row + footer (the host gives the rest of the screen to the fight). */

.mfp{
  --mfp-bg:#121212;
  --mfp-elev:#1c1c1c;
  --mfp-panel:#232323;
  --mfp-sunk:#161616;
  --mfp-case:#0c0c0c;
  --mfp-line:#303030;
  --mfp-line2:#3d3d3d;
  --mfp-rail:#4a4a4a;
  --mfp-fg:#f2f2f2;
  --mfp-fg2:#a8a8a8;
  --mfp-fg3:#6e6e6e;
  --mfp-acc:#e8846c;
  --mfp-acc-dim:#6b4a41;
  --mfp-acc-glow:#ff9c80;
  --mfp-acc-text:#e8846c;  /* accent used as small text */
  --mfp-acc-line:#6b4a41;  /* accent outlines (mode toggle, OUT module) */
  --mfp-fill:#6b4a41;      /* SEQ5 step fill at rest */
  --mfp-on-acc:#121212;    /* text on a full-accent surface */
  /* read by JS (canvas + SVG cables); re-read on the window 'mf-theme' event */
  --mfp-draw-grid:#303030;
  --mfp-draw-stroke:#e8846c;
  --mfp-cable-s:0.5;
  --mfp-cable-b:0.92;
  --mfp-cable-shadow:#000000;
  --mfp-cable-shadow-op:0.5;
  --mfp-font:var(--font-body,"Barlow Condensed","Noto Sans JP","Noto Sans TC",system-ui,sans-serif);
  --mfp-gap:8px;
  --mfp-hp:19px;           /* 1 HP; set from JS (HP_PX) */
  --mfp-mgap:3px;          /* gap between neighbouring module panels */
  --mfp-row:26px;          /* module head / mode toggle height */
  --mfp-jack:33px;         /* visible jack diameter (1.5x of the old 22px, for touch) */
  --mfp-jack-hit:48px;     /* jack tap target (JS JACK_HIT), >= 44px */
  --mfp-rowh:clamp(240px,32vh,400px);   /* module row height: 270px at 390x844; 240px is the least that shows every knob (VCO) */

  position:relative;
  display:flex;flex-direction:column;
  width:100%;height:100%;min-height:0;
  overflow:hidden;
  background:var(--mfp-bg);
  color:var(--mfp-fg);
  font-family:var(--mfp-font);
  font-weight:300;
  line-height:1.2;
  font-size:16px;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  box-sizing:border-box;
}
/* white page theme (index.html sets html[data-theme="light"]): pure greys, dark text,
   coral #e8846c kept for filled jacks / SEND / active fill; #b3563e only for small accent text */
html[data-theme="light"] .mfp{
  --mfp-bg:#ffffff;
  --mfp-elev:#fafafa;
  --mfp-panel:#e4e4e4;
  --mfp-sunk:#e8e8e8;
  --mfp-case:#dcdcdc;
  --mfp-line:#c4c4c4;
  --mfp-line2:#b4b4b4;
  --mfp-rail:#7a7a7a;
  --mfp-fg:#1a1a1a;
  --mfp-fg2:#555555;
  --mfp-fg3:#8a8a8a;
  --mfp-acc:#e8846c;
  --mfp-acc-dim:#f3cfc6;
  --mfp-acc-glow:#d9684f;
  --mfp-acc-text:#b3563e;
  --mfp-acc-line:#e8846c;
  --mfp-fill:#eda08c;
  --mfp-on-acc:#121212;
  --mfp-draw-grid:#b4b4b4;
  --mfp-draw-stroke:#b3563e;
  --mfp-cable-s:0.65;
  --mfp-cable-b:0.66;
  --mfp-cable-shadow:#000000;
  --mfp-cable-shadow-op:0.3;
}
.mfp *,.mfp *::before,.mfp *::after{box-sizing:border-box}
:where(.mfp) button{font-family:var(--mfp-font);font-weight:300;line-height:1.2;color:inherit;background:none;border:none;margin:0;padding:0;cursor:pointer}

.mfp.mfp-disabled{opacity:.4;filter:grayscale(1)}
.mfp.mfp-disabled .mfp-scroll,
.mfp.mfp-disabled .mfp-foot,
.mfp.mfp-disabled .mfp-hbar,
.mfp.mfp-disabled .mfp-cables{pointer-events:none}

@supports (height:1dvh){ .mfp{--mfp-rowh:clamp(240px,32dvh,400px)} }

/* ---------- case: horizontal scroller with one rail ---------- */
.mfp-scroll{
  flex:1 1 auto;min-height:0;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:none;        /* fingers never pan the row: scroll with the bar below (wheel / trackpad still work) */
  background:var(--mfp-case);
  scrollbar-width:none;
}
.mfp-scroll::-webkit-scrollbar{display:none}
/* horizontal scroll bar under the row: filled-track fader, thumb = visible share of the rail.
   24px track, hit area grown to 44px with the pseudo-element; hidden when the rail fits. */
.mfp-hbar{
  position:relative;
  flex:0 0 auto;height:24px;
  margin:6px var(--mfp-gap);
  background:var(--mfp-sunk);
  border:1px solid var(--mfp-line);
  border-radius:6px;
  touch-action:none;
  cursor:ew-resize;
  z-index:6;
}
.mfp-hbar::before{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px}
.mfp-hbar.mfp-off{display:none}
.mfp-hthumb{
  position:absolute;top:2px;bottom:2px;left:0;
  width:44px;
  border-radius:4px;
  background:var(--mfp-acc);
  pointer-events:none;
}
.mfp-hbar.mfp-active .mfp-hthumb{background:var(--mfp-acc-glow)}
.mfp-case{
  position:relative;
  display:flex;flex-direction:column;gap:4px;
  width:max-content;min-width:100%;
  padding:4px 6px;
}
.mfp-rail{
  flex:0 0 auto;height:var(--mfp-rowh);min-height:0;
  display:flex;flex-direction:row;align-items:stretch;gap:var(--mfp-mgap);
  padding:3px 0;
  border-top:2px solid var(--mfp-rail);
  border-bottom:2px solid var(--mfp-rail);
  background:var(--mfp-case);
}

/* ---------- module panel ---------- */
.mfp-mod{
  flex:0 0 auto;
  height:100%;min-height:0;
  display:flex;flex-direction:column;gap:4px;
  background:var(--mfp-elev);
  border:1px solid var(--mfp-line2);
  border-radius:2px;
  padding:3px 4px 4px;
  overflow:hidden;
  touch-action:none;
}
.mfp-head{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:4px;
  min-height:var(--mfp-row);
}
.mfp-title{
  font-size:18px;letter-spacing:.1em;color:var(--mfp-fg);line-height:22px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;
}

/* ---------- ports ---------- */
.mfp-ports{flex:0 0 auto;display:flex;gap:3px;align-items:stretch}
.mfp-ports.mfp-two{flex-direction:column;gap:2px}
.mfp-pgroup{display:flex;flex:1 1 auto;justify-content:space-around;border-radius:4px;padding:0 0 1px;min-width:0}
.mfp-pgroup.mfp-out{background:var(--mfp-sunk);border:1px solid var(--mfp-line)}
.mfp-ports:not(.mfp-two) .mfp-pgroup.mfp-in{flex:var(--mfp-in-n,1) 1 0}
.mfp-ports:not(.mfp-two) .mfp-pgroup.mfp-out{flex:var(--mfp-out-n,1) 1 0}
/* MIX VCA: inputs as a grid (IN 1-4 over CV 1-4), OUT beside, vertically centred */
.mfp-ports.mfp-pgrid .mfp-pgroup.mfp-in{display:grid;grid-template-columns:repeat(var(--mfp-pcols,4),minmax(0,1fr));row-gap:2px;justify-items:center}
.mfp-ports.mfp-pgrid .mfp-pgroup.mfp-out{align-items:center}
.mfp-ports.mfp-pgrid .mfp-port{width:100%}
.mfp-port{
  display:flex;flex-direction:column;align-items:center;
  flex:1 1 0;min-width:0;
}
.mfp-plabel{
  font-size:16px;letter-spacing:0;color:var(--mfp-fg2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  line-height:17px;
  margin-top:-7px;          /* tuck under the jack hit area's transparent margin */
}
.mfp-out .mfp-plabel{color:var(--mfp-fg)}
.mfp-jack{
  position:relative;
  width:var(--mfp-jack-hit);height:var(--mfp-jack-hit);
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;
  cursor:crosshair;
}
.mfp-jack::before{
  content:"";
  width:var(--mfp-jack);height:var(--mfp-jack);border-radius:50%;
  box-sizing:border-box;
}
/* input = hollow ring */
.mfp-jack[data-dir="in"]::before{
  background:var(--mfp-bg);
  border:4px solid var(--mfp-fg2);
}
/* output = filled disc with dark centre hole */
.mfp-jack[data-dir="out"]::before{
  background:radial-gradient(circle,var(--mfp-bg) 0 26%,var(--mfp-acc) 28% 100%);
  border:3px solid var(--mfp-acc);
}
.mfp-jack.mfp-hot::before{box-shadow:0 0 0 3px var(--mfp-acc-glow)}
.mfp-jack[data-dir="in"].mfp-target::before{border-color:var(--mfp-acc-glow)}

/* ---------- knobs ---------- */
/* grid under the jacks: column count + dial size set by JS (fitKnobs) from the free space */
.mfp-knobs.mfp-fit{
  flex:1 1 0;min-height:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-content:space-evenly;
}
/* SEQ5 / DRAW: one RATE knob beside the jacks */
.mfp-jrow{flex:0 0 auto;display:flex;align-items:flex-start;gap:4px}
.mfp-jrow .mfp-ports{flex:1 1 auto;min-width:0}
.mfp-knobs.mfp-inline{flex:0 0 56px;display:flex;justify-content:center;--mfp-knob:40px}
.mfp-knob{
  flex:0 0 calc(100% / var(--mfp-kcols,2));min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:2px 0;
  touch-action:none;
  cursor:ns-resize;
}
.mfp-knobs.mfp-inline .mfp-knob{flex:0 0 100%}
.mfp-kdial{display:block;width:var(--mfp-knob,44px);height:var(--mfp-knob,44px);overflow:visible;pointer-events:none}
.mfp-ktrack,.mfp-kval{fill:none;stroke-width:9;stroke-linecap:round}
.mfp-ktrack{stroke:var(--mfp-line2)}
.mfp-kval{stroke:var(--mfp-acc)}
.mfp-knob.mfp-active .mfp-kval{stroke:var(--mfp-acc-glow)}
.mfp-kbody{fill:var(--mfp-panel);stroke:var(--mfp-line2);stroke-width:2}
.mfp-kptr{stroke:var(--mfp-fg);stroke-width:6;stroke-linecap:round}
.mfp-klabel{
  display:block;width:max-content;max-width:100%;
  font-size:16px;line-height:19px;letter-spacing:.02em;color:var(--mfp-fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}

/* VCO / LFO mode toggle */
.mfp-mode{
  flex:0 0 auto;
  min-width:48px;height:var(--mfp-row);
  border:1px solid var(--mfp-acc-line);
  border-radius:4px;
  background:transparent;  /* host page button background would otherwise leak in */
  font-size:16px;letter-spacing:.1em;
  color:var(--mfp-acc-text);
  padding:0 8px;
  touch-action:manipulation;
}
.mfp-mode.mfp-lfo{background:var(--mfp-acc-dim);color:var(--mfp-fg)}
.mfp-mode:active{background:var(--mfp-acc);color:var(--mfp-on-acc)}

/* SEQ5: five vertical filled faders, one-finger sweep */
.mfp-seq{
  flex:1 1 0;min-height:48px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:3px;
  touch-action:none;
  cursor:ns-resize;
}
.mfp-step{
  position:relative;
  background:var(--mfp-sunk);
  border:1px solid var(--mfp-line);
  border-radius:4px;
  overflow:hidden;
  pointer-events:none;
}
.mfp-step .mfp-fill{position:absolute;left:0;right:0;top:auto;bottom:0;width:auto;height:0;background:var(--mfp-fill);pointer-events:none}
.mfp-step.mfp-active .mfp-fill{background:var(--mfp-acc)}
.mfp-step .mfp-slabel{
  position:absolute;left:0;right:0;bottom:2px;text-align:center;
  font-size:16px;color:var(--mfp-fg);line-height:18px;
}
/* step being played (clock): accent fill + outline, number on an accent pill */
.mfp-step.mfp-cur{border:2px solid var(--mfp-acc-glow)}
.mfp-step.mfp-cur .mfp-fill{background:var(--mfp-acc)}
.mfp-step.mfp-cur .mfp-slabel{left:50%;right:auto;width:22px;margin-left:-11px;border-radius:4px;background:var(--mfp-acc-glow);color:var(--mfp-on-acc)}

/* ADSR / AR oscilloscope strip: envelope output, newest at the right */
.mfp-scope{
  display:block;width:100%;
  flex:0 0 48px;height:48px;
  background:var(--mfp-sunk);
  border:1px solid var(--mfp-line);
  border-radius:4px;
  pointer-events:none;
}
@media (min-height:1000px){ .mfp-scope{flex-basis:64px;height:64px} }

/* DRAW canvas */
.mfp-draw{
  display:block;width:100%;
  flex:1 1 0;min-height:40px;
  background:var(--mfp-sunk);
  border:1px solid var(--mfp-line);
  border-radius:4px;
  touch-action:none;
  cursor:crosshair;
}

/* ---------- footer: AUTO / SEND / OUT ---------- */
.mfp-foot{
  flex:0 0 auto;
  display:flex;align-items:stretch;gap:var(--mfp-gap);
  padding:0 var(--mfp-gap) var(--mfp-gap);
  padding-bottom:calc(var(--mfp-gap) + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--mfp-line);
  padding-top:var(--mfp-gap);
  background:var(--mfp-bg);
}
.mfp-btn{
  flex:1 1 0;min-height:52px;
  border:1px solid var(--mfp-line);border-radius:10px;
  background:var(--mfp-elev);
  font-size:22px;letter-spacing:.14em;color:var(--mfp-fg);
  touch-action:manipulation;
}
.mfp-btn:active{background:var(--mfp-panel)}
/* AUTO lockout after a new module set: accent-dim bar drains left to right, seconds shown */
.mfp-btn.mfp-auto{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px}
.mfp-auto .mfp-auto-label,.mfp-auto .mfp-auto-num{position:relative;z-index:1}
.mfp-auto .mfp-auto-num{display:none;font-size:22px;letter-spacing:0;min-width:1.2em;color:var(--mfp-fg)}
.mfp-auto .mfp-lockbar{display:none;position:absolute;top:0;bottom:0;right:0;left:calc((1 - var(--mfp-lock,0)) * 100%);background:var(--mfp-acc-dim);pointer-events:none}
.mfp-btn.mfp-auto.mfp-locked{cursor:default;color:var(--mfp-fg2)}
.mfp-btn.mfp-auto.mfp-locked:active{background:var(--mfp-elev)}
.mfp-auto.mfp-locked .mfp-lockbar,.mfp-auto.mfp-locked .mfp-auto-num{display:block}
.mfp-btn.mfp-send{background:var(--mfp-acc);border-color:var(--mfp-acc);color:var(--mfp-on-acc)}
.mfp-btn.mfp-send:active{background:var(--mfp-acc-glow)}
.mfp-outmod{
  flex:0 0 auto;
  display:flex;align-items:center;gap:6px;
  background:var(--mfp-elev);
  border:1px solid var(--mfp-acc-line);
  border-radius:10px;
  padding:2px 8px 2px 10px;
}
.mfp-outmod .mfp-title{font-size:18px;color:var(--mfp-acc-text);padding:0 2px 0 0}
.mfp-outmod .mfp-port{flex:0 0 auto;min-width:52px}
.mfp-outmod .mfp-plabel{margin-top:-6px}

/* ---------- cable overlays ---------- */
/* panel overlay: cables to OUT + drag preview (viewport of the panel) */
.mfp-cables{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;
  z-index:5;
  overflow:visible;
}
/* case overlay: module-to-module cables, sized to the whole scrollable case in JS */
.mfp-cables.mfp-case-cables{width:auto;height:auto;overflow:hidden;z-index:4}
.mfp-cable{fill:none;stroke-width:4;stroke-linecap:round;pointer-events:none;opacity:.92}
.mfp-cable-hit{fill:none;stroke:transparent;stroke-width:18;stroke-linecap:round;pointer-events:stroke;cursor:pointer;touch-action:none}
.mfp-cables.mfp-dragging .mfp-cable-hit{pointer-events:none}
.mfp-cable-end{pointer-events:none}
.mfp-cable-temp{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:8 6;pointer-events:none}

/* short landscape (phone held sideways): index.html lays the panel over the lower part of the
   full-height fight canvas, so the panel surfaces go translucent (alpha tokens below, dark and light) while
   text, jacks, knobs, cables and SEND stay opaque. The row is 240px (the smallest height at which every module shows all its knobs,
   measured per type: VCO needs the most, 236px still clips its knob labels by 3px), the scroll
   bar sits under the row, and AUTO / SEND / OUT stack in a 92px column at the right end so the
   footer costs no height. When even that does not fit (Safari's toolbar showing), the row
   scrolls vertically inside the panel. */
@media (orientation:landscape) and (max-height:620px){
  /* translucent surfaces (the panel lies over the fight band; text, jacks, knobs, cables and
     SEND stay opaque): modules 55%, case 25%, sunk areas 40%, jack centres 85% */
  .mfp{
    --mfp-case-a:rgba(12,12,12,.25);
    --mfp-elev-a:rgba(28,28,28,.55);
    --mfp-sunk-a:rgba(22,22,22,.4);
    --mfp-bg-a:rgba(18,18,18,.85);
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--mfp-foot-w,92px);   /* the column reserved for the footer (scaled width when setScale < 1) */
    grid-template-rows:minmax(0,1fr) auto;
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:transparent;
  }
  html[data-theme="light"] .mfp{
    --mfp-case-a:rgba(220,220,220,.25);
    --mfp-elev-a:rgba(250,250,250,.55);
    --mfp-sunk-a:rgba(232,232,232,.4);
    --mfp-bg-a:rgba(255,255,255,.85);
  }
  .mfp-scroll{grid-area:1/1/2/2;overflow-y:auto;background:var(--mfp-case-a)}
  .mfp-hbar{grid-area:2/1/3/2;background:var(--mfp-sunk-a)}
  .mfp-case{height:auto}
  .mfp-mod{background:var(--mfp-elev-a)}
  .mfp-pgroup.mfp-out,.mfp-step,.mfp-scope,.mfp-draw{background:var(--mfp-sunk-a)}
  .mfp-jack[data-dir="in"]::before{background:var(--mfp-bg-a)}
  .mfp-jack[data-dir="out"]::before{background:radial-gradient(circle,var(--mfp-bg-a) 0 26%,var(--mfp-acc) 28% 100%)}
  /* when row + bar + strip do not fit the height (Safari's toolbar up, or the page zoomed in
     Safari) index.html calls MFPatchUI.setScale(): the rail and the footer are scaled with a
     transform (never CSS zoom: iPhone Safari's hit testing drifted with it) */
  .mfp-rail{height:240px;flex:0 0 auto;background:transparent}
  .mfp-foot{background:transparent}
  .mfp-foot{
    position:absolute;top:0;right:0;bottom:0;    /* out of the grid's sizing: the row's height never follows the column */
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;
    width:92px;
    padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));
    border-top:0;border-left:1px solid var(--mfp-line);
  }
  .mfp-btn{flex:0 0 48px;min-height:48px;font-size:17px;letter-spacing:.1em;background:var(--mfp-elev-a)}
  .mfp-btn.mfp-auto.mfp-locked:active{background:var(--mfp-elev-a)}
  .mfp-btn.mfp-send{background:var(--mfp-acc)}
  .mfp-btn.mfp-auto{gap:6px}
  .mfp-auto .mfp-auto-num{font-size:17px}
  .mfp-outmod{
    flex:1 1 auto;
    flex-direction:column;justify-content:center;gap:0;
    padding:2px 2px 4px;
    background:var(--mfp-elev-a);
  }
  .mfp-outmod .mfp-title{flex:0 0 auto;text-align:center;padding:0}
  .mfp-outmod .mfp-port{min-width:0}
}
/* portrait phones: the AUTO / SEND / OUT row 40% lower (user request 2026-10-22: the VCO's bottom
   was clipped on an iPhone 13 mini in Safari). Buttons 40px, OUT jacks 40px with their L / R
   beside them instead of below: 78px -> 48px before the safe area. AUTO never shrinks below
   its label + countdown (a flex item with overflow:hidden would otherwise clip "AUTO 8"). */
@media (orientation:portrait) and (max-width:500px){
  .mfp-foot{gap:6px;padding:4px var(--mfp-gap) calc(4px + env(safe-area-inset-bottom,0px))}
  .mfp-btn{min-height:40px;font-size:18px;letter-spacing:.1em}
  .mfp-btn.mfp-auto{min-width:-webkit-min-content;min-width:min-content}
  .mfp-auto .mfp-auto-num{font-size:18px}
  .mfp-outmod{gap:4px;padding:0 6px 0 8px}
  .mfp-outmod .mfp-title{font-size:16px}
  .mfp-outmod .mfp-port{flex-direction:row;align-items:center;min-width:0}
  .mfp-outmod .mfp-jack{width:40px;height:40px}
  .mfp-outmod .mfp-plabel{margin-top:0}
}