/* style.css — Tube Designer — dark forest theme */

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

:root {
    --bg:          #0a120a;
    --bg-panel:    #0f1a0f;
    --bg-card:     #131f13;
    --border:      #1e3a1e;
    --border-dim:  #111a11;  /* subtle row separators */
    --canvas-bg:   #0d1a0d;  /* shape editor canvas */
    --green:       #4caf50;
    --green-dim:   #2a6a2a;
    --green-mid:   #2a8a2a;  /* button hover */
    --green-hi:    #8bc34a;
    --green-dark:  #1a5a1a;  /* active button bg */
    --orange:      #ff9800;
    --orange-dim:  #7a4500;  /* accent button bg */
    --orange-mid:  #a05a00;  /* accent button hover */
    --text:        #c8e6c9;
    --text-dim:    #6a9a6a;
    --red:         #ef5350;
    --font:        'Courier New', monospace;
}

html { height: 100%; }

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.4;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

header h1 {
    font-size: 17px;
    color: var(--green-hi);
    letter-spacing: 1px;
    white-space: nowrap;
}

.header-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.hdr-sep {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 0 4px;
}

#project-name {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 2px;
    width: 140px;
}

#project-name:focus {
    outline: none;
    border-color: var(--green);
}

.hdr-action-select {
    background: var(--green-dim);
    border: 1px solid var(--green);
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 2px;
}

/* ── Main layout: 3 columns × 2 rows ────────────────────────────────────────── */
/* Row 1: shape | spectrum | controls                                            */
/* Row 2: reverse panel (cols 1–2) | controls (continued)                       */
.main-layout {
    display: grid;
    grid-template-columns: 500px 1fr 220px;
    grid-template-rows: 1fr;
    grid-template-areas: "shape spectrum controls";
    gap: 0;
    flex: 1 1 0;   /* fills remaining body height in the flex column */
    min-height: 0;
    overflow: hidden;
}

.panel-shape    { grid-area: shape; }
.panel-spectrum { grid-area: spectrum; }
.panel-controls { grid-area: controls; }

/* ── Panels ──────────────────────────────────────────────────────────────────── */
.panel {
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.panel:last-child { border-right: none; }

.panel h2 {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green-hi);
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
}

/* ── Shape editor ────────────────────────────────────────────────────────────── */
.panel-shape { min-width: 0; }

.canvas-wrapper {
    flex: 0 0 auto;
    padding: 4px 8px;
}

#shape-canvas {
    display: block;
    width: 100%;
    height: 275px;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: crosshair;
    background: var(--canvas-bg);
}

.shape-btns {
    display: flex;
    gap: 6px;
    padding: 5px 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.scale-lbl {
    color: var(--text-dim);
    font-size: 11px;
    align-self: center;
    padding: 0 0 0 6px;
    letter-spacing: 0.3px;
}

.interp-toggle-label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    margin-left: 6px;
}

.canvas-hint {
    margin: 0 8px 4px;
    font-size: 0.72em;
    color: var(--text-dim);
    flex-shrink: 0;
}

.point-table-wrap {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 0 4px 4px;
}

#point-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#point-table th {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    color: var(--green-hi);
    text-align: right;
    padding: 3px 5px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    letter-spacing: 0.5px;
    font-weight: normal;
    white-space: nowrap;
}

#point-table th:nth-child(2) { text-align: center; padding: 3px 2px; }

#point-table td { padding: 2px 5px; border-bottom: 1px solid var(--border-dim); text-align: right; }
#point-table td:nth-child(2) { text-align: center; padding: 2px 2px; }

.pt-idx { color: var(--text-dim); width: 20px; text-align: right; }

.pt-input {
    width: 78px;
    background: var(--bg);
    border: 1px solid var(--green-dim);
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    padding: 1px 4px;
    border-radius: 2px;
    text-align: left;
}
.pt-input:focus { outline: 1px solid var(--green); }

.pt-del {
    background: none;
    border: none;
    color: var(--red);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    opacity: 0.6;
    line-height: 1;
    vertical-align: middle;
}
.pt-del:hover { opacity: 1; }

.pt-dr {
    width: 62px;
    min-width: 62px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    padding: 2px 4px;
    white-space: nowrap;
}


/* ── Spectrum panel ──────────────────────────────────────────────────────────── */
.panel-spectrum { min-width: 0; }

