{#if !focusedMode}

{gradient.term_left}

{/if}

{#if !focusedMode}

{gradient.term_right}

{/if}

Value: {gradient.value !== null ? gradient.value : ''} {#if gradient.automated} (auto-calculated) {/if}

{#if !gradient.automated}

{:else} {/if}

{#if showNotes}

<div class="notes-buttons">
        <button on:click={handleNotesSave}>Save</button>
        <button on:click={() => showNotes = false}>Cancel</button>
      </div>
    </div>
  {/if}
</div>

.gradient-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
  }

.gradient-row.focused {
    display: flex;
    justify-content: center;
  }

.gradient-row.focused .bar-container {
    width: 100%;
  }

.term {
    text-align: center;
    font-size: 0.9rem;
  }

.term.left {
    text-align: right;
  }

.term.right {
    text-align: left;
  }

.bar-container {
    display: flex;
    justify-content: center;
  }

.bar {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.8rem;
    white-space: nowrap;
    letter-spacing: 0.2rem;
    padding: 0.5rem 1rem;
    user-select: none;
    min-width: 240px;
    text-align: center;
    background-color: var(--bg-color);
    color: var(--fg-color);
    border: 2px solid var(--border-color);
  }

.bar.automated {
    cursor: default;
    opacity: 0.6;
  }

.bar.interactive {
    cursor: pointer;
    transition: border-color 0.2s;
  }

.bar.interactive:hover {
    border-color: var(--hover-color);
  }

.bar.interactive:active {
    background-color: var(--input-bg);
    border-color: var(--fg-color);
  }

.value-display {
    text-align: center;
    margin: 0.5rem 0;
    font-size: 0.9rem;
  }

.analysis-gradient .value-display {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
  }

.auto-label {
    opacity: 0.6;
    font-size: 0.8rem;
    font-style: italic;
  }

.controls {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }

.button-row {
    display: flex;
    gap: 0.5rem;
    width: auto;
  }

.na-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    opacity: 0.6;
    flex-shrink: 0;
    min-height: auto;
    width: auto;
  }

.na-btn:hover {
    opacity: 1;
    background-color: transparent;
    color: var(--fg-color);
    border-color: var(--hover-color);
  }

.na-btn.active {
    opacity: 1;
    background-color: var(--input-bg);
    border-color: var(--fg-color);
  }

.notes-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    opacity: 0.6;
    min-height: auto;
    width: auto;
  }

.notes-btn:hover {
    opacity: 1;
    background-color: transparent;
    color: var(--fg-color);
    border-color: var(--hover-color);
  }

.notes-btn.has-notes {
    opacity: 1;
    border-color: var(--hover-color);
  }

.notes-btn.has-notes:hover {
    background-color: transparent;
    color: var(--fg-color);
  }

.notes-editor {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
  }

.notes-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

.notes-buttons button {
    flex: 1;
  }

@media (max-width: 768px) {
    .gradient-row {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      gap: 0.5rem;
    }

.term.left {
      text-align: left;
      grid-row: 1;
    }

.bar-container {
      grid-row: 2;
    }

.term.right {
      text-align: right;
      grid-row: 3;
    }

.bar {
      font-size: 1.4rem;
      min-width: 200px;
      padding: 0.5rem;
    }
  }
</style>