/* The patch drawer (js/patch.js): a palette of blocks beside a Drawflow
   canvas. Drawflow's own stylesheet (vendor/drawflow.css) lays the canvas
   out; this gives it diii's dark look. */

.patch-drawer {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    border-bottom: 1px solid var(--neutral-trim);
    background-color: var(--bg-default);
}

.patch-drawer.open {
    min-height: 180px;
}

.patch-drawer .midi-drawer-bar {
    flex: none;
}

.patch-drawer[hidden],
.patch-drawer:not(.open) .patch-body,
.patch-drawer:not(.open) .patch-controls {
    display: none;
}

/* open… and examples…: menus, so they look like the buttons beside them */
.patch-controls .patch-select {
    padding: 2px 6px;
    font-size: 0.78rem;
    color-scheme: dark;
}

.patch-controls .patch-select:hover {
    color: var(--interactive-selected);
    border-color: var(--neutral-medium);
}

/* edits waiting: apply stands out */
.patch-controls #patchApplyBtn:not(:disabled) {
    color: #fff;
    border-color: #c98a1b;
    background: #8a5a0c;
}

.patch-controls .active {
    color: #fff;
    background: var(--accent);
}

.patch-body {
    position: relative;
    display: flex;
    height: min(440px, 55vh);
    min-height: 160px;
    max-height: 85vh;
    overflow: hidden;
}

.patch-palette {
    flex: none;
    width: 118px;
    overflow: auto;
    padding: 6px 8px 10px;
    border-right: 1px solid var(--neutral-trim);
    background: var(--bg-surface);
}

.patch-palette-group {
    margin: 8px 0 3px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-medium);
}

.patch-palette-group:first-child {
    margin-top: 0;
}

