/**
 * APC App CSS
 *
 * All app-specific component styles: patch editor, expression pad,
 * config windows, nodes, wires, animations, etc.
 *
 * Loaded after system.css and apc-bridge.css.
 */

/* ============================================================
   FONT (legacy path — also available via vendor/system.css)
   ============================================================ */

@font-face {
    font-family: 'ChicagoFLF';
    src: url('fonts/ChicagoFLF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
    /* Colors — Classic Mac OS light mode */
    --ap-bg-primary: #ffffff;
    --ap-bg-secondary: #eeeeee;
    --ap-bg-tertiary: #c0c0c0;
    --ap-text-primary: #000000;
    --ap-text-secondary: #555555;
    --ap-text-muted: #808080;

    /* Accent colors (used inside app content only) */
    --ap-accent-blue: #209cee;
    --ap-accent-green: #92cc41;
    --ap-accent-yellow: #f7d51d;
    --ap-accent-red: #e76e55;
    --ap-accent-purple: #92869b;

    /* Wire colors */
    --ap-wire-audio: #92cc41;
    --ap-wire-mod: #f7d51d;
    --ap-wire-env: #e76e55;
    --ap-wire-lfo: #209cee;
    --ap-wire-control: #92869b;

    /* Window chrome — pure B&W */
    --ap-window-border: #000000;
    --ap-window-shadow-light: #ffffff;
    --ap-window-shadow-dark: #808080;
    --ap-window-titlebar: #c0c0c0;

    /* Per-app theming (defaults, overridden by [data-theme]) */
    --ap-app-accent: #808080;
    --ap-app-titlebar: #c0c0c0;
    --ap-app-tab-active: #000000;

    /* Spacing */
    --ap-spacing-xs: 4px;
    --ap-spacing-sm: 8px;
    --ap-spacing-md: 16px;
    --ap-spacing-lg: 24px;

    /* Fonts — content scale (freely sizable) */
    --ap-font-family: Chicago_12, Chicago, 'ChicagoFLF', system-ui, sans-serif;
    --ap-font-mono: Monaco, monospace;
    --ap-font-size-xs: 16px;
    --ap-font-size-sm: 19px;
    --ap-font-size-md: 23px;
    --ap-font-size-lg: 28px;

    /* Chrome typography — pixel-precise, coupled to window graphics */
    --ap-chrome-font-size: 18px;
    --ap-chrome-title-size: 21px;

    /* Ahab scoped palette */
    --ap-ahab-bg: #1a2a1a;
    --ap-ahab-text: #60d060;
    --ap-ahab-text-dim: #40a040;
    --ap-ahab-border: #2a4a2a;
    --ap-ahab-control-bg: #0a1a0a;
    --ap-ahab-accent: #e8a030;

    /* OLED display palette */
    --ap-display-bg: #000000;
    --ap-display-text: #ffffff;
}

/* ============================================================
   PER-APP THEMES
   ============================================================ */

/* Bartleby / Controller — warm beige */
[data-theme="controller"] {
    --ap-app-accent: #d4a574;
    --ap-app-titlebar: #c0c0c0;
    --ap-app-tab-active: #d4a574;
}

/* Candide / Synth — lilac tinted */
[data-theme="synth"] {
    --ap-app-accent: #b8a0d2;
    --ap-app-titlebar: #d0c5e0;
    --ap-app-tab-active: #000000;
}

/* Tools (Log, Sync, Pad) — neutral */
[data-theme="tool"] {
    --ap-app-accent: #808080;
    --ap-app-titlebar: #c0c0c0;
    --ap-app-tab-active: #808080;
}

/* ============================================================
   BASE RESET & TYPOGRAPHY
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

html, body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    color: var(--ap-text-primary);
    background: var(--ap-bg-primary);
    font-family: var(--ap-font-family);
}

/* ============================================================
   WINDOW CHROME — pure B&W, system.css stripe pattern
   ============================================================ */

.ap-window {
    position: absolute;
    background: var(--ap-bg-primary);
    border: 2px solid var(--ap-window-border);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    min-width: 200px;
    min-height: 150px;
}

.ap-window:not(.ap-window-active) {
    box-shadow: none;
}

/* Title bar — system.css scale (1.5rem height, content-box stripes) */
.ap-window-titlebar {
    flex: none;
    display: flex;
    align-items: center;
    position: relative;
    height: 1.5rem;
    margin: 0.1rem 0;
    padding: 0.2rem 0.1rem;
    border-bottom: 2px solid var(--ap-window-border);
    cursor: move;
    user-select: none;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--ap-bg-primary);
}

