/* /common/css/dl-profile-points.css — the shared hand-drawn profile editor
 * (DL.ProfilePoints, common/js/dl-profile-points.js). Loaded by
 * /browse/dive.html and /addlog/.
 *
 * Every colour is a token from dl.css (rule #5) — including the SVG preview,
 * which reaches for the same --chart-depth the real profile chart uses so a
 * drawn profile and a recorded one read as the same kind of thing. */

.pp-root { display: flex; flex-direction: column; gap: var(--space-3); }

/* The table borrows .dl-table's chrome; only the cells that hold inputs
   need sizing of their own. */
.pp-table { width: 100%; max-width: 32rem; }
.pp-table th { font-size: var(--font-size-xs); color: var(--text-muted); }
.pp-th-x { width: var(--touch-target); }

.pp-t,
.pp-d {
    width: 100%;
    min-height: var(--control-sm);
    padding: 0 var(--space-2);
    text-align: right;
    color: var(--text);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}
.pp-t:focus,
.pp-d:focus,
.pp-step-input:focus {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.pp-x {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    border: 0;
    background: none;
    color: var(--text-subtle);
    cursor: pointer;
    font-size: var(--font-size-md);
    line-height: 1;
}
.pp-x:hover { color: var(--err); }

.pp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.pp-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.pp-step-input {
    width: 4.5rem;
    min-height: var(--control-sm);
    padding: 0 var(--space-2);
    text-align: right;
    color: var(--text);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.pp-paste { display: flex; flex-direction: column; gap: var(--space-2); }
.pp-paste-box {
    width: 100%;
    max-width: 32rem;
    padding: var(--space-2);
    color: var(--text);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-sm);
    resize: vertical;
}
.pp-paste-apply { align-self: flex-start; }

.pp-preview {
    width: 100%;
    height: 200px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.pp-preview-area { fill: var(--chart-depth); fill-opacity: 0.22; }
.pp-preview-line {
    fill: none;
    stroke: var(--chart-depth);
    stroke-width: 2;
    stroke-linejoin: round;
    /* The viewBox is stretched by preserveAspectRatio="none", which would
       squash the stroke with it. */
    vector-effect: non-scaling-stroke;
}
.pp-preview-dot { fill: var(--chart-depth); }
.pp-preview-empty {
    fill: var(--text-subtle);
    font-size: var(--font-size-sm);
}

.pp-derived {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.pp-errors,
.pp-warnings {
    margin: 0;
    padding-left: var(--space-4);
    font-size: var(--font-size-xs);
    list-style: disc;
}
.pp-errors:empty,
.pp-warnings:empty { display: none; }
.pp-errors   { color: var(--err); }
.pp-warnings { color: var(--warn); }
/* .hint is --err in dl.css (it is the form-error voice). The estimate note
   keeps it, matching the cut editor's twin .pe-estimate, but these two are
   purely informational and must not shout. */
.pp-seeded,
.pp-paste .hint { color: var(--text-muted); margin: 0; }

@media (max-width: 600px) {
    .pp-table { max-width: none; }
    .pp-actions { gap: var(--space-2); }
}