/*
 * Monochrome terminal styling. The only chromatic pixels in the interface are
 * the LED lamps, the color swatches and the timeline: everything that is not a
 * color under test is drawn in grey.
 */

:root {
    --bg: #0b0b0b;
    --panel: #121212;
    --panel-2: #171717;
    --line: #2b2b2b;
    --line-strong: #3d3d3d;
    --text: #dcdcdc;
    --text-dim: #8f8f8f;
    --text-faint: #6a6a6a;
    --hot: #ffffff;
    --mono: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", Menlo, Consolas, monospace;
    --pad: 12px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: var(--text-dim);
}

h3 {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

p { margin: 0 0 8px; }

code {
    background: var(--panel-2);
    border: 1px solid var(--line);
    padding: 0 4px;
    color: var(--text);
}

/* ---------------- top bar ---------------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px var(--pad);
    background: var(--panel);
    border-bottom: 1px solid var(--line-strong);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 20;
}

.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-mark { color: var(--text-faint); }
.brand-name { font-weight: 700; letter-spacing: 0.16em; color: var(--hot); }

.topstats { margin-left: auto; color: var(--text-dim); }

.readout {
    color: var(--text);
    letter-spacing: 0.06em;
    min-width: 96px;
    text-align: center;
}

/* ---------------- nav ---------------- */

.viewnav {
    display: flex;
    gap: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--line-strong);
    padding: 0 var(--pad);
    position: sticky;
    top: 45px;
    z-index: 19;
}

.viewnav button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-faint);
    padding: 9px 16px;
    letter-spacing: 0.12em;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}

.viewnav button:hover { color: var(--text); }
.viewnav button.active { color: var(--hot); border-bottom-color: var(--hot); }

/* ---------------- layout ---------------- */

main { flex: 1; padding: var(--pad); display: flex; flex-direction: column; gap: var(--pad); }

.view { display: flex; flex-direction: column; gap: var(--pad); flex: 1; }
.view[hidden] { display: none; }

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--pad);
    align-items: start;
    flex: 1;
}

.col-main, .col-side { display: flex; flex-direction: column; gap: var(--pad); min-width: 0; }
.col-side { position: sticky; top: 92px; max-height: calc(100vh - 104px); }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: var(--pad);
    min-width: 0;
}

.panel.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel.grow > .issues, .panel.grow > .examples { flex: 1; overflow-y: auto; min-height: 0; }

/* Output and state stay compact; the disassembly and trace get the room,
 * since those are the columns with long lines in them. */
.dbg-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1.9fr 1.3fr;
    gap: var(--pad);
    align-items: stretch;
}

@media (max-width: 1340px) { .dbg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .dbg-grid { grid-template-columns: 1fr; } }

.spacer { flex: 1; }

/* ---------------- controls ---------------- */

.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px var(--pad);
    background: var(--panel);
    border: 1px solid var(--line);
}

.toolbar.flat { background: none; border: none; padding: 8px 0; }

button {
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.08em;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--line-strong);
    padding: 5px 11px;
    cursor: pointer;
}