.ap-window-active .ap-window-titlebar {
    background: linear-gradient(#000 50%, transparent 50%);
    background-size: 6.67% 13.33%;
    background-clip: content-box;
}

/* Per-app tinting */
[data-theme="synth"] .ap-window-active .ap-window-titlebar {
    background: linear-gradient(#6b4d8a 50%, transparent 50%);
    background-size: 6.67% 13.33%;
    background-clip: content-box;
    background-color: #d0c5e0;
}

[data-theme="controller"] .ap-window-active .ap-window-titlebar {
    background: linear-gradient(#8a6d4d 50%, transparent 50%);
    background-size: 6.67% 13.33%;
    background-clip: content-box;
    background-color: #e8d5c0;
}

[data-theme="tool"] .ap-window-active .ap-window-titlebar {
    background: linear-gradient(#000 50%, transparent 50%);
    background-size: 6.67% 13.33%;
    background-clip: content-box;
}

/* Close box — system.css scale (40px at 50% = 20px rendered) */
.ap-window-close {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    background: var(--ap-bg-primary);
    border: 4px solid var(--ap-window-border);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    margin: 0 0.2rem;
    transform: scale(0.5);
}

.ap-window-close::before,
.ap-window-close::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

.ap-window-close::before {
    background:
        linear-gradient(#000 0%, #000 100%) left center,
        linear-gradient(#000 0%, #000 100%) right center,
        linear-gradient(#000 0%, #000 100%) center top,
        linear-gradient(#000 0%, #000 100%) center bottom;
    background-size: 30% 4px, 30% 4px, 4px 30%, 4px 30%;
    background-repeat: no-repeat;
}

.ap-window-close::after {
    background:
        linear-gradient(#000 0%, #000 100%) left center,
        linear-gradient(#000 0%, #000 100%) right center,
        linear-gradient(#000 0%, #000 100%) center top,
        linear-gradient(#000 0%, #000 100%) center bottom;
    background-size: 22.5% 3.64px, 22.5% 3.64px, 3.64px 22.5%, 3.64px 22.5%;
    background-repeat: no-repeat;
    transform: rotate(45deg) scale(1.1);
}

.ap-window-close:active::before,
.ap-window-close:active::after {
    opacity: 1;
}

/* Stripes container — hidden, stripes come from titlebar background */
.ap-window-stripes {
    flex: 1;
    height: 100%;
}

/* Title text — centered within full window width (absolute, not flex) */
.ap-window-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--ap-font-family);
    font-size: var(--ap-chrome-title-size);
    font-weight: bold;
    line-height: 1;
    color: var(--ap-text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0 0.5em;
    background: var(--ap-bg-primary);
    cursor: default;
    z-index: 1;
}

.ap-window-active .ap-window-title {
    color: var(--ap-text-primary);
    background: var(--ap-bg-primary);
}

/* Per-app title pill tint */
[data-theme="synth"] .ap-window-active .ap-window-title {
    background: #d0c5e0;
}

[data-theme="controller"] .ap-window-active .ap-window-title {
    background: #e8d5c0;
}

/* Info bar — System 7 info pane between title bar and content */
.ap-window-infobar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ap-spacing-xs) var(--ap-spacing-sm);
    background: var(--ap-bg-primary);
    border-bottom: 1.5px solid var(--ap-window-border);
    box-shadow: 0 1.5px 0 var(--ap-bg-primary), 0 3px 0 var(--ap-window-border);
    margin-bottom: 3px;
    font-family: var(--ap-font-family);
    font-size: var(--ap-chrome-font-size);
    color: var(--ap-text-primary);
    user-select: none;
}

.ap-infobar-left,
.ap-infobar-center,
.ap-infobar-right {
    white-space: nowrap;
}

.ap-infobar-center {
    flex: 1;
}

.ap-infobar-left {
    text-align: left;
}

.ap-infobar-center {
    text-align: center;
}

.ap-infobar-right {
    text-align: right;
}

/* Clickable info bar slot (save status on right) */
.ap-window-infobar.clickable .ap-infobar-right:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* Info bar interactive elements */
.ap-infobar-select .ap-select-trigger {
    font-size: var(--ap-chrome-font-size);
}

.ap-infobar-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-spacing-sm);
}

.ap-infobar-count {
    font-size: var(--ap-chrome-font-size);
    color: var(--ap-text-muted);
}

.ap-infobar-btn {
    font-family: var(--ap-font-family);
    font-size: var(--ap-chrome-font-size);
    background: none;
    border: none;
    color: var(--ap-text-primary);
    cursor: pointer;
    padding: 0 var(--ap-spacing-xs);
    text-decoration: underline;
}

.ap-infobar-btn:hover {
    color: var(--ap-text-secondary);
}

/* Content area — DEPRECATED, columns container replaces this */
/* Kept for any legacy references; new windows use .ap-window-columns > .ap-window-col */

/* ---- Column layout ---- */
/* Columns container: flex row that fills the window content area */
.ap-window-columns {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
}

/* Individual column — base styles */
.ap-window-col {
    font-size: var(--ap-font-size-md);
    min-height: 0;
    min-width: 0;
    background: var(--ap-bg-primary);
}

/* Column padding (unless ap-no-padding) */
.ap-window:not(.ap-no-padding) .ap-window-col {
    padding: var(--ap-spacing-md);
}

/* Column separator border */
.ap-col-border-left {
    border-left: 1px solid var(--ap-window-border);
}

/* Column scroll modes — always show tracks (System 7), thumb hidden via JS overflow detection */
.ap-col-scroll-v {
    overflow-y: scroll;
    overflow-x: hidden;
}

.ap-col-scroll-h {
    overflow-x: scroll;
    overflow-y: hidden;
}

.ap-col-scroll-both {
    overflow: scroll;
}

.ap-col-fixed {
    overflow: hidden;
}

/* Flush scrollbars — remove window border where scrollable columns touch edge */
.ap-flush-right  { border-right: none; }
.ap-flush-bottom { border-bottom: none; }

/* Add outer border to scrollbar to replace window frame on that side */
.ap-col-scroll-v::-webkit-scrollbar,
.ap-col-scroll-both::-webkit-scrollbar {
    border-right: 2px solid var(--ap-window-border);
}
.ap-col-scroll-h::-webkit-scrollbar:horizontal,
.ap-col-scroll-both::-webkit-scrollbar:horizontal {
    border-bottom: 2px solid var(--ap-window-border);
}

/* Hide scrollbar thumb when content doesn't overflow (per-column) */
.ap-col-scroll-v:not(.ap-overflows-v)::-webkit-scrollbar-thumb:vertical,
.ap-col-scroll-both:not(.ap-overflows-v)::-webkit-scrollbar-thumb:vertical {
    visibility: hidden;
}

.ap-col-scroll-h:not(.ap-overflows-h)::-webkit-scrollbar-thumb:horizontal,
.ap-col-scroll-both:not(.ap-overflows-h)::-webkit-scrollbar-thumb:horizontal {
    visibility: hidden;
}

/* No padding handled by .ap-window:not(.ap-no-padding) .ap-window-col rule above */

/* Horizontal scrollbar: match arrow SVG dimensions (24x23px) */
::-webkit-scrollbar:horizontal {
    height: 23px;
}

/* system.css uses height for horizontal button size — need width instead */
::-webkit-scrollbar-button:horizontal:start,
::-webkit-scrollbar-button:horizontal:end {
    width: 24px;
}

/* Show grow box SVG in the scrollbar corner (where tracks intersect) */
.ap-col-scroll-both::-webkit-scrollbar-corner {
    background: url("vendor/system.css/icon/grow-box.svg") no-repeat center;
    background-size: 22px 22px;
    background-color: var(--ap-bg-primary);
}

/* Grow box — resize drag handle, always shows SVG */
/* Custom B&W cursors to avoid macOS semi-transparent resize arrows */
.ap-window-resize {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 22px;
    height: 22px;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><polygon points="1,1 5,1 1,5" fill="black"/><polygon points="15,15 11,15 15,11" fill="black"/><line x1="1" y1="5" x2="11" y2="15" stroke="black" stroke-width="1.5"/></svg>') 8 8, nwse-resize;
    background: url("vendor/system.css/icon/grow-box.svg") no-repeat center;
    background-size: 22px 22px;
    background-color: var(--ap-bg-primary);
    display: none;
    z-index: 2;
}

/* Show grow box when resizable (independent of scroll) */
.ap-resizable-v .ap-window-resize,
.ap-resizable-h .ap-window-resize,
.ap-resizable-both .ap-window-resize {
    display: block;
}

/* Vertical-only resize: custom B&W up/down cursor */
.ap-resizable-v .ap-window-resize {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16"><polygon points="5,0 1,5 9,5" fill="black"/><polygon points="5,16 1,11 9,11" fill="black"/><rect x="4" y="5" width="2" height="6" fill="black"/></svg>') 5 8, s-resize;
}

/* Horizontal-only resize: custom B&W left/right cursor */
.ap-resizable-h .ap-window-resize {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="10"><polygon points="0,5 5,1 5,9" fill="black"/><polygon points="16,5 11,1 11,9" fill="black"/><rect x="5" y="4" width="6" height="2" fill="black"/></svg>') 8 5, e-resize;
}

/* ============================================================
   MENU BAR — system.css scale
   ============================================================ */

.ap-menubar {
    height: 28px;
    background: var(--ap-bg-primary);
    border-bottom: 2px solid var(--ap-window-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ap-spacing-sm);
    flex-shrink: 0;
    z-index: 10000;
    box-shadow: none;
    font-family: var(--ap-font-family);
    font-size: var(--ap-chrome-font-size);
}

.ap-menubar-btn {
    font-family: var(--ap-font-family);
    font-size: inherit;
    background: transparent;
    border: none;
    color: var(--ap-text-primary);
    padding: 6px 10px;
    cursor: pointer;
}

.ap-menubar-btn:hover {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
}

.ap-menubar-btn:active {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
}

.ap-menubar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ap-menubar-btn:disabled:hover {
    background: transparent;
    color: var(--ap-text-primary);
}

.ap-menubar-btn.active {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
}

/* Menu dropdown container — stretches full bar height for dropdown positioning */
.ap-menubar-menu {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* Dropdown panel */
.ap-menubar-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: var(--ap-bg-primary);
    border: 2px solid var(--ap-window-border);
    box-shadow: 2px 2px 0 var(--ap-window-border);
    padding: 2px 0;
    z-index: 10001;
    margin-top: 1px;
}

.ap-menubar-dropdown-item {
    display: block;
    width: 100%;
    position: relative;
    font-family: var(--ap-font-family);
    font-size: inherit;
    background: transparent;
    border: none;
    color: var(--ap-text-primary);
    padding: var(--ap-spacing-xs) var(--ap-spacing-md);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.ap-menubar-dropdown-item:hover {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
}

.ap-menubar-dropdown-item.checked::before {
    content: "✓";
    position: absolute;
    left: var(--ap-spacing-xs);
}

.ap-menubar-dropdown-separator {
    height: 0;
    border-top: 1px solid var(--ap-window-border);
    margin: 2px 0;
}

/* ============================================================
   CUSTOM SELECT — APSelect dropdown component
   ============================================================ */

.ap-select {
    position: relative;
    display: inline-block;
}

.ap-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ap-spacing-sm);
    width: 100%;
    font-family: var(--ap-font-family);
    font-size: inherit;
    background: var(--ap-bg-primary);
    color: var(--ap-text-primary);
    border: 1px solid var(--ap-window-border);
    padding: 1px var(--ap-spacing-xs);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.ap-select-trigger::after {
    content: "\25BE";
}

.ap-select.disabled .ap-select-trigger {
    opacity: 0.4;
    cursor: default;
}

.ap-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    background: var(--ap-bg-primary);
    border: 2px solid var(--ap-window-border);
    box-shadow: 2px 2px 0 var(--ap-window-border);
    padding: 2px 0;
    z-index: 10001;
    margin-top: 1px;
}

.ap-select-item {
    position: relative;
    display: block;
    width: 100%;
    font-family: var(--ap-font-family);
    font-size: inherit;
    background: transparent;
    color: var(--ap-text-primary);
    padding: var(--ap-spacing-xs) var(--ap-spacing-md) var(--ap-spacing-xs) var(--ap-spacing-lg);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.ap-select-item:hover {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
}

.ap-select-item.selected::before {
    content: "\2713";
    position: absolute;
    left: var(--ap-spacing-xs);
}

/* Hidden sizer — measures widest option off-screen */
.ap-select-sizer {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    z-index: -1;
}

/* ============================================================
   BUTTONS — system.css SVG border-image
   ============================================================ */

.ap-btn {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-md);
    padding: var(--ap-spacing-xs) var(--ap-spacing-md);
    min-width: 59px;
    min-height: 20px;
    background: var(--ap-bg-primary);
    color: var(--ap-text-primary);
    border-style: solid;
    border-width: 5.5px;
    border-image: url("vendor/system.css/icon/button.svg") 30 stretch;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

.ap-btn:hover {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
}

.ap-btn:active {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
    border-radius: 0;
    box-shadow: none;
}

.ap-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ap-btn:disabled:hover {
    background: var(--ap-bg-primary);
    color: var(--ap-text-primary);
}

/* ============================================================
   TABS — system.css scale
   ============================================================ */

.ap-device-app-tabs {
    display: flex;
    gap: 0;
    background: var(--ap-bg-primary);
    padding: 0 var(--ap-spacing-sm);
    flex-shrink: 0;
    border-bottom: 1px solid var(--ap-window-border);
}

.ap-device-tab {
    padding: 6px var(--ap-spacing-md);
    font-family: var(--ap-font-family);
    font-size: var(--ap-chrome-font-size);
    color: var(--ap-text-muted);
    background: var(--ap-bg-secondary);
    border: 1px solid var(--ap-window-border);
    border-bottom: none;
    cursor: pointer;
    margin-top: var(--ap-spacing-xs);
    position: relative;
    top: 1px;
    clip-path: polygon(
        2px 0, calc(100% - 2px) 0,
        100% 2px, 100% 100%,
        0 100%, 0 2px
    );
}

.ap-device-tab:hover {
    color: var(--ap-text-primary);
    background: #f0f0f0;
}

.ap-device-tab.active {
    color: var(--ap-text-primary);
    font-weight: bold;
    background: var(--ap-bg-primary);
    border-bottom: 1px solid var(--ap-bg-primary);
    border-top: 1px solid var(--ap-window-border);
    border-left: 1px solid var(--ap-window-border);
    border-right: 1px solid var(--ap-window-border);
}

/* ============================================================
   DIALOGS
   ============================================================ */

.ap-confirm-dialog {
    background: var(--ap-bg-primary);
    border: 2px solid var(--ap-window-border);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    min-width: 300px;
    max-width: 450px;
}

.ap-json-modal {
    width: 720px;
    max-width: 90vw;
    max-height: 80vh;
    background: var(--ap-bg-primary);
    border: 2px solid var(--ap-window-border);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.ap-json-modal-content {
    flex: 1;
    overflow: auto;
    padding: var(--ap-spacing-sm);
    font-family: var(--ap-font-mono);
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* ============================================================
   FORMS — app-specific controls (system.css handles base inputs)
   ============================================================ */

.ap-input {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-lg);
    padding: var(--ap-spacing-xs) 6px;
    background: var(--ap-bg-primary);
    color: var(--ap-text-primary);
    border: 1.5px solid var(--ap-window-border);
    box-shadow: none;
}

.ap-input:focus {
    outline: none;
    border-color: var(--ap-window-border);
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.ap-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

/* ============================================================
   MENU BAR — app-specific elements (LEDs, device names)
   ============================================================ */

.ap-menubar-left {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ap-menubar-app-name {
    font-family: var(--ap-font-family);
    font-size: inherit;
    font-weight: bold;
    color: var(--ap-text-primary);
    padding: 6px 10px;
    margin-right: var(--ap-spacing-xs);
}

.ap-menubar-right {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-md);
}

.ap-menubar-device {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-xs);
}

.ap-menubar-led {
    width: var(--ap-spacing-sm);
    height: var(--ap-spacing-sm);
    background: var(--ap-bg-primary);
    border: 1.5px solid var(--ap-window-border);
}

.ap-menubar-led.connected {
    background: var(--ap-text-primary);
}

.ap-menubar-device-name {
    font-family: var(--ap-font-family);
    font-size: inherit;
    color: var(--ap-text-primary);
}

.ap-menubar-linked {
    font-family: var(--ap-font-family);
    font-size: inherit;
    color: var(--ap-text-primary);
    font-weight: bold;
    border: 1.5px solid var(--ap-window-border);
    padding: 0 6px;
}

/* ============================================================
   DESKTOP — System 7 style icon desktop
   ============================================================ */

.ap-desktop {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: repeating-conic-gradient(
        var(--ap-text-primary) 0% 25%,
        var(--ap-bg-primary) 25% 50%
    ) 0 0 / 2px 2px;
}

.ap-desktop-icons {
    position: absolute;
    top: var(--ap-spacing-md);
    right: var(--ap-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--ap-spacing-sm);
    z-index: 1;
}

.ap-desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ap-spacing-xs);
    cursor: pointer;
    padding: var(--ap-spacing-xs);
    width: 72px;
    user-select: none;
}

.ap-desktop-icon-image {
    width: 48px;
    height: 48px;
    background: var(--ap-bg-primary);
    border: 2px solid var(--ap-window-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--ap-text-primary);
}

.ap-desktop-icon-synth .ap-desktop-icon-image {
    border-color: var(--ap-window-border);
}

.ap-desktop-icon-controller .ap-desktop-icon-image {
    border-color: var(--ap-window-border);
}

.ap-desktop-icon-tool .ap-desktop-icon-image {
    border-color: var(--ap-window-border);
}

.ap-desktop-icon-label {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-primary);
    text-align: center;
    word-break: break-word;
    line-height: 1.3;
    text-shadow: 0 0 2px var(--ap-bg-primary), 0 0 2px var(--ap-bg-primary);
}

.ap-desktop-icon.selected .ap-desktop-icon-image {
    box-shadow: 0 0 0 2px var(--ap-window-border);
}

.ap-desktop-icon.selected .ap-desktop-icon-label {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
    text-shadow: none;
}

.ap-desktop-icon:active .ap-desktop-icon-image {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
}

/* ============================================================
   WORKSPACE — Where windows live
   ============================================================ */

#workspace {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* ============================================================
   DEVICE APP WINDOW (Tabbed Views)
   ============================================================ */

.ap-device-app {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ap-device-app-content {
    flex: 1;
    overflow: hidden;
    background: var(--ap-bg-primary);
}

/* Override negative margins when patch editor is embedded as tab */
.ap-device-app-content .ap-patch-editor {
    margin: 0;
}

.ap-device-app-content .ap-firmware-window {
    padding: var(--ap-spacing-md);
}

.ap-device-app-content .ap-language-window {
    padding: var(--ap-spacing-md);
}

/* ============================================================
   TABS — generic tab buttons
   ============================================================ */

.ap-tab {
    font-family: var(--ap-font-family);
    font-size: var(--ap-chrome-font-size);
    padding: var(--ap-spacing-xs) var(--ap-spacing-sm);
    background: var(--ap-bg-secondary);
    color: var(--ap-text-primary);
    border: 2px solid var(--ap-window-border);
    cursor: pointer;
}

.ap-tab:hover {
    background: var(--ap-bg-tertiary);
}

.ap-tab.active {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
}

/* ============================================================
   TABS — generic tab content
   ============================================================ */

.ap-tab-content {
    display: none;
    padding: var(--ap-spacing-md);
}

.ap-tab-content.active {
    display: block;
}

/* ============================================================
   BUTTON VARIANTS — colored buttons
   ============================================================ */

.ap-btn-primary {
    background: var(--ap-accent-blue);
    color: var(--ap-bg-primary);
    border-color: var(--ap-accent-blue);
}

.ap-btn-primary:hover {
    background: #1a7cc0; /* darker accent-blue */
}

.ap-btn-success {
    background: var(--ap-accent-green);
    color: var(--ap-text-primary);
    border-color: var(--ap-accent-green);
}

.ap-btn-warning {
    background: var(--ap-accent-yellow);
    color: var(--ap-text-primary);
    border-color: var(--ap-accent-yellow);
}

.ap-btn-danger {
    background: var(--ap-accent-red);
    color: var(--ap-bg-primary);
    border-color: var(--ap-accent-red);
}

.ap-btn-secondary {
    background: var(--ap-bg-secondary);
    color: var(--ap-text-primary);
    border-color: var(--ap-window-border);
}

.ap-btn-secondary:hover {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
}

.ap-btn-small {
    padding: 2px var(--ap-spacing-sm);
    font-size: var(--ap-font-size-sm);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.ap-text-muted {
    color: var(--ap-text-muted);
}

.ap-text-success {
    color: var(--ap-accent-green);
}

.ap-text-warning {
    color: var(--ap-accent-yellow);
}

.ap-text-danger {
    color: var(--ap-accent-red);
}

.ap-mt-sm { margin-top: var(--ap-spacing-sm); }
.ap-mt-md { margin-top: var(--ap-spacing-md); }
.ap-mb-sm { margin-bottom: var(--ap-spacing-sm); }
.ap-mb-md { margin-bottom: var(--ap-spacing-md); }

/* ============================================================
   BARTLEBY CONFIG WINDOW
   ============================================================ */

.ap-bartleby-config {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ap-bartleby-content {
    flex: 1;
}

.ap-bartleby-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ap-text-muted);
}

/* Curves Tab */
.ap-curves-tab {
    display: flex;
    flex-direction: column;
    gap: var(--ap-spacing-sm);
    padding: var(--ap-spacing-sm);
}

.ap-curve-editor {
    background: var(--ap-bg-primary);
    padding: var(--ap-spacing-sm);
    border: 2px solid var(--ap-window-border);
}

.ap-curve-label {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-lg);
    color: var(--ap-text-primary);
    margin-bottom: var(--ap-spacing-sm);
}

.ap-curve-body {
    display: flex;
    flex-direction: row;
    gap: var(--ap-spacing-sm);
    align-items: center;
}

.ap-curve-canvas {
    display: block;
    flex-shrink: 0;
}

.ap-curve-sliders {
    display: flex;
    flex-direction: column;
    gap: var(--ap-spacing-sm);
    flex: 1;
    min-width: 0;
}

.ap-curve-slider {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-sm);
}

.ap-curve-slider-label {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-lg);
    color: var(--ap-text-primary);
    width: 70px;
    flex-shrink: 0;
}

.ap-curve-value {
    font-family: var(--ap-font-mono);
    font-size: var(--ap-font-size-lg);
    width: 36px;
    text-align: right;
    color: var(--ap-text-primary);
    flex-shrink: 0;
}

/* System 7 range sliders — SVG border-image technique (matches system.css buttons) */
.ap-curve-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 80px;
    height: 24px;
    background: transparent;
    border: none !important;
    border-image: none !important;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.ap-curve-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 20px;
    border-style: solid;
    border-width: 4px;
    border-image: url("vendor/system.css/icon/slider-track.svg") 4 stretch;
    /* Dithered checkerboard fill — same technique as system.css scrollbar tracks */
    background: linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000), linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000);
    background-color: #ffffff;
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}