.chart-wrap {
    flex: 0 0 320px;
    padding: 8px;
    min-height: 0;
    position: relative;
}

.chart-wrap canvas {
    position: absolute;
    inset: 8px;   /* matches padding */
}

#reset-zoom, #toggle-xscale {
    position: absolute;
    z-index: 10;
    background: #1c2e1c;
    color: #8bc34a;
    border: 1px solid #3a5a3a;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.7;
    line-height: 1.4;
}
#reset-zoom { top: 10px; right: 12px; }
#toggle-xscale { top: 10px; right: 46px; }
#reset-zoom:hover, #toggle-xscale:hover { opacity: 1; }

.modes-section {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 0 8px 4px;
}

/* ── Reverse Engineering bar (bottom of spectrum panel) ─────────────────────── */
.reverse-section {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reverse-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.reverse-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.reverse-btns {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reverse-primary,
.reverse-secondary {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.modes-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
}

.modes-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    color: var(--green-hi);
    text-align: left;
    padding: 3px 5px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    letter-spacing: 0.5px;
    font-weight: normal;
    white-space: nowrap;
}

.modes-table thead th.th-num { text-align: right; }

.modes-superheader th {
    padding: 2px 5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-size: 9px;
    opacity: 0.6;
    border-top: 1px solid var(--border);
}
.superhead-group {
    text-align: center !important;
    border-top: 1px solid var(--border);
}

.col-sep { border-right: 1px solid var(--border); }
.col-sep + th, .col-sep + td { padding-left: 8px; }

.modes-table tbody tr { border-bottom: 1px dotted var(--border-dim); }
.modes-table tbody td { padding: 3px 5px; white-space: nowrap; }

.mode-num   { color: var(--orange); }
.mode-freq  { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.mode-note  { color: var(--green-hi); }
.mode-ratio { color: var(--text-dim); font-size: 11px; text-align: right; }
.mode-q     { color: var(--text-dim); font-size: 11px; text-align: right; }
.mode-above-cutoff { color: var(--orange); cursor: help; }
.target-note { color: var(--orange); font-size: 11px; }
.pred-freq  { color: var(--text); font-variant-numeric: tabular-nums; font-size: 11px; text-align: right; }
.pred-note  { color: var(--green-hi); font-size: 11px; }
.pred-ratio { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 11px; text-align: right; }
.pred-delta { font-variant-numeric: tabular-nums; font-size: 11px; text-align: right; }

/* Fixed-width note spans for column alignment */
.note-nm { display: inline-block; width: 3ch; }
.note-ct { display: inline-block; width: 4ch; text-align: right;
           font-size: 10px; color: var(--text-dim); }

/* ── Controls panel ──────────────────────────────────────────────────────────── */
/* No outer padding — h2 aligns flush with other panel titles */
.panel-controls { }

.controls-body {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 8px;
    min-height: 0;
}

.ctrl-group {
    margin-bottom: 10px;
}

.ctrl-group label {
    display: block;
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.ctrl-group h3 {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--green-hi);
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 3px;
}

.inline-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    cursor: pointer;
}

#temp-display { color: var(--green-hi); }

.audio-btns {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
#btn-play-stop { min-width: 72px; line-height: 1; height: 24px; }

/* Target inputs (inside modes table) */
.td-target { text-align: right; }

.target-input {
    width: 90px;
    background: var(--bg);
    border: 1px solid var(--orange);
    color: var(--orange);
    font-family: var(--font);
    font-size: 11px;
    padding: 1px 4px;
    border-radius: 2px;
    text-align: left;
}
.target-input:focus  { outline: 1px solid var(--orange); }
.target-input.invalid,
.target-input.invalid:focus { border-color: var(--red); color: var(--red); outline-color: var(--red); }
.pt-input.invalid,
.pt-input.invalid:focus     { border-color: var(--red); color: var(--red); outline-color: var(--red); }

.dr-pos  { color: var(--green-hi); }
.dr-neg  { color: var(--red); }
.dr-none { color: var(--text-dim); }

/* ── Variant navigator (inside reverse-section) ─────────────────────────────── */
#variant-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}
#variant-label { min-width: 34px; text-align: center; color: var(--text); }
#btn-variant-prev, #btn-variant-next { padding: 2px 7px; font-size: 11px; }

/* ── Proposal stats (inside reverse-section, below variant navigator) ─────── */
#proposal-stats {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.pstat-row {
    display: flex;
    gap: 10px;
    color: var(--text-dim);
    line-height: 1.7;
}
.pstat-lbl { width: 16px; color: var(--green-hi); font-size: 10px; letter-spacing: 0.5px; }
.pstat-val { color: var(--text); }
.pstat-at   { color: var(--text-dim); font-size: 10px; }
.pstat-warn { color: var(--orange); font-size: 10px; margin-top: 3px; }

/* Bold-only highlight for maximum-absolute-value cells in Δf and Δr columns */
.df-max { font-weight: bold; }
.dr-max { font-weight: bold; }

/* ── Status bar ──────────────────────────────────────────────────────────────── */
#status-bar {
    flex-shrink: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    padding: 3px 14px;
    font-size: 11px;
    height: 22px;
    overflow: hidden;
    white-space: nowrap;
}