.patch-palette-item {
    display: block;
    width: 100%;
    margin: 2px 0;
    padding: 3px 6px;
    border: 1px solid var(--neutral-trim);
    border-radius: 4px;
    background: var(--bg-subdued);
    color: var(--neutral-heavy);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

.patch-palette-item:active {
    cursor: grabbing;
}

.patch-palette-item:hover {
    border-color: var(--accent);
}

/* zoom, over the canvas's bottom right corner (outside Drawflow's element,
   so its mouse handling never sees these clicks) */
.patch-zoom {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 3;
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--neutral-trim);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.patch-zoom button {
    min-width: 26px;
    padding: 2px 6px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--neutral-heavy);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.patch-zoom button:hover {
    background: var(--hover, #2a2d2e);
}

#patchZoomLabel {
    min-width: 44px;
    color: var(--neutral-medium);
}

/* space held over the canvas, or panning: the canvas moves */
.patch-canvas.pn-panning {
    cursor: grab;
}

.patch-canvas.pn-panning-now {
    cursor: grabbing;
}

/* blocks selected (a click, a box, shift- or ctrl-click) */
.patch-canvas .drawflow .drawflow-node.pn-picked {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.patch-select-box {
    position: absolute;
    z-index: 3;
    border: 1px dashed var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    pointer-events: none;
}

/* the canvas */
.patch-canvas {
    position: relative;
    flex: 1;
    min-width: 0;
    background-color: #191a1c;
    background-image: radial-gradient(circle, #2b2d31 1px, transparent 1px);
    background-size: 22px 22px;
}

.patch-canvas .drawflow .drawflow-node {
    width: auto;
    min-width: 132px;
    padding: 6px 10px 8px;
    border: 1px solid #3a3d42;
    border-radius: 6px;
    background: #24262a;
    color: var(--neutral-heavy);
    font-size: 0.78rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.patch-canvas .drawflow .drawflow-node.selected {
    border-color: var(--accent);
    background: #26292e;
}

.patch-canvas .drawflow .drawflow-node .input,
.patch-canvas .drawflow .drawflow-node .output {
    width: 13px;
    height: 13px;
    border: 2px solid #5b616a;
    background: #191a1c;
}

.patch-canvas .drawflow .drawflow-node .output:hover,
.patch-canvas .drawflow .drawflow-node .input:hover {
    border-color: var(--accent);
}

/* wires start from either end */
.patch-canvas .drawflow .drawflow-node .output,
.patch-canvas .drawflow .drawflow-node .input {
    cursor: crosshair;
}

/* a wire being drawn from an input: under the mouse, not in its way */
.patch-canvas .pn-wire-draft {
    pointer-events: none;
}

.patch-canvas .drawflow .connection .main-path {
    stroke: #6b8fbf;
    stroke-width: 3px;
}

.patch-canvas .drawflow .connection .main-path:hover,
.patch-canvas .drawflow .connection .main-path.selected {
    stroke: var(--accent-hover);
}

.patch-canvas .drawflow-delete {
    border: 1px solid #5b616a;
    background: #24262a;
    color: var(--neutral-heavy);
    line-height: 26px;
}

.pn-title {
    margin-bottom: 4px;
    font-family: var(--mono-font, ui-monospace, monospace);
    font-weight: 600;
    color: var(--interactive-selected);
}

/* colour by role: device blocks amber, sources green, outputs blue */
.pn-encoder .pn-title,
.pn-key .pn-title,
.pn-key_led .pn-title,
.pn-display .pn-title {
    color: #ffbe64;
}

.pn-lfo .pn-title {
    color: #7fdc9a;
}

.pn-midi_cc .pn-title,
.pn-midi_note .pn-title {
    color: #79b8ff;
}

.pn-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 2px 0;
    color: var(--neutral-medium);
}

/* dark spinners and dropdowns, like the rest of the page */
.pn-field input,
.pn-field select,
.pn-field textarea {
    color-scheme: dark;
}

/* the arrows against the right edge */
.pn-field input[type='number'] {
    padding-right: 0;
}

.pn-field input,
.pn-field select {
    width: 68px;
    padding: 1px 4px;
    border: 1px solid var(--neutral-trim);
    border-radius: 3px;
    background: #1b1c1f;
    color: var(--neutral-heavy);
    font: inherit;
}

.pn-field select {
    width: auto;
    min-width: 68px;
}

.pn-field input[type='text'] {
    width: 84px;
}

/* the lua block's code: under its label, as wide as the block */
.pn-code {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

.pn-code textarea {
    width: 210px;
    min-height: 60px;
    padding: 3px 5px;
    border: 1px solid var(--neutral-trim);
    border-radius: 3px;
    background: #1b1c1f;
    color: #c9e0ff;
    font-family: var(--mono-font, ui-monospace, monospace);
    font-size: 0.75rem;
    /* the corner grows the code, and the block with it */
    min-width: 150px;
    resize: both;
}

.pn-grid_key .pn-title,
.pn-grid_led .pn-title,
.pn-enc_push .pn-title {
    color: #ffbe64;
}

.pn-metro .pn-title,
.pn-clock .pn-title,
.pn-midi_in_cc .pn-title,
.pn-midi_in_note .pn-title {
    color: #7fdc9a;
}

.pn-constant .pn-title {
    color: #7fdc9a;
}

.pn-sample .pn-title {
    color: #9fe0e0;
}

.pn-math .pn-title,
.pn-func .pn-title,
.pn-change .pn-title {
    color: #f2c879;
}

.pn-memory .pn-title,
.pn-var_set .pn-title,
.pn-var_get .pn-title {
    color: #9fe0e0;
}

.pn-enc_label .pn-title,
.pn-key_label .pn-title,
.pn-slider .pn-title,
.pn-knob .pn-title,
.pn-number .pn-title,
.pn-graph .pn-title,
.pn-steps .pn-title,
.pn-text .pn-title {
    color: #f59fc8;
}

.pn-watch .pn-title {
    color: #79b8ff;
}

/* the watch block's view: the latest value and the last ones as a line */
.pn-watchview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 120px;
}

.pn-watch-value {
    font-family: var(--mono-font, ui-monospace, monospace);
    font-size: 0.95rem;
    color: var(--neutral-heavy);
}

/* Drawflow positions every svg on its canvas absolutely (its wires are
   svgs); this one stays in the block */
.patch-canvas .drawflow .pn-watch-graph {
    position: static;
    display: block;
    overflow: hidden !important;
}

.pn-watch-graph {
    width: 100%;
    height: 28px;
    border-radius: 3px;
    background: #1b1c1f;
}

.pn-watch-graph polyline {
    fill: none;
    stroke: #79b8ff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.pn-print .pn-title {
    color: #79b8ff;
}

.pn-lua .pn-title {
    color: #d7a6ff;
}

/* names for the ports of blocks with more than one, just outside the port */
.drawflow-node .input,
.drawflow-node .output {
    position: relative;
}

.drawflow-node .input::after,
.drawflow-node .output::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--neutral-medium);
    white-space: nowrap;
    pointer-events: none;
}

/* outside the block, so they never cover its fields */
.drawflow-node .input::after {
    right: 16px;
}

.drawflow-node .output::after {
    left: 16px;
}

.pn-midi_note .input_1::after,
.pn-gate .input_1::after {
    content: 'in';
}

.pn-math .input_1::after {
    content: 'a';
}

.pn-math .input_2::after {
    content: 'b';
}

.pn-memory .input_1::after {
    content: 'set';
}

.pn-memory .input_2::after {
    content: 'store';
}

.pn-memory .input_3::after {
    content: 'recall';
}

.pn-metro .input_2::after {
    content: 'bpm';
}

.pn-sample .input_1::after {
    content: 'in';
}

.pn-sample .input_2::after {
    content: 'trig';
}

.pn-route .input_2::after {
    content: 'pick';
}

.pn-route .output_1::after {
    content: '0';
}

.pn-route .output_2::after {
    content: '1';
}

.pn-steps .input_1::after {
    content: 'step';
}

.pn-steps .input_2::after {
    content: 'flip';
}

.pn-steps .output_1::after {
    content: 'gate';
}

.pn-steps .input_3::after {
    content: 'edit';
}

.pn-steps .input_4::after {
    content: 'page';
}

.pn-steps .input_5::after {
    content: 'length';
}

.pn-steps .output_2::after {
    content: 'note';
}

.pn-steps .output_3::after {
    content: 'step';
}

.pn-midi_note .input_2::after {
    content: 'note';
}

.pn-counter .input_1::after {
    content: 'step';
}

.pn-counter .input_2::after {
    content: 'reset';
}

.pn-gate .input_2::after {
    content: 'open';
}

.pn-clock .output_1::after {
    content: 'beat';
}

.pn-clock .output_2::after {
    content: 'run';
}

.pn-midi_in_note .output_1::after {
    content: 'note';
}

.pn-midi_in_note .output_2::after {
    content: 'on';
}

.pn-lua .input_1::after,
.pn-lua .output_1::after {
    content: '1';
}

.pn-lua .input_2::after,
.pn-lua .output_2::after {
    content: '2';
}

/* ------------------------------------------------ guide and screen layout */

/* panels over the canvas (js/patch-screen.js) */
.patch-overlay {
    position: absolute;
    inset: 8px 8px 8px 126px;
    z-index: 4;
    overflow: auto;
    padding: 12px 18px 16px;
    border: 1px solid var(--neutral-trim);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-default) 96%, transparent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: var(--neutral-heavy);
    font-size: 0.85rem;
    line-height: 1.5;
}