.ap-curve-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 30px;
    border: none;
    background: url("vendor/system.css/icon/slider-thumb.svg") no-repeat center;
    background-size: 18px 30px;
    margin-top: -9px;
    cursor: pointer;
}

.ap-curve-slider input[type="range"]:active::-webkit-slider-thumb {
    background-image: url("vendor/system.css/icon/slider-thumb-active.svg");
}

.ap-curve-slider input[type="range"]::-moz-range-track {
    height: 20px;
    border-style: solid;
    border-width: 4px;
    border-image: url("vendor/system.css/icon/slider-track.svg") 4 stretch;
    background: linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000), linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000);
    background-color: #ffffff;
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}

.ap-curve-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 30px;
    border: none;
    border-radius: 0;
    background: url("vendor/system.css/icon/slider-thumb.svg") no-repeat center;
    background-size: 18px 30px;
    cursor: pointer;
}

.ap-curve-slider input[type="range"]:active::-moz-range-thumb {
    background-image: url("vendor/system.css/icon/slider-thumb-active.svg");
}

/* Dials Panel — hardware layout */
.ap-dials-panel {
    display: flex;
    align-items: flex-start;
    gap: var(--ap-spacing-md);
    padding: var(--ap-spacing-sm);
    height: 100%;
}

/* OLED Panel — mimics SSD1306 128x64 display */
.ap-oled-panel {
    background: var(--ap-display-bg);
    border: 2px solid var(--ap-display-bg);
    flex-shrink: 0;
    font-family: monospace;
    color: var(--ap-display-text);
    font-size: 9px;
    line-height: 1.2;
    image-rendering: pixelated;
    transform: scale(1.15);
    transform-origin: top left;
}

