/* === Font Faces (array-box fonts with corrected paths) === */
@font-face {
    font-family: 'BQN';
    src: url('array-box/fonts/BQN386.ttf') format('truetype');
}
@font-face {
    font-family: 'Uiua';
    src: url('array-box/fonts/Uiua386.ttf') format('truetype');
}
@font-face {
    font-family: 'APL';
    src: url('array-box/fonts/APL387.ttf') format('truetype');
}
@font-face {
    font-family: 'TinyAPL';
    src: url('array-box/fonts/APL387.ttf') format('truetype');
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('array-box/fonts/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('array-box/fonts/JetBrainsMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* === Dracula palette (from array-box theme.css) === */
:root {
    --dracula-cyan:    #8BE9FD;
    --dracula-green:   #50FA7B;
    --dracula-yellow:  #F1FA8C;
    --dracula-pink:    #FF79C6;
    --dracula-purple:  #BD93F9;
    --dracula-red:     #FF5555;
    --dracula-comment: #6272A4;
    --dracula-fg:      #F8F8F2;

    --syntax-number:  var(--dracula-purple);
    --syntax-comment: var(--dracula-comment);
    --syntax-default: var(--dracula-fg);
    --syntax-string:  var(--dracula-yellow);
    --syntax-string-incomplete: var(--dracula-red);
    --syntax-function:         var(--dracula-cyan);
    --syntax-modifier-monadic: var(--dracula-green);
    --syntax-modifier-dyadic:  var(--dracula-yellow);
    --syntax-uiua-function-monadic: var(--dracula-cyan);
    --syntax-uiua-function-dyadic:  var(--dracula-green);
    --syntax-uiua-modifier-monadic: var(--dracula-yellow);
    --syntax-uiua-modifier-dyadic:  var(--dracula-pink);

    --bg: #1a1a2e;
    --bg-surface: #16213e;
    --bg-elevated: #0f3460;
    --text: #e5e7eb;
    --text-muted: #9ca3af;
    --border: #374151;
    --gray-chip: #374151;
}

/* === Syntax highlighting classes (match array-box) === */
.syntax-number  { color: var(--syntax-number); }
.syntax-comment { color: var(--syntax-comment); }
.syntax-string  { color: var(--syntax-string); }
.syntax-string-incomplete { color: var(--syntax-string-incomplete); }
.syntax-function         { color: var(--syntax-function); }
.syntax-modifier-monadic { color: var(--syntax-modifier-monadic); }
.syntax-modifier-dyadic  { color: var(--syntax-modifier-dyadic); }
.syntax-uiua-function-monadic { color: var(--syntax-uiua-function-monadic); }
.syntax-uiua-function-dyadic  { color: var(--syntax-uiua-function-dyadic); }
.syntax-uiua-modifier-monadic { color: var(--syntax-uiua-modifier-monadic); }
.syntax-uiua-modifier-dyadic  { color: var(--syntax-uiua-modifier-dyadic); }

/* === Language font classes === */
.font-bqn     { font-family: 'BQN', 'Courier New', monospace; }
.font-uiua    { font-family: 'Uiua', 'Courier New', monospace; }
.font-j       { font-family: 'JetBrains Mono', monospace; font-variant-ligatures: none; }
.font-apl     { font-family: 'APL', 'Courier New', monospace; }
.font-kap     { font-family: 'APL', 'Courier New', monospace; }
.font-tinyapl { font-family: 'TinyAPL', 'Courier New', monospace; }

/* === Reset & Base === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'JetBrains Mono', 'Segoe UI', system-ui, sans-serif;
    font-variant-ligatures: none;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    zoom: 1.5;
}

/* === App Shell === */
.app {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.app-header {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.header-actions {
    display: flex;
    gap: 6px;
}

.btn-header {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-header:hover {
    background: var(--border);
}

.btn-header-dim {
    color: var(--text-muted);
}

/* === Two-column Layout === */
.layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.tier-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.staging-pane {
    width: 300px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    position: sticky;
    top: 24px;
}

/* === Tier Rows === */
.tier-row {
    display: flex;
    min-height: 80px;
}

.tier-label {
    width: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.08em;
    user-select: none;
}

.tier-label-black  { background: #000000; color: #ffffff; }
.tier-label-purple { background: #7b2d8e; color: #ffffff; }
.tier-label-blue   { background: #1565c0; color: #ffffff; }
.tier-label-green  { background: #00a651; color: #ffffff; }
.tier-label-white  { background: #ffffff; color: #1a1a2e; border: 1px solid #d1d5db; }

.tier-dropzone {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px;
    padding: 8px;
    min-height: 80px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid transparent;
    border-radius: 0 4px 4px 0;
    transition: background 0.15s, border-color 0.15s;
}

.tier-dropzone.drag-over {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

/* === Staging Pane === */
.staging-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.staging-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.btn-add {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1;
}

.btn-add:hover {
    background: var(--border);
    border-color: #6b7280;
}

/* === Creation Form === */
.creation-form {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.creation-form[hidden] {
    display: none;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.radio-group label {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--text);
}

.radio-group input[type="radio"] {
    accent-color: var(--dracula-cyan);
}

.form-input {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 8px;
    color: var(--text);
    font-family: 'APL', 'BQN', 'JetBrains Mono', monospace;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s;
}

.form-input:focus {
    border-color: var(--dracula-cyan);
}

.form-select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    outline: none;
}

.form-select:focus {
    border-color: var(--dracula-cyan);
}

.lang-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lang-toggle-btns {
    display: flex;
    gap: 4px;
}

.btn-lang-toggle {
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-lang-toggle:hover {
    background: var(--border);
    color: var(--text);
}

.lang-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lang-cb {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}

.lang-cb:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lang-cb:has(input:checked) {
    border-color: var(--dracula-cyan);
    background: rgba(139, 233, 253, 0.1);
}

.lang-cb input[type="checkbox"] {
    display: none;
}

.lang-logo-sm {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.lang-cb:has(input:checked) .lang-logo-sm {
    opacity: 1;
}

.form-input-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}

.chip-tooltip-wrap {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
}

.chip-tooltip {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.7rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.chip-tooltip-leader {
    width: 1px;
    height: 8px;
    background: var(--border);
}

.chip:hover .chip-tooltip-wrap {
    opacity: 1;
}

.rank-checkboxes {
    display: flex;
    gap: 6px;
}

.rank-cb {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--text);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}

.rank-cb:hover {
    background: rgba(255, 255, 255, 0.05);
}

.rank-cb:has(input:checked) {
    border-color: var(--dracula-purple);
    background: rgba(189, 147, 249, 0.1);
}

.rank-cb input[type="checkbox"] {
    display: none;
}

.chip-rank-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.4rem;
    font-weight: 700;
    color: #fff;
    background: var(--dracula-purple);
    line-height: 1;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.btn-create {
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    background: var(--dracula-cyan);
    color: #1a1a2e;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: opacity 0.15s;
    align-self: flex-start;
}

.btn-create:hover {
    opacity: 0.85;
}

/* === Staging Items Area === */
.staging-items {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
    min-height: 60px;
    border: 2px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.staging-items.drag-over {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

/* === Item Chips === */
.chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 64px;
    padding: 3px 4px 10px;
    border-radius: 5px;
    cursor: grab;
    user-select: none;
    position: relative;
    transition: transform 0.1s, box-shadow 0.1s;
}

.chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.chip:active {
    cursor: grabbing;
}

.chip.dragging {
    opacity: 0.4;
}

.chip-text {
    font-family: 'APL', 'BQN', 'JetBrains Mono', monospace;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.15;
    max-height: 100%;
    overflow: hidden;
}

.chip-langs {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    display: flex;
    gap: 1px;
    align-items: center;
    justify-content: center;
}

.chip-lang-logo {
    width: 8px;
    height: 8px;
    object-fit: contain;
}

.chip-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: var(--dracula-red);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.chip:hover .chip-delete {
    display: flex;
}

/* Primitive chip: white text on Dracula bg */
.chip-primitive {
    color: #ffffff;
    font-weight: 600;
}

/* Default: 4-color mode */
.chip-primitive.subtype-monadic-function { background: var(--dracula-cyan); color: #1a1a2e; }
.chip-primitive.subtype-dyadic-function  { background: var(--dracula-green); color: #1a1a2e; }
.chip-primitive.subtype-1-modifier       { background: var(--dracula-yellow); color: #1a1a2e; border: 2px solid transparent; }
.chip-primitive.subtype-2-modifier       { background: var(--dracula-pink); color: #1a1a2e; border: 2px solid transparent; }

/* Modifier arity borders (4-color mode) */
.chip-primitive.subtype-1-modifier.arity-monadic { border-color: var(--dracula-cyan); }
.chip-primitive.subtype-1-modifier.arity-dyadic  { border-color: var(--dracula-green); }
.chip-primitive.subtype-2-modifier.arity-monadic { border-color: var(--dracula-cyan); }
.chip-primitive.subtype-2-modifier.arity-dyadic  { border-color: var(--dracula-green); }

/* 3-color mode: function = cyan, 1-mod = green, 2-mod = yellow */
.app.mode-3color .chip-primitive.subtype-monadic-function { background: var(--dracula-cyan); color: #1a1a2e; }
.app.mode-3color .chip-primitive.subtype-dyadic-function  { background: var(--dracula-cyan); color: #1a1a2e; }
.app.mode-3color .chip-primitive.subtype-1-modifier       { background: var(--dracula-green); color: #1a1a2e; }
.app.mode-3color .chip-primitive.subtype-2-modifier       { background: var(--dracula-yellow); color: #1a1a2e; }

/* Modifier arity borders (3-color mode -- function is cyan for both) */
.app.mode-3color .chip-primitive.subtype-1-modifier.arity-monadic { border-color: var(--dracula-cyan); }
.app.mode-3color .chip-primitive.subtype-1-modifier.arity-dyadic  { border-color: var(--dracula-cyan); }
.app.mode-3color .chip-primitive.subtype-2-modifier.arity-monadic { border-color: var(--dracula-cyan); }
.app.mode-3color .chip-primitive.subtype-2-modifier.arity-dyadic  { border-color: var(--dracula-cyan); }

/* Expression chip: syntax-highlighted text on gray bg, colored border by sub-type */
.chip-expression {
    background: var(--gray-chip);
    color: var(--dracula-fg);
    border: 2px solid transparent;
}

.chip-expression.subtype-monadic-function { border-color: var(--dracula-cyan); }
.chip-expression.subtype-dyadic-function  { border-color: var(--dracula-green); }
.chip-expression.subtype-1-modifier       { border-color: var(--dracula-yellow); }
.chip-expression.subtype-2-modifier       { border-color: var(--dracula-pink); }

/* 3-color mode borders */
.app.mode-3color .chip-expression.subtype-monadic-function { border-color: var(--dracula-cyan); }
.app.mode-3color .chip-expression.subtype-dyadic-function  { border-color: var(--dracula-cyan); }
.app.mode-3color .chip-expression.subtype-1-modifier       { border-color: var(--dracula-green); }
.app.mode-3color .chip-expression.subtype-2-modifier       { border-color: var(--dracula-yellow); }

/* Concept chip: white text on gray bg */
.chip-concept {
    background: var(--gray-chip);
    color: #ffffff;
}

/* === Color Legend === */
.legend {
    margin-top: 24px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.legend-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s, border-color 0.15s;
}

.legend-row:hover {
    opacity: 0.7;
}

.legend-row-active {
    opacity: 1;
    border-color: var(--dracula-cyan);
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.legend-chip {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.legend-chip-wide {
    text-align: center;
}

.lc-cyan    { background: var(--dracula-cyan); color: #1a1a2e; }
.lc-green   { background: var(--dracula-green); color: #1a1a2e; }
.lc-yellow  { background: var(--dracula-yellow); color: #1a1a2e; }
.lc-pink    { background: var(--dracula-pink); color: #1a1a2e; }
.lc-expr    { background: #374151; color: var(--dracula-fg); }
.lc-concept { background: #374151; color: #ffffff; }