/* ================================================================
   Funktionsplotter, Tool-specific styles
   ================================================================
   Loaded only by pages/werkzeuge/funktionsplotter.html. Extends the
   shared plotter chrome (plotter.css) with the controls unique to a
   function plotter: the per-function list rows, the inline
   Definitionsbereich fields, the view-window grid and the analysis
   tool readouts. Defines only new `.fp-*` classes. Colours, fonts,
   radii and transitions go through the design tokens; the pixel
   sizes (gaps, paddings, control dimensions) are literals tuned to
   this sidebar's control density.
   ================================================================ */

/* ── Function list ─────────────────────────────────────────────── */
.fp-fn-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 8px;
}

.fp-fn-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    padding: 7px 8px 6px;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.fp-fn-row:hover {
    border-color: var(--border-active);
}
.fp-fn-row.active {
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.fp-fn-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fp-fn-vis {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    flex: 0 0 auto;
    accent-color: var(--checkbox-accent);
    cursor: pointer;
}

.fp-fn-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.fp-fn-name {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text);
    white-space: nowrap;
    flex: 1 1 auto;          /* grows so the delete button sits flush right */
}

.fp-fn-expr {
    display: block;
    width: 100%;             /* own full-width line: room for 20+ characters */
    margin-top: 6px;
    background: var(--bg-surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    font-family: var(--font-mono);
    font-size: 11px;         /* shows ~24 mono chars in the 220px sidebar */
    outline: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.fp-fn-expr:focus {
    border-color: var(--accent);
    background: var(--bg);
}
.fp-fn-expr.error {
    border-color: var(--color-error);
    background: var(--plotter-error-bg);
}

.fp-fn-del {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    font-size: 15px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.fp-fn-del:hover:not(:disabled) {
    color: var(--color-error);
    border-color: var(--plotter-error-border);
}
.fp-fn-del:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Line 3 of a function row: a "Definitionsbereich" label next to the
   von/bis bound fields. The fields are grouped so that on a narrow
   sidebar the whole group wraps below the label as a unit (instead of
   the label and fields interleaving), and then takes the full width. */
.fp-fn-domain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 7px;
}
.fp-fn-domain-title {
    font-family: var(--font-ui);
    font-size: 10px;
    color: var(--text-dim);
    flex: 0 0 auto;
}
.fp-fn-domain-fields {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 132px;
    min-width: 132px;
}
.fp-fn-domain-lbl {
    font-family: var(--font-ui);
    font-size: 10.5px;
    color: var(--text-muted);
    flex: 0 0 auto;
}

.fp-fn-mini,
.fp-mini-input {
    min-width: 0;
    background: var(--bg-surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    outline: none;
    transition: border-color var(--transition-fast);
}
.fp-fn-mini {
    flex: 1 1 0;
    width: 0;
}
.fp-fn-mini:focus,
.fp-mini-input:focus {
    border-color: var(--accent);
}

.fp-fn-err {
    font-family: var(--font-ui);
    font-size: 10.5px;
    color: var(--color-error);
    line-height: 1.35;
    margin-top: 4px;
    display: none;
}
.fp-fn-err.visible {
    display: block;
}

/* ── Add-function button ───────────────────────────────────────── */
.fp-add-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--border-active);
    color: var(--text-muted);
    padding: 6px 10px;
    font-family: var(--font-ui);
    font-size: 11.5px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.fp-add-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--text-bright);
}
.fp-add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── View-window grid ──────────────────────────────────────────── */
.fp-win-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 8px;
}
.fp-win-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fp-win-cell .fp-cap {
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-dim);
}
.fp-win-cell .fp-mini-input {
    width: 100%;
}

.fp-win-error {
    font-family: var(--font-ui);
    font-size: 10.5px;
    color: var(--color-error);
    line-height: 1.4;
    margin: 2px 0 6px;
    display: none;
}
.fp-win-error.visible {
    display: block;
}

/* ── Analysis tools ────────────────────────────────────────────── */
.fp-active-line {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-muted);
    margin: 2px 0 8px;
}
.fp-active-line b {
    color: var(--accent-light);
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
}

.fp-int-row {
    margin-top: 6px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
}
.fp-int-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

/* Fläche/Integral: mode selector, area under one curve vs. between
   two curves. Stacked, since "zwischen zwei Kurven" is too wide to
   sit beside the other option in the narrow sidebar. */
.fp-int-mode {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 7px;
}
.fp-int-mode[hidden] { display: none; }
.fp-int-mode-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.fp-int-mode-opt input[type="radio"] {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    flex: 0 0 auto;
    accent-color: var(--checkbox-accent);
    cursor: pointer;
}

/* Fläche/Integral: pick which two functions to integrate between
   (shown only with three or more visible curves). */
.fp-int-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 7px;
}
.fp-int-pair[hidden] { display: none; }
.fp-int-pair select { cursor: pointer; }

.fp-int-result {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-formula);
    margin-top: 7px;
    min-height: 14px;
    line-height: 1.4;
}
/* Hint under the integral value: clarifies that ∫ f dx is signed. */
.fp-int-note {
    display: block;
    font-family: var(--font-ui);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 3px;
    line-height: 1.4;
}

.fp-tools-hint {
    font-family: var(--font-ui);
    font-size: 10px;
    font-style: italic;
    color: var(--text-dim);
    line-height: 1.45;
    margin-top: 6px;
}

/* ── Status strip readout widths ───────────────────────────────────
   Reserve room so populating the trace readout on pointer-enter does
   not widen the bar and wrap the window readout onto a second row.
   The trace readout is widest with the Ableitung tool on, when it
   carries x, f(x) AND f′(x), so its reservation is sized for that. */
#fp-status-trace  { min-width: 40ch; }
#fp-status-window { min-width: 30ch; }

/* ── Mobile touch floor for the delete button ──────────────────────
   Desktop keeps the dense 20 px hitbox because the 220 px sidebar
   would otherwise rob horizontal room from the function-name input.
   At <=860 px the rail reflows to the full viewport width, so the
   delete button can grow to a 40 px tap floor without crowding the
   neighbouring controls. The visual `×` glyph itself is unchanged
   (font-size 15 px from the desktop rule); padding pushes the
   button's box out around it. */
@media (max-width: 860px) {
    .fp-fn-del {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        padding: 10px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
    }
}