.ap-oled-status {
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--ap-spacing-xs);
    padding: var(--ap-spacing-xs);
}

.ap-oled-title {
    font-size: var(--ap-font-size-sm);
    font-weight: bold;
    letter-spacing: 1px;
}

.ap-oled-line {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-display-text);
}

.ap-oled-control {
    width: 120px;
    height: 80px;
    padding: 2px;
}

.ap-oled-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    gap: 1px;
}

.ap-oled-corner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px 3px;
    overflow: hidden;
}

.ap-oled-corner.inactive {
    opacity: 0.3;
}

.ap-oled-label {
    font-size: var(--ap-font-size-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.ap-oled-bar {
    height: 3px;
    border: 1px solid var(--ap-display-text);
    margin-top: 2px;
    box-sizing: content-box;
}

.ap-oled-bar-fill {
    height: 100%;
    background: var(--ap-display-text);
    transition: width 50ms ease-out;
}

.ap-oled-value-text {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-display-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    margin-top: 1px;
    line-height: 1;
}

/* Pot Group — OLED + cluster side by side */
.ap-pot-group {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-shrink: 0;
}

/* Pot Cluster — 2x2 grid of knobs */
.ap-pot-cluster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--ap-spacing-sm);
}

/* Pot Knob — circle placeholder */
.ap-pot-knob {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ap-pot-knob.inactive {
    opacity: 0.35;
}

.ap-pot-knob-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--ap-window-border);
    background: var(--ap-bg-primary);
    position: relative;
    overflow: hidden;
}

.ap-pot-knob-tick {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 2px;
    height: 12px;
    background: var(--ap-text-primary);
    transform-origin: center bottom;
    margin-left: -1px;
}

.ap-pot-knob-label {
    font-size: var(--ap-font-size-xs);
    font-family: var(--ap-font-family);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 42px;
}

/* Pedal Tab */
.ap-pedal-tab h3,
.ap-screen-tab h3 {
    font-size: var(--ap-font-size-sm);
    margin-bottom: var(--ap-spacing-sm);
    color: var(--ap-accent-yellow);
}

/* ============================================================
   PATCH EDITOR WINDOW
   ============================================================ */

.ap-patch-editor {
    display: flex;
    height: 100%;
    gap: 2px;
    background: var(--ap-bg-tertiary);
    margin: calc(-1 * var(--ap-spacing-md));
}

/* Patches List */
.ap-patches-list {
    width: 140px;
    background: var(--ap-bg-primary);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.ap-patches-header,
.ap-drawer-header {
    padding: var(--ap-spacing-sm);
    background: var(--ap-bg-tertiary);
    font-size: var(--ap-font-size-xs);
    color: var(--ap-accent-green);
    text-align: center;
}

.ap-patches-scroll {
    flex: 1;
    overflow-y: auto;
}

.ap-patch-item {
    padding: var(--ap-spacing-sm);
    font-size: var(--ap-font-size-xs);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--ap-bg-tertiary);
}

.ap-patch-item:hover {
    background: var(--ap-bg-tertiary);
}

.ap-patch-item.selected {
    background: var(--ap-accent-blue);
    color: var(--ap-bg-primary);
}

.ap-patch-item.dragging {
    opacity: 0.5;
}

.ap-patch-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-patch-name-input {
    flex: 1;
    font-size: var(--ap-font-size-xs);
    padding: 2px 4px;
}

.ap-patch-actions {
    display: flex;
    gap: 2px;
}

.ap-patch-action {
    width: 16px;
    height: 16px;
    font-size: var(--ap-font-size-xs);
    padding: 0;
    background: transparent;
    border: 1px solid var(--ap-text-muted);
    color: var(--ap-text-muted);
    cursor: pointer;
}

.ap-patch-action:hover {
    background: var(--ap-bg-tertiary);
    color: var(--ap-text-primary);
}

.ap-patch-delete:hover {
    background: var(--ap-accent-red);
    border-color: var(--ap-accent-red);
}

.ap-patches-empty {
    padding: var(--ap-spacing-md);
    text-align: center;
    color: var(--ap-text-muted);
    font-size: var(--ap-font-size-xs);
}

.ap-patches-new {
    margin: var(--ap-spacing-sm);
    font-size: var(--ap-font-size-xs);
}

/* Module Drawer */
.ap-module-drawer {
    width: 100px;
    background: var(--ap-bg-primary);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.ap-drawer-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--ap-spacing-xs);
}

.ap-drawer-section {
    margin-bottom: var(--ap-spacing-sm);
}

.ap-drawer-section-title {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-muted);
    padding: var(--ap-spacing-xs) 0;
    border-bottom: 1px solid var(--ap-bg-tertiary);
    margin-bottom: var(--ap-spacing-xs);
}

.ap-drawer-module {
    padding: var(--ap-spacing-xs) var(--ap-spacing-sm);
    font-size: var(--ap-font-size-xs);
    background: var(--ap-bg-secondary);
    border: 2px solid var(--ap-bg-tertiary);
    margin-bottom: 2px;
    cursor: grab;
    text-align: center;
}

.ap-drawer-module:hover {
    background: var(--ap-bg-tertiary);
    border-color: var(--ap-accent-blue);
}

.ap-drawer-module:active {
    cursor: grabbing;
}

.ap-drawer-footer {
    padding: var(--ap-spacing-xs);
    border-top: 2px solid var(--ap-bg-tertiary);
}

/* Node Workspace */
.ap-node-workspace {
    flex: 1;
    background: var(--ap-bg-primary);
    position: relative;
    overflow: scroll;
}

.ap-node-workspace.drag-over {
    background-color: rgba(32, 156, 238, 0.1);
    outline: 2px dashed var(--ap-accent-blue);
    outline-offset: -4px;
}

.ap-node-workspace.panning {
    cursor: grabbing;
}

.ap-pan-container {
    position: relative;
    min-width: calc(100% + 200px);
    min-height: calc(100% + 200px);
    background:
        linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
    background-size: var(--ap-spacing-md) var(--ap-spacing-md);
}