.patch-overlay[hidden] {
    display: none;
}

.patch-overlay h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.patch-overlay h4 {
    margin: 14px 0 4px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-medium);
}

.patch-overlay p,
.patch-overlay ul {
    margin: 4px 0;
    max-width: 72ch;
}

.patch-overlay ul {
    padding-left: 18px;
}

.patch-overlay td {
    padding: 1px 14px 1px 0;
    vertical-align: top;
}

.patch-overlay td:first-child {
    white-space: nowrap;
    color: var(--neutral-medium);
}

.patch-overlay-close {
    position: sticky;
    top: 0;
    float: right;
    border: 0;
    background: none;
    color: var(--neutral-medium);
    font-size: 1.2rem;
    cursor: pointer;
}

.patch-overlay-close:hover {
    color: var(--interactive-selected);
}

/* the guide's picture of the screen grid */
.screen-diagram {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 8px 0;
}

.screen-diagram text {
    font-family: var(--mono-font, ui-monospace, monospace);
    font-size: 11px;
    fill: var(--neutral-medium);
}

.screen-diagram .sd-cap,
.screen-diagram .sd-colnum {
    text-anchor: middle;
}

.screen-diagram .sd-name {
    fill: var(--neutral-heavy);
    font-weight: 600;
}

.screen-diagram .sd-enc,
.screen-diagram .sd-key {
    fill: #121314;
    stroke: #5b616a;
    stroke-width: 1.5;
}

.screen-diagram .sd-screen {
    fill: #08090a;
    stroke: #3a3d42;
    stroke-width: 2;
}

.screen-diagram .sd-row {
    stroke: #08090a;
    stroke-width: 1;
}