button:hover { background: #202020; color: var(--hot); border-color: var(--text-faint); }
button:active { background: #0d0d0d; }
button:disabled { opacity: 0.35; cursor: default; }
button:disabled:hover { background: var(--panel-2); color: var(--text); border-color: var(--line-strong); }
button.primary { background: var(--text); color: #000; border-color: var(--text); font-weight: 700; }
button.primary:hover { background: var(--hot); color: #000; }
button.danger:hover { border-color: var(--hot); color: var(--hot); }
button.tiny { padding: 2px 7px; font-size: 11px; }
button.active { background: var(--text); color: #000; border-color: var(--text); }

input[type="text"], input[type="number"], textarea, select {
    font-family: inherit;
    font-size: 12px;
    background: #0d0d0d;
    color: var(--text);
    border: 1px solid var(--line-strong);
    padding: 4px 7px;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--text);
    background: #000;
}

input[readonly], textarea[readonly] { color: var(--text-dim); }

textarea { width: 100%; resize: vertical; line-height: 1.45; }

.field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.field.inline { flex-direction: row; align-items: center; gap: 6px; margin-bottom: 0; }
.field-label { font-size: 11px; letter-spacing: 0.1em; color: var(--text-faint); }
.field.inline input[type="number"] { width: 76px; }
.field.inline input[type="text"] { width: 150px; }
.field input, .field textarea { width: 100%; }

.check, .radio { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text-dim); font-size: 12px; }
.check input, .radio input { accent-color: #888; }
.check:hover, .radio:hover { color: var(--text); }

.hint { color: var(--text-faint); font-size: 11px; }
.counter { color: var(--text-faint); font-weight: 400; letter-spacing: 0; }

/* ---------------- LEDs (the only color) ---------------- */

.preview { display: flex; align-items: center; gap: 10px; }

.led { display: flex; flex-direction: column; align-items: center; gap: 3px; }

.led-lamp {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    border: 1px solid var(--line-strong);
    transition: background 60ms linear, box-shadow 60ms linear;
}

.led-index { font-size: 10px; color: var(--text-faint); letter-spacing: 0.08em; }
.led-hex { font-size: 10px; color: var(--text-faint); }

.preview.large .led-lamp { width: 46px; height: 46px; }
.preview.large { gap: 14px; justify-content: center; padding: 6px 0 10px; }

.preview.huge .led-lamp { width: 58px; height: 58px; }
.preview.huge { gap: 12px; justify-content: center; padding: 10px 0 14px; flex-wrap: nowrap; }
.preview.huge .led-index { font-size: 11px; }
.preview.huge .led { flex: 0 1 auto; min-width: 0; }

/* ---------------- editor blocks ---------------- */

.block {
    border: 1px solid var(--line);
    background: var(--panel);
    margin-bottom: var(--pad);
}

.block.selected { border-color: var(--text-faint); }

.block-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px var(--pad);
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.block-title { font-weight: 700; letter-spacing: 0.1em; color: var(--text); }
.block-meta { color: var(--text-faint); font-size: 11px; }
.block-actions { margin-left: auto; display: flex; gap: 4px; }

.steps { padding: 6px var(--pad) var(--pad); }

.step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--line);
    flex-wrap: wrap;
}

.step:last-child { border-bottom: none; }
.step.bad { background: rgba(255, 255, 255, 0.04); }

.step-num { color: var(--text-faint); width: 22px; font-size: 11px; }
.step-op { width: 148px; color: var(--text); letter-spacing: 0.06em; font-size: 12px; }
.step-args { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.step-actions { display: flex; gap: 4px; margin-left: auto; }

.arg { display: flex; align-items: center; gap: 4px; }
.arg > span { font-size: 10px; color: var(--text-faint); letter-spacing: 0.08em; }
.arg input[type="number"] { width: 62px; }
.arg.wide input[type="number"] { width: 74px; }

.ledpick { display: flex; gap: 3px; }

.ledpick button {
    width: 26px;
    padding: 3px 0;
    text-align: center;
    color: var(--text-faint);
}

.ledpick button.on { background: var(--text); color: #000; border-color: var(--text); }

.swatch {
    width: 26px;
    height: 22px;
    border: 1px solid var(--line-strong);
    padding: 0;
    cursor: pointer;
    background: #000;
}

.swatch:hover { border-color: var(--text); }

.colorgroup { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border: 1px solid var(--line); }
.arrow { color: var(--text-faint); }

.addstep { display: flex; align-items: center; gap: 6px; padding-top: 10px; }
.addstep select { min-width: 190px; }

.empty { color: var(--text-faint); font-style: normal; padding: 6px 0; }

/* ---------------- issues ---------------- */

.issues { display: flex; flex-direction: column; gap: 6px; }

.issue {
    border-left: 3px solid var(--line-strong);
    background: var(--panel-2);
    padding: 6px 9px;
    font-size: 12px;
    cursor: default;
}

.issue .tag { letter-spacing: 0.1em; font-size: 10px; margin-right: 6px; }
.issue .issue-hint { display: block; color: var(--text-faint); font-size: 11px; margin-top: 3px; }

.issue.error { border-left-color: var(--hot); color: var(--hot); }
.issue.error .tag { color: var(--hot); }
.issue.warn { border-left-color: var(--text-dim); color: var(--text); }
.issue.warn .tag { color: var(--text-dim); }
.issue.info { border-left-color: var(--line-strong); color: var(--text-dim); }
.issue.info .tag { color: var(--text-faint); }
.issue.clickable { cursor: pointer; }
.issue.clickable:hover { background: #1e1e1e; }

/* ---------------- debugger ---------------- */

.statline { color: var(--text-dim); font-size: 11px; text-align: center; }

.kv { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.kv span { color: var(--text-faint); font-size: 11px; letter-spacing: 0.08em; }
.kv b { font-weight: 400; color: var(--text); }

.regs { display: flex; flex-direction: column; gap: 5px; }

.reg { display: flex; gap: 8px; align-items: flex-start; border-left: 2px solid var(--line-strong); padding: 3px 8px; background: var(--panel-2); }
.reg.idle { color: var(--text-faint); }
.reg .reg-lamp { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; margin-top: 3px; }
.reg .reg-label { font-size: 10px; color: var(--text-faint); letter-spacing: 0.08em; flex: none; margin-top: 3px; }
.reg .reg-body { min-width: 0; flex: 1; }
.reg .reg-title { font-size: 11px; color: var(--text); word-break: break-word; }
.reg .reg-sub { font-size: 10px; color: var(--text-faint); }

.listing, .log { max-height: 300px; overflow-y: auto; font-size: 11px; }
.listing { overflow-x: auto; }

.listing-row { display: flex; gap: 8px; padding: 1px 4px; white-space: nowrap; width: max-content; min-width: 100%; cursor: pointer; }
.listing-row:hover { background: #1c1c1c; }
.listing-row .off { color: var(--text-faint); flex: 0 0 auto; }
.listing-row .hex { color: var(--text-faint); flex: 0 0 auto; min-width: 150px; }
.listing-row .txt { color: var(--text); flex: 0 0 auto; }
.listing-row.head { color: var(--text-dim); border-bottom: 1px solid var(--line); margin-bottom: 3px; padding-bottom: 3px; }
.listing-row.block-row .txt { color: var(--text-dim); }
.listing-row.current { background: var(--text); }
.listing-row.current .off, .listing-row.current .hex, .listing-row.current .txt { color: #000; }
.listing-row.done .txt { color: var(--text-faint); }

.log-row { padding: 1px 4px; white-space: pre-wrap; word-break: break-word; color: var(--text-dim); }
.log-row .lf { color: var(--text-faint); margin-right: 6px; }
.log-row.recent { color: var(--text); }
.log-row.warn { color: var(--hot); }
.log-row.frame { color: var(--text-faint); }

/* ---------------- timeline ---------------- */

.timeline { width: 100%; display: block; background: #000; border: 1px solid var(--line); cursor: crosshair; }
.timeline.tall { cursor: pointer; }
.timeline-legend { display: flex; justify-content: space-between; color: var(--text-faint); font-size: 10px; padding-top: 3px; }

/* ---------------- import / examples ---------------- */

.examples { display: flex; flex-direction: column; gap: 6px; }

.example {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 7px 9px;
    background: var(--panel-2);
    border: 1px solid var(--line);
}

.example b { font-weight: 700; letter-spacing: 0.06em; }
.example span { color: var(--text-faint); font-size: 11px; white-space: normal; }

/* ---------------- help ---------------- */

.ref { width: 100%; border-collapse: collapse; font-size: 12px; }
.ref th { text-align: left; color: var(--text-faint); font-weight: 400; letter-spacing: 0.1em; font-size: 11px; border-bottom: 1px solid var(--line-strong); padding: 5px 8px 5px 0; }
.ref td { padding: 4px 8px 4px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.ref td:first-child { color: var(--text); white-space: nowrap; }
.ref td:nth-child(2), .ref td:nth-child(3) { color: var(--text-dim); }
.ref td:last-child { color: var(--text-dim); }

.rules { margin: 0; padding-left: 20px; color: var(--text-dim); }
.rules li { margin-bottom: 5px; }
.rules b { color: var(--text); font-weight: 700; }

/* ---------------- toast ---------------- */

.toast {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: #000;
    padding: 7px 16px;
    font-size: 12px;
    letter-spacing: 0.06em;
    z-index: 60;
    border: 1px solid var(--hot);
}

.toast[hidden] { display: none; }

/* ---------------- scrollbars ---------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0d0d; }
::-webkit-scrollbar-thumb { background: #2e2e2e; border: 2px solid #0d0d0d; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* ---------------- narrow screens ---------------- */

@media (max-width: 1000px) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .col-side { position: static; max-height: none; }
    .topbar { gap: 12px; }
    .viewnav { top: 0; position: static; overflow-x: auto; }
}

/* Below this width a step no longer fits on one line, so it becomes a small
 * stack: label, then arguments, then the row actions. */
@media (max-width: 780px) {
    .step { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 0; }
    .step-num { width: auto; }
    .step-op { width: auto; font-weight: 700; }
    .step-args { gap: 6px; }
    .step-actions { margin-left: 0; justify-content: flex-end; }
    .colorgroup { flex-wrap: wrap; }
    .addstep { flex-wrap: wrap; }
    .addstep .hint { display: none; }
    .block-head { gap: 6px; }
    .block-actions { margin-left: 0; }
    .preview.huge .led-lamp { width: 44px; height: 44px; }
}