/* Scrollbar corner — blank (window resize handle overlaps this area) */
.ap-node-workspace::-webkit-scrollbar-corner {
    background: var(--ap-bg-primary);
}

.ap-workspace-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ap-text-muted);
}

/* ============================================================
   PORTS & WIRES — shared primitives for patch editor + routing
   ============================================================ */

/* Port — square connection point on a node or device box.
   Base provides size + shape. Context classes add appearance. */
.ap-port {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* Small port variant (param inputs) */
.ap-port-sm {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
}

/* Routing-style ports: hollow with typed color border */
.ap-port.midi {
    border: 2px solid var(--ap-wire-audio);
    background: var(--ap-bg-primary);
    cursor: pointer;
}

.ap-port.config {
    border: 2px solid var(--ap-wire-control);
    background: var(--ap-bg-primary);
    cursor: pointer;
}

.ap-port.midi:hover,   .ap-port.midi.active   { background: var(--ap-wire-audio); }
.ap-port.config:hover, .ap-port.config.active { background: var(--ap-wire-control); }

/* Drop target — whole row highlights during wiring */
.ap-port-row.drop-target {
    cursor: pointer;
}

.ap-port-row.drop-target.midi {
    background: rgba(146, 204, 65, 0.15);
}

.ap-port-row.drop-target.config {
    background: rgba(146, 134, 155, 0.15);
}

.ap-port-row.drop-target.midi:hover {
    background: rgba(146, 204, 65, 0.3);
}

.ap-port-row.drop-target.config:hover {
    background: rgba(146, 134, 155, 0.3);
}

/* Port dot glow when row is a drop target */
.ap-port-row.drop-target .ap-port.midi   { box-shadow: 0 0 4px var(--ap-wire-audio); }
.ap-port-row.drop-target .ap-port.config { box-shadow: 0 0 4px var(--ap-wire-control); }

.ap-port-row.drop-target:hover .ap-port.midi   { background: var(--ap-wire-audio); box-shadow: 0 0 6px var(--ap-wire-audio); }
.ap-port-row.drop-target:hover .ap-port.config { background: var(--ap-wire-control); box-shadow: 0 0 6px var(--ap-wire-control); }

/* Wire layer — absolute SVG overlay, passes clicks through to content.
   Individual wire groups re-enable pointer-events. */
.ap-wire-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Wire group — clickable <g> with invisible hit target + visible wire.
   Structure: <g class="ap-wire-group"><path hit/><path visible/></g> */
.ap-wire-group {
    pointer-events: auto;
    cursor: pointer;
}

.ap-wire-group path {
    transition: stroke-width 0.1s;
}

.ap-wire-group:hover path + path {
    stroke-width: 4;
}

/* Audio wire (single path, non-interactive — topology-fixed) */
.ap-wire {
    transition: stroke 0.1s;
}

/* Dragging/preview wire — animated dash flow */
.ap-wire-drag {
    animation: wireFlow 0.5s linear infinite;
}

@keyframes wireFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 12; }
}

/* Device box — bordered container for a named device with ports.
   Simplified node: no dragging, no header bar. */
.ap-device-box {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-xs);
    padding: var(--ap-spacing-xs) var(--ap-spacing-sm);
    background: var(--ap-bg-primary);
    border: 2px solid var(--ap-window-border);
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-primary);
    white-space: nowrap;
    user-select: none;
}

/* Stacked variant — name on top, ports below */
.ap-device-box.stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: visible;
}

.ap-device-box-name {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: var(--ap-spacing-xs) var(--ap-spacing-sm);
    font-weight: bold;
    background: var(--ap-bg-tertiary);
}

.ap-device-box-ports {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ap-spacing-xs) var(--ap-spacing-sm);
}

/* Port row — port dot + label, port straddles box edge */
.ap-port-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 0;
}

.ap-port-row.right {
    justify-content: flex-end;
}

.ap-port-row.right .ap-port {
    margin-right: -15px;   /* pull port to straddle box border */
    order: 1;              /* port after label */
}

.ap-port-row.left {
    justify-content: flex-start;
}

.ap-port-row.left .ap-port {
    margin-left: -15px;    /* pull port to straddle box border */
    order: -1;             /* port before label */
}

.ap-port-label {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-muted);
    margin: 0 var(--ap-spacing-xs);
}

/* ============================================================
   NODES
   ============================================================ */

.ap-node {
    position: absolute;
    background: var(--ap-bg-primary);
    border: 2px solid var(--ap-window-border);
    min-width: 140px;
    cursor: move;
    user-select: none;
}

.ap-node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ap-accent-green);
    color: var(--ap-text-primary);
    padding: var(--ap-spacing-xs) 0;
    font-size: var(--ap-font-size-xs);
    font-weight: bold;
}

.ap-node-title {
    flex: 1;
    text-align: center;
    padding: 0 var(--ap-spacing-xs);
}

/* Delete button on node header */
.ap-node-delete-btn {
    width: 14px;
    height: 14px;
    font-size: var(--ap-font-size-xs);
    font-family: var(--ap-font-family);
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    margin-left: 2px;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-node-delete-btn:hover {
    opacity: 1;
    background: var(--ap-accent-red);
    border-color: var(--ap-accent-red);
}

.ap-node-audio .ap-node-header {
    background: var(--ap-accent-green);
}

.ap-node-mod .ap-node-header {
    background: var(--ap-accent-yellow);
}

.ap-node-control .ap-node-header {
    background: var(--ap-accent-purple);
}

.ap-node-out .ap-node-header {
    background: var(--ap-text-secondary);
}

.ap-node-body {
    padding: var(--ap-spacing-xs);
    font-size: var(--ap-font-size-xs);
}

.ap-node-param-container {
    display: flex;
    flex-direction: column;
}

.ap-node-param {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-xs);
    padding: 1px 0;
}

.ap-node-param-key {
    flex: 1;
    color: var(--ap-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-node-param-slider {
    flex: 1;
    height: 8px;
    max-width: 50px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--ap-bg-primary);
    border: 1px solid var(--ap-window-border);
    cursor: pointer;
}

.ap-node-param-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 12px;
    background: var(--ap-accent-blue);
    cursor: pointer;
}

.ap-node-param-slider::-moz-range-thumb {
    width: 8px;
    height: 12px;
    background: var(--ap-accent-blue);
    cursor: pointer;
    border: none;
}

.ap-node-param-value {
    text-align: right;
    color: var(--ap-text-primary);
    min-width: 24px;
}

/* Modulation amount sliders on target nodes */
.ap-node-mod-amount {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0 2px 16px;
    font-size: var(--ap-font-size-xs);
    opacity: 0.85;
}

.ap-mod-source-label {
    min-width: 40px;
    font-size: var(--ap-font-size-xs);
    text-transform: uppercase;
}

.ap-mod-amount-mini {
    flex: 1;
    height: 8px;
    max-width: 60px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--ap-bg-primary);
    border: 1px solid var(--ap-window-border);
    cursor: pointer;
}

.ap-mod-amount-mini::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 12px;
    background: var(--ap-accent-yellow);
    cursor: pointer;
}

.ap-mod-amount-mini::-moz-range-thumb {
    width: 8px;
    height: 12px;
    background: var(--ap-accent-yellow);
    cursor: pointer;
    border: none;
}

.ap-mod-amount-value {
    min-width: 24px;
    text-align: right;
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-secondary);
}

/* Node ports — appearance override on .ap-port base (filled black, white border) */
.ap-node-port {
    background: var(--ap-text-primary);
    border: 2px solid var(--ap-bg-primary);
}

/* Header input port (left side) - audio modules only */
.ap-node-port-header-in {
    margin-left: -5px;
    margin-right: 2px;
}

/* Header output port (right side) - all modules */
.ap-node-port-header-out {
    margin-right: -5px;
    margin-left: 2px;
}

/* Param input ports — appearance override on .ap-port-sm base */
.ap-node-port-param-in {
    background: var(--ap-text-secondary);
    border: 1px solid var(--ap-bg-primary);
    margin-right: 4px;
}

/* Context Menu */
.ap-context-menu {
    position: fixed;
    background: var(--ap-bg-primary);
    border: 2px solid var(--ap-window-border);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
    min-width: 200px;
    max-width: 300px;
    z-index: 10001;
}

.ap-context-header {
    background: var(--ap-accent-blue);
    color: var(--ap-bg-primary);
    padding: var(--ap-spacing-sm);
    font-size: var(--ap-font-size-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ap-context-close {
    background: transparent;
    border: none;
    color: var(--ap-bg-primary);
    cursor: pointer;
    font-size: var(--ap-font-size-sm);
}

.ap-context-body {
    padding: var(--ap-spacing-md);
}

/* ============================================================
   WIRING INTERACTION STATES
   ============================================================ */

/* Workspace in wiring mode */
.ap-node-workspace.wiring {
    cursor: crosshair;
}

/* Node being used as wire source */
.ap-node.wiring-source {
    box-shadow: 0 0 12px var(--ap-accent-yellow);
}

/* Node that can receive wire (audio targets) */
.ap-node.wiring-target {
    border-color: var(--ap-accent-yellow);
    cursor: default;
}

/* Parameter drop zone highlight when wiring */
.ap-node.wiring-target .ap-node-param.drop-target {
    background: var(--ap-bg-tertiary);
    cursor: pointer;
}

/* Highlight the param port when drop target */
.ap-node.wiring-target .ap-node-param.drop-target .ap-node-port-param-in {
    background: var(--ap-accent-yellow);
    box-shadow: 0 0 4px var(--ap-accent-yellow);
}

.ap-node.wiring-target .ap-node-param.drop-target:hover {
    background: rgba(247, 213, 29, 0.2);
}

.ap-node.wiring-target .ap-node-param.drop-target:hover .ap-node-port-param-in {
    background: var(--ap-accent-green);
    box-shadow: 0 0 6px var(--ap-accent-green);
}

/* Output port for mod/control nodes */
.ap-node-mod .ap-node-port-header-out,
.ap-node-control .ap-node-port-header-out {
    cursor: crosshair;
    transition: transform 0.1s, background 0.1s;
}

.ap-node-mod .ap-node-port-header-out:hover,
.ap-node-control .ap-node-port-header-out:hover {
    transform: scale(1.3);
    background: var(--ap-accent-yellow);
}

.ap-node-mod .ap-node-port-header-out.active,
.ap-node-control .ap-node-port-header-out.active {
    background: var(--ap-accent-yellow);
    box-shadow: 0 0 8px var(--ap-accent-yellow);
}

/* Modulation wire — state variants (base behavior from .ap-wire-group) */

/* ============================================================
   CONTEXT MENU — Parameter Editing
   ============================================================ */

.ap-context-scroll {
    max-height: 320px;
    overflow-y: auto;
}

.ap-context-section {
    margin-bottom: var(--ap-spacing-md);
}

.ap-context-section:last-child {
    margin-bottom: 0;
}

.ap-context-section-title {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-accent-green);
    border-bottom: 1px solid var(--ap-bg-tertiary);
    padding-bottom: var(--ap-spacing-xs);
    margin-bottom: var(--ap-spacing-sm);
}

.ap-context-hint {
    font-size: var(--ap-font-size-xs);
    text-align: center;
    padding: var(--ap-spacing-md) 0;
}

/* Parameter Control */
.ap-param-control {
    margin-bottom: var(--ap-spacing-sm);
}

.ap-param-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ap-spacing-xs);
}

.ap-param-name {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-secondary);
}

.ap-param-value {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-primary);
    min-width: 30px;
    text-align: right;
}

.ap-param-control .ap-slider {
    width: 100%;
}

/* Modulation Control */
.ap-mod-control {
    margin-bottom: var(--ap-spacing-md);
    padding: var(--ap-spacing-sm);
    background: var(--ap-bg-secondary);
    border: 1px solid var(--ap-bg-tertiary);
}

.ap-mod-param-name {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-accent-yellow);
    margin-bottom: var(--ap-spacing-xs);
}

.ap-mod-sources {
    display: flex;
    flex-direction: column;
    gap: var(--ap-spacing-xs);
}

.ap-mod-source-row {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-sm);
}

.ap-mod-source-toggle {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-xs);
    cursor: pointer;
    min-width: 90px;
}

.ap-mod-source-toggle input {
    width: 12px;
    height: 12px;
}

.ap-mod-source-name {
    font-size: var(--ap-font-size-xs);
}

.ap-mod-amount-slider {
    flex: 1;
    height: 6px;
}

/* Routed Targets (for mod sources) */
.ap-routed-target {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-sm);
    margin-bottom: var(--ap-spacing-xs);
    padding: var(--ap-spacing-xs);
    background: var(--ap-bg-secondary);
}

.ap-target-name {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-secondary);
    min-width: 70px;
}

.ap-target-slider {
    flex: 1;
    height: 6px;
}

.ap-target-amount {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-primary);
    min-width: 25px;
    text-align: right;
}

/* ============================================================
   FIRMWARE WINDOW
   ============================================================ */

.ap-firmware-window {
    text-align: center;
}

.ap-firmware-device {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--ap-spacing-md);
    margin-bottom: var(--ap-spacing-lg);
    padding-bottom: var(--ap-spacing-sm);
    border-bottom: 2px solid var(--ap-bg-tertiary);
}

.ap-firmware-device-name {
    font-size: var(--ap-font-size-md);
    color: var(--ap-accent-green);
}

.ap-firmware-version {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-muted);
}

.ap-firmware-select {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ap-spacing-md);
}

.ap-firmware-file-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ap-spacing-xs);
    padding: var(--ap-spacing-sm);
    background: var(--ap-bg-secondary);
    border: 2px solid var(--ap-bg-tertiary);
}

.ap-firmware-filename {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-primary);
    word-break: break-all;
}

.ap-firmware-filesize {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-muted);
}

.ap-firmware-actions {
    display: flex;
    gap: var(--ap-spacing-sm);
    margin-top: var(--ap-spacing-md);
}

.ap-firmware-progress,
.ap-firmware-complete,
.ap-firmware-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ap-spacing-sm);
}

.ap-firmware-status {
    font-size: var(--ap-font-size-sm);
    color: var(--ap-text-primary);
}

/* Progress Bar */
.ap-progress-bar {
    width: 100%;
    height: 20px;
    background: var(--ap-bg-primary);
    border: 2px solid var(--ap-window-border);
}

.ap-progress-fill {
    height: 100%;
    background: var(--ap-accent-green);
    transition: width 0.3s;
}

/* ============================================================
   LANGUAGE WINDOW
   ============================================================ */

.ap-language-window {
    display: flex;
    flex-direction: column;
}

.ap-language-device {
    text-align: center;
    margin-bottom: var(--ap-spacing-md);
    padding-bottom: var(--ap-spacing-sm);
    border-bottom: 2px solid var(--ap-bg-tertiary);
}

.ap-language-device-name {
    font-size: var(--ap-font-size-md);
    color: var(--ap-accent-green);
}

.ap-language-list {
    display: flex;
    flex-direction: column;
    gap: var(--ap-spacing-xs);
    margin-bottom: var(--ap-spacing-md);
}

.ap-language-option {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-sm);
    padding: var(--ap-spacing-sm);
    background: var(--ap-bg-secondary);
    border: 2px solid var(--ap-bg-tertiary);
    cursor: pointer;
    font-size: var(--ap-font-size-sm);
}

.ap-language-option:hover {
    background: var(--ap-bg-tertiary);
}

.ap-language-option.selected {
    border-color: var(--ap-accent-blue);
    background: var(--ap-bg-tertiary);
}

.ap-language-option input {
    width: 14px;
    height: 14px;
}

.ap-language-name {
    color: var(--ap-text-primary);
}

.ap-language-current {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-muted);
    margin-left: auto;
}

.ap-language-note {
    font-size: var(--ap-font-size-xs);
    text-align: center;
    margin-bottom: var(--ap-spacing-md);
}

.ap-language-actions {
    display: flex;
    justify-content: center;
    gap: var(--ap-spacing-sm);
}

/* ============================================================
   EXPRESSION PAD WINDOW
   ============================================================ */

.ap-expression-pad {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: var(--ap-spacing-sm);
}

.ap-pad-controls {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-md);
    margin-bottom: var(--ap-spacing-md);
    width: 100%;
}

.ap-velocity-control {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-sm);
    flex: 1;
}

.ap-velocity-control span:first-child {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-muted);
}

.ap-velocity-control .ap-slider {
    flex: 1;
}

.ap-velocity-value {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-primary);
    min-width: 25px;
    text-align: right;
}

.ap-mpe-toggle {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-xs);
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-muted);
    cursor: pointer;
}

.ap-mpe-toggle input {
    width: 12px;
    height: 12px;
}

.ap-pad-canvas-container {
    display: flex;
    justify-content: center;
    margin-bottom: var(--ap-spacing-sm);
}

.ap-pad-canvas {
    border: 2px solid var(--ap-window-border);
}

.ap-pad-labels {
    display: flex;
    justify-content: space-between;
    width: 200px;
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-muted);
    margin-bottom: var(--ap-spacing-sm);
}

.ap-pad-note {
    text-align: center;
    font-size: var(--ap-font-size-sm);
    min-height: 24px;
}

.ap-note-playing {
    color: var(--ap-accent-yellow);
    font-weight: bold;
}

.ap-note-waiting {
    color: var(--ap-text-muted);
}

/* ============================================================
   ROUTING WINDOW
   ============================================================ */

.ap-routing-window {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--ap-spacing-sm);
}

.ap-routing-empty {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-muted);
    text-align: center;
    padding: var(--ap-spacing-md);
}