/* ── Shared form controls ────────────────────────────────────────────────────── */
select, input[type="number"], input[type="range"] {
    background: var(--bg);
    border: 1px solid var(--green-dim);
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 2px;
}

select:focus, input:focus { outline: 1px solid var(--green); }

input[type="range"] {
    padding: 0;
    border: none;
    accent-color: var(--green);
    width: 100%;
    margin-top: 3px;
}

input[type="checkbox"] { accent-color: var(--green); }

button {
    background: var(--green-dim);
    border: 1px solid var(--green);
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.1s;
}

button:hover:not(:disabled) { background: var(--green-mid); }
button:disabled { opacity: 0.4; cursor: default; }

button.accent {
    background: var(--orange-dim);
    border-color: var(--orange);
    color: var(--orange);
}
button.accent:hover:not(:disabled) { background: var(--orange-mid); }

button.active {
    background: var(--green-hi);
    border-color: var(--green-hi);
    color: var(--bg);
}
button.active:hover:not(:disabled) { background: var(--green); }

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--green-dim); border-radius: 3px; }
* { scrollbar-color: var(--green-dim) var(--bg); scrollbar-width: thin; }

/* ── Constraint lock buttons ─────────────────────────────────────────────────── */
/* Point-table lock button (next to the × delete button) */
.pt-lock {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    opacity: 0.3;
    line-height: 1;
    transition: opacity 0.12s;
    vertical-align: middle;
}
.pt-lock:hover   { opacity: 0.75; }
.pt-lock.locked  { opacity: 1; color: var(--orange); }

/* Fixed-point table row highlight */
#point-table tr.pt-fixed td { background: rgba(255,152,0,0.04); }

/* Mode-table lock button (in the Target column) */
.mode-lock-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    opacity: 0.3;
    line-height: 1;
    transition: opacity 0.12s;
}
.mode-lock-btn:hover   { opacity: 0.75; }
.mode-lock-btn.locked  { opacity: 1; color: var(--orange); }
.mode-lock-btn.ignored { opacity: 1; color: var(--text-dim); }

/* Lock-button column in modes table */
.th-lock { text-align: center !important; padding: 2px 4px !important; }
.td-lock { text-align: center; padding: 2px 4px; width: 32px; }

/* Ignored mode row */
tr.mode-ignored td { opacity: 0.65; }
tr.mode-ignored .td-lock { opacity: 1; }   /* keep button at full visibility */

/* Locked mode: dim the disabled target input */
.target-input:disabled {
    opacity: 0.45;
    border-color: var(--text-dim);
    color: var(--text-dim);
    cursor: default;
}

.note-input-wrap {
    position: relative;
    display: inline-block;
    width: 62px;
    vertical-align: middle;
}

.target-note-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--orange);
    /* Hide the raw index number by matching background color */
    color: var(--bg);
    -webkit-text-fill-color: var(--bg);
    caret-color: transparent;
    font-family: var(--font);
    font-size: 11px;
    padding: 1px 2px;
    border-radius: 2px;
}
.target-note-input:focus { outline: 1px solid var(--orange); }
.target-note-input:disabled {
    opacity: 0.45;
    border-color: var(--text-dim);
}

.note-input-label {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    font-size: 11px;
    color: var(--orange);
    font-family: var(--font);
}
.target-note-input:disabled + .note-input-label {
    opacity: 0.45;
    color: var(--text-dim);
}

.target-cents {
    vertical-align: middle;
    margin-left: 2px;
}