.screen-diagram .sd-top,
.screen-diagram .sd-bottom {
    fill: color-mix(in srgb, #f59fc8 28%, transparent);
}

.screen-diagram .sd-middle-top {
    fill: color-mix(in srgb, #79b8ff 26%, transparent);
}

.screen-diagram .sd-middle-bottom {
    fill: color-mix(in srgb, #79b8ff 16%, transparent);
}

.screen-diagram .sd-col {
    stroke: #9aa3ad;
    stroke-dasharray: 3 3;
    stroke-width: 1;
}

/* the layout builder: the screen with the encoders above, the keys below */
.ps-hint {
    color: var(--neutral-medium);
}

.ps-panel {
    width: min(100%, 560px);
    margin: 10px 0 4px;
}

.ps-encs,
.ps-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    margin: 6px 0;
}

.ps-enc,
.ps-key {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid #5b616a;
    background: #121314;
    color: var(--neutral-medium);
    font-family: var(--mono-font, ui-monospace, monospace);
    font-size: 0.72rem;
}

.ps-enc {
    border-radius: 50%;
}

.ps-key {
    border-radius: 4px;
}

.ps-screen {
    position: relative;
    aspect-ratio: 2;
    border: 2px solid #3a3d42;
    border-radius: 3px;
    background-color: #08090a;
    /* the four columns (each tile is one column, its line on the right
       edge), and the rows' edges (10, 32 and 55 of 64 px) */
    background-image:
        linear-gradient(90deg, transparent calc(100% - 1px), #24272b calc(100% - 1px)),
        linear-gradient(
            180deg,
            transparent calc(15.625% - 1px),
            #24272b calc(15.625% - 1px),
            #24272b 15.625%,
            transparent 15.625%,
            transparent calc(50% - 1px),
            #1b1d20 calc(50% - 1px),
            #1b1d20 50%,
            transparent 50%,
            transparent calc(85.9375% - 1px),
            #24272b calc(85.9375% - 1px),
            #24272b 85.9375%,
            transparent 85.9375%
        );
    background-size:
        25% 100%,
        100% 100%;
}

.ps-box {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 0 4px;
    border: 1px solid #f59fc8;
    border-radius: 3px;
    background: color-mix(in srgb, #f59fc8 18%, #08090a);
    color: #fde3ef;
    font-family: var(--mono-font, ui-monospace, monospace);
    font-size: 0.68rem;
    line-height: 1.15;
    white-space: nowrap;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.ps-box.ps-top,
.ps-box.ps-bottom {
    flex-direction: row;
    gap: 6px;
}

.ps-box .ps-type {
    color: color-mix(in srgb, #f59fc8 70%, white);
    opacity: 0.75;
}

.ps-box.ps-picked {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.ps-box.ps-clash {
    border-color: #ff6b6b;
    background: color-mix(in srgb, #ff6b6b 25%, #08090a);
}

.ps-box.ps-dragging {
    z-index: 2;
    cursor: grabbing;
    opacity: 0.85;
}

/* the right edge: drag to widen */
.ps-grip {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 7px;
    cursor: ew-resize;
    background: linear-gradient(90deg, transparent 2px, color-mix(in srgb, #f59fc8 55%, transparent) 2px);
    opacity: 0.5;
}

.ps-box:hover .ps-grip {
    opacity: 1;
}

/* the right-click menu */
.patch-menu {
    position: absolute;
    z-index: 6;
    min-width: 180px;
    max-width: 280px;
    padding: 4px;
    border: 1px solid var(--neutral-trim);
    border-radius: 8px;
    background: var(--bg-surface);
    box-shadow: 0 8px 24px #0009;
}

.patch-menu[hidden] {
    display: none;
}

.patch-menu-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--neutral-heavy);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

.patch-menu-item:hover:not(:disabled) {
    background: var(--hover, #2a2d2e);
}

.patch-menu-item:disabled {
    color: var(--neutral-medium);
    opacity: 0.6;
    cursor: default;
}

.patch-menu-item kbd {
    font-family: var(--mono-font, ui-monospace, monospace);
    font-size: 0.7rem;
    color: var(--neutral-medium);
}

.patch-menu-note {
    margin: 4px 8px 4px;
    padding-top: 6px;
    border-top: 1px solid var(--neutral-trim);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--neutral-medium);
}

/* the guide's recipes */
.patch-recipes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin: 6px 0;
}

.patch-recipe {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-trim);
    border-radius: 6px;
    background: var(--bg-surface);
}

.patch-recipe b {
    color: var(--neutral-heavy);
}

.patch-recipe code {
    font-family: var(--mono-font, ui-monospace, monospace);
    font-size: 0.75rem;
    color: #79b8ff;
}

.patch-recipe p {
    margin: 0;
    color: var(--neutral-medium);
    font-size: 0.8rem;
}

.patch-recipe button {
    align-self: flex-start;
    margin-top: auto;
}

.ps-empty {
    color: var(--neutral-medium);
}