/* Wire-based routing panel */
.ap-routing-panel {
    position: relative;
    display: flex;
    gap: 60px;
    padding: var(--ap-spacing-md) var(--ap-spacing-sm);
    border: 1px solid var(--ap-bg-tertiary);
    background: var(--ap-bg-secondary);
}

.ap-routing-col {
    display: flex;
    flex-direction: column;
    gap: var(--ap-spacing-sm);
    flex: 1;
    z-index: 0;
    min-width: 0;
}

.ap-routing-panel > .ap-wire-layer {
    z-index: 1;
}

.ap-routing-col-label {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-muted);
}

.ap-routing-log {
    flex: 1;
    overflow-y: auto;
    background: var(--ap-bg-secondary);
    border: 1px solid var(--ap-bg-tertiary);
    padding: var(--ap-spacing-sm);
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-xs);
    line-height: 1.6;
}

/* Routing log entry styles (used by RoutingWindow) */
.ap-routing-log-entry {
    color: var(--ap-text-secondary);
}

.ap-routing-log-time {
    color: var(--ap-text-muted);
}

.ap-routing-log-success {
    color: var(--ap-accent-green);
}

.ap-routing-log-error {
    color: var(--ap-accent-red);
}

.ap-routing-log-warning {
    color: var(--ap-accent-yellow);
}

/* ============================================================
   LOG WINDOW
   ============================================================ */

.ap-log-scroll {
    flex: 1;
    overflow: scroll;
    background: var(--ap-bg-primary);
    padding: var(--ap-spacing-xs);
}

.ap-log-empty {
    text-align: center;
    color: var(--ap-text-muted);
    padding: var(--ap-spacing-lg);
    font-size: var(--ap-font-size-xs);
}

.ap-log-entry {
    display: flex;
    gap: var(--ap-spacing-sm);
    padding: var(--ap-spacing-xs);
    font-size: 9px;
    font-family: var(--ap-font-mono);
    border-bottom: 1px solid var(--ap-bg-secondary);
}

.ap-log-entry:hover {
    background: var(--ap-bg-secondary);
}

.ap-log-time {
    color: var(--ap-text-muted);
    white-space: nowrap;
}

.ap-log-message {
    color: var(--ap-text-primary);
    word-break: break-all;
}

.ap-log-success .ap-log-message {
    color: var(--ap-accent-green);
}

.ap-log-error .ap-log-message {
    color: var(--ap-accent-red);
}

.ap-log-warning .ap-log-message {
    color: var(--ap-accent-yellow);
}

.ap-log-info .ap-log-message {
    color: var(--ap-text-secondary);
}

/* Plain text log output */
.ap-log-text {
    margin: 0;
    padding: var(--ap-spacing-sm);
    background: var(--ap-bg-primary);
    color: var(--ap-text-secondary);
    font-family: var(--ap-font-mono);
    font-size: 16px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================================
   SELECTION & DELETE ANIMATIONS
   ============================================================ */

/* Selected node */
.ap-node.selected {
    box-shadow: 0 0 0 2px var(--ap-window-border);
}

.ap-node.selected .ap-node-header {
    background: var(--ap-accent-blue);
}

/* Node delete animation */
@keyframes nodeDelete {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.7;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.ap-node.deleting {
    animation: nodeDelete 0.3s ease-out forwards;
    pointer-events: none;
}

/* Pending node (dropped but not yet wired) */
.ap-node.pending {
    opacity: 0.7;
    animation: nodePending 1s ease-in-out infinite;
}

@keyframes nodePending {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

/* Drawer module that requires drag (mod/control) */
.ap-drawer-module.drag-only {
    cursor: grab;
    opacity: 0.85;
}

.ap-drawer-module.drag-only:hover {
    cursor: grab;
}

/* Selected wire glow */
.ap-mod-wire.selected path {
    filter: drop-shadow(0 0 4px var(--ap-wire-mod));
}

/* Fixed wire (readonly topology) - decorative, non-interactive */
.ap-mod-wire.fixed {
    pointer-events: none;
}

.ap-mod-wire.fixed path {
    opacity: 0.6;
}

/* ============================================================
   CONFIRMATION DIALOG
   ============================================================ */

.ap-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.ap-confirm-header {
    background: var(--ap-accent-red);
    color: var(--ap-bg-primary);
    padding: var(--ap-spacing-sm) var(--ap-spacing-md);
    font-size: var(--ap-font-size-sm);
}

.ap-confirm-body {
    padding: var(--ap-spacing-md);
    color: var(--ap-text-secondary);
    font-size: var(--ap-font-size-xs);
    line-height: 1.6;
    white-space: pre-wrap;
    font-family: var(--ap-font-family);
    margin: 0;
}

.ap-confirm-actions {
    display: flex;
    gap: var(--ap-spacing-sm);
    padding: var(--ap-spacing-md);
    padding-top: 0;
    justify-content: flex-end;
}

/* ============================================================
   WIRING MODE ENHANCEMENTS
   ============================================================ */

/* Valid drop target during wiring */
.ap-node-param.drop-target {
    background: rgba(32, 156, 238, 0.2);
    outline: 1px dashed var(--ap-accent-blue);
    cursor: crosshair;
}

.ap-node-param.drop-target:hover {
    background: rgba(32, 156, 238, 0.4);
}

/* Target of a selected wire */
.ap-node-param.wire-target {
    background: rgba(247, 213, 29, 0.3);
    outline: 2px solid var(--ap-accent-yellow);
}

/* Port hover effect during wiring */
.ap-node-workspace.wiring .ap-node-port-param-in {
    background: var(--ap-accent-blue);
    transform: scale(1.5);
}

/* ============================================================
   LOADING OVERLAY
   ============================================================ */

/* Container for workspace + loading overlay */
.ap-workspace-container {
    position: relative;
    flex: 1;
    display: flex;
    min-width: 0;
}

/* Loading overlay - positioned over workspace */
.ap-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.ap-loading-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ap-loading-content {
    text-align: center;
}

.ap-loading-text {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-lg);
    color: var(--ap-text-primary);
    letter-spacing: 2px;
    display: inline-block;
    min-width: 180px;
    text-align: left;
}

/* Patch list item disabled state during loading */
.ap-patch-item.loading-disabled {
    cursor: wait;
    opacity: 0.6;
}

.ap-patch-item.loading-disabled:hover {
    background: transparent;
}

.ap-patch-item.loading-disabled.selected {
    opacity: 1;
}

/* ============================================================
   PAD OUTPUT SELECTOR
   ============================================================ */

.ap-pad-output-select {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-xs);
    margin-bottom: var(--ap-spacing-sm);
    width: 100%;
}

.ap-pad-output-label {
    font-size: var(--ap-font-size-xs);
    color: var(--ap-text-muted);
    flex-shrink: 0;
}

.ap-pad-output-btn {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-xs);
    padding: 2px var(--ap-spacing-sm);
    background: var(--ap-bg-secondary);
    border: 1px solid var(--ap-window-border);
    color: var(--ap-text-secondary);
    cursor: pointer;
}

.ap-pad-output-btn:hover {
    background: var(--ap-bg-tertiary);
    color: var(--ap-text-primary);
}

.ap-pad-output-btn.active {
    background: var(--ap-accent-blue);
    border-color: var(--ap-accent-blue);
    color: var(--ap-bg-primary);
}

/* ============================================================
   PAD MIDI MONITOR
   ============================================================ */

.ap-pad-monitor {
    width: 100%;
    flex: 1;
    min-height: 60px;
    overflow-y: auto;
    background: var(--ap-bg-secondary);
    border: 1px solid var(--ap-bg-tertiary);
    padding: var(--ap-spacing-xs);
    margin-top: var(--ap-spacing-sm);
    font-size: var(--ap-font-size-xs);
    line-height: 1.5;
}

.ap-monitor-entry {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-monitor-source {
    font-weight: bold;
}

.ap-monitor-desc {
    color: var(--ap-text-secondary);
}

/* ============================================================
   VELOCITY CURVE PREVIEW (in VELOCITY node)
   ============================================================ */

.ap-node-velocity-viz {
    margin: 2px 4px 4px 4px;
}

.ap-velocity-preview-canvas {
    display: block;
    width: 120px;
    height: 60px;
}

/* ============================================================
   ENVELOPE CURVE VISUALIZATION
   ============================================================ */

.ap-node-envelope-viz {
    position: relative;
    height: 40px;
    margin: 0 var(--ap-spacing-xs) var(--ap-spacing-xs) var(--ap-spacing-xs);
    background: var(--ap-bg-primary);
    border: 1px solid var(--ap-window-border);
}

.ap-envelope-curve {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
   WAVE SELECTOR
   ============================================================ */

.ap-wave-selector {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.ap-wave-options {
    display: flex;
    gap: 2px;
}

.ap-wave-btn {
    width: 18px;
    height: 18px;
    padding: 2px;
    background: var(--ap-bg-primary);
    border: 1px solid var(--ap-window-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ap-text-secondary);
    transition: all 0.1s;
}

.ap-wave-btn:hover {
    background: var(--ap-bg-tertiary);
    border-color: var(--ap-accent-blue);
    color: var(--ap-text-primary);
}

.ap-wave-btn.active {
    background: var(--ap-accent-blue);
    border-color: var(--ap-accent-blue);
    color: var(--ap-bg-primary);
}

.ap-wave-icon {
    width: 14px;
    height: 14px;
}

/* ============================================================
   CLICK-TO-EDIT VALUES
   ============================================================ */

.ap-node-param-value.clickable {
    cursor: pointer;
    padding: 1px 3px;
    transition: background 0.1s;
}

.ap-node-param-value.clickable:hover {
    background: var(--ap-bg-secondary);
    color: var(--ap-accent-blue);
}

.ap-node-param-edit {
    width: 36px;
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-xs);
    padding: 1px 3px;
    background: var(--ap-bg-primary);
    border: 1px solid var(--ap-window-border);
    color: var(--ap-text-primary);
    text-align: right;
    outline: none;
}

.ap-node-param-edit:focus {
    box-shadow: 0 0 4px var(--ap-accent-blue);
}

/* ============================================================
   PRIORITY BADGE
   ============================================================ */

.ap-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    margin-right: var(--ap-spacing-xs);
    font-size: var(--ap-font-size-xs);
    font-weight: 600;
    background: var(--ap-bg-tertiary);
    border: 1px solid var(--ap-window-border);
    cursor: pointer;
    color: var(--ap-text-secondary);
    flex-shrink: 0;
}

.ap-priority-badge:hover {
    background: var(--ap-bg-secondary);
    color: var(--ap-text-primary);
    border-color: var(--ap-window-border);
}

.ap-priority-edit {
    width: 24px;
    height: 14px;
    padding: 0 2px;
    margin-right: var(--ap-spacing-xs);
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-xs);
    font-weight: 600;
    text-align: center;
    background: var(--ap-bg-primary);
    border: 1px solid var(--ap-window-border);
    color: var(--ap-text-primary);
    outline: none;
    flex-shrink: 0;
}

.ap-priority-edit:focus {
    box-shadow: 0 0 4px var(--ap-accent-blue);
}

.ap-priority-edit.error {
    border-color: var(--ap-accent-red);
    background: rgba(231, 110, 85, 0.15);
}

/* ============================================================
   NODE LAYOUT VARIANTS
   ============================================================ */

/* Envelope module layout */
.ap-node-envelope {
    min-width: 160px;
}

.ap-node-envelope .ap-node-body {
    padding: var(--ap-spacing-xs);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 4px;
}

/* Envelope curve spans both columns */
.ap-node-envelope .ap-node-envelope-viz {
    grid-column: 1 / -1;
}

/* Param containers fit in grid cells */
.ap-node-envelope .ap-node-param-container {
    display: flex;
    flex-direction: column;
}

/* Mod amount rows span both columns */
.ap-node-envelope .ap-node-mod-amount {
    grid-column: 1 / -1;
}

/* Oscillator module layout */
.ap-node-oscillator {
    min-width: 150px;
}

/* LFO module layout */
.ap-node-lfo {
    min-width: 150px;
}

/* ============================================================
   AHAB CIRCULAR SEQUENCER
   ============================================================ */

.ap-ahab {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: var(--ap-spacing-sm);
    gap: var(--ap-spacing-sm);
    background: var(--ap-bg-secondary);
}

/* --- Status Screen --- */
.ap-ahab-screen {
    width: 100%;
    max-width: 400px;
    background: var(--ap-ahab-bg);
    border: 2px solid var(--ap-window-border);
    border-radius: 3px;
    padding: var(--ap-spacing-sm);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.5);
}

.ap-ahab-screen-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
}

.ap-ahab-screen-label {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-sm);
    color: var(--ap-ahab-text-dim);
    min-width: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ap-ahab-screen-select {
    flex: 1;
}

.ap-ahab-screen-select .ap-select-trigger {
    width: 100%;
    font-size: 11px;
    color: var(--ap-ahab-text);
    background: var(--ap-ahab-control-bg);
    border: 1px solid var(--ap-ahab-border);
}

.ap-ahab-screen-select .ap-select-dropdown {
    background: var(--ap-ahab-control-bg);
    border-color: var(--ap-ahab-border);
}

.ap-ahab-screen-select .ap-select-item {
    color: var(--ap-ahab-text);
}

.ap-ahab-screen-select .ap-select-item:hover {
    background: var(--ap-ahab-text);
    color: var(--ap-ahab-control-bg);
}

.ap-ahab-screen-btn {
    width: 22px;
    height: 22px;
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-lg);
    color: var(--ap-ahab-text);
    background: var(--ap-ahab-control-bg);
    border: 1px solid var(--ap-ahab-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.ap-ahab-screen-btn:hover {
    background: #1a3a1a;
}

.ap-ahab-screen-divider {
    height: 1px;
    background: var(--ap-ahab-border);
    margin: var(--ap-spacing-xs) 0;
}

.ap-ahab-screen-detail {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-sm);
    color: var(--ap-ahab-text);
    gap: var(--ap-spacing-sm);
    justify-content: space-between;
}

/* --- Transport --- */
.ap-ahab-transport {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-sm);
}

.ap-ahab-play {
    width: 48px;
    height: 32px;
    font-size: 16px;
}

.ap-ahab-play.active {
    background: var(--ap-text-primary);
    color: var(--ap-bg-primary);
}

.ap-ahab-tempo {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-xs);
}

.ap-ahab-tempo-label {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-sm);
    color: var(--ap-text-muted);
}

.ap-ahab-tempo-input {
    width: 48px;
    text-align: center;
    font-size: 13px;
    padding: 2px 4px;
}

.ap-ahab-tempo-input::-webkit-inner-spin-button,
.ap-ahab-tempo-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ap-ahab-tempo-input[type=number] {
    -moz-appearance: textfield;
}

/* --- Wheel --- */
.ap-ahab-wheel-container {
    position: relative;
    flex-shrink: 0;
}

.ap-ahab-wheel {
    display: block;
    cursor: grab;
}

.ap-ahab-wheel:active {
    cursor: grabbing;
}

.ap-ahab-step-dot {
    transition: fill 0.08s, stroke 0.08s;
}

.ap-ahab-step-dot:hover {
    filter: brightness(1.2);
}

/* --- Per-Step Controls --- */
.ap-ahab-controls {
    display: flex;
    align-items: flex-start;
    gap: var(--ap-spacing-lg);
    padding: var(--ap-spacing-sm) 0;
}

.ap-ahab-control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ap-ahab-control-label {
    font-family: var(--ap-font-family);
    font-size: 9px;
    color: var(--ap-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Encoder */
.ap-ahab-encoder {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: ns-resize;
    user-select: none;
}

.ap-ahab-encoder-label {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-md);
    color: var(--ap-text-primary);
    margin-top: 2px;
}

.ap-ahab-encoder-sublabel {
    font-family: var(--ap-font-family);
    font-size: 9px;
    color: var(--ap-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Note toggle */
.ap-ahab-note-toggle {
    font-size: var(--ap-font-size-sm);
    min-width: 48px;
    padding: 2px 6px;
}

.ap-ahab-note-toggle.active {
    background: var(--ap-app-accent);
    border-color: #b08050;
}

/* Velocity Pad */
.ap-ahab-pad {
    position: relative;
    background: #2a2a2a;
    border: 2px solid var(--ap-text-secondary);
    border-radius: 3px;
    cursor: ns-resize;
    overflow: hidden;
    user-select: none;
}

.ap-ahab-pad-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ap-app-accent);
    transition: height 0.05s;
}

.ap-ahab-pad-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-sm);
    color: var(--ap-bg-primary);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
}

/* XY Joystick */
.ap-ahab-joystick {
    position: relative;
    background: #2a2a2a;
    border: 2px solid var(--ap-text-secondary);
    border-radius: 3px;
    cursor: crosshair;
    overflow: hidden;
    user-select: none;
}

.ap-ahab-joystick-crosshair-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #444;
    pointer-events: none;
}

.ap-ahab-joystick-crosshair-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #444;
    pointer-events: none;
}

.ap-ahab-joystick-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ap-ahab-accent);
    border: 1px solid var(--ap-bg-primary);
    pointer-events: none;
}

.ap-ahab-joystick-label {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-xs);
    color: #666;
    pointer-events: none;
}

/* Chord Controls */
.ap-ahab-chord-select .ap-select-trigger {
    width: 72px;
    font-size: var(--ap-font-size-sm);
    border: 2px solid var(--ap-window-border);
    padding: 2px var(--ap-spacing-xs);
    text-align: center;
}

.ap-ahab-chord-select .ap-select-item {
    text-align: center;
}

/* ============================================================
   STYLE GUIDE — uses system classes + inline layout only
   ============================================================ */

.ap-style-guide {
    padding: var(--ap-spacing-md);
    font-family: var(--ap-font-family);
}