/* ==========================================================================
   Sophicly Place on the Curve v1.0.0
   UNCOUNTED self-reflection widget — drag two markers along a practice→grade
   learning curve. Brand-styled, dark + light theme.
   ========================================================================== */

.sccv-widget {
    --sccv-font: 'Proxima Soft', system-ui, -apple-system, sans-serif;
    --sccv-text: #f0f0f2;
    --sccv-text-muted: rgba(255,255,255,0.55);
    --sccv-bg: #1C1D1F;
    --sccv-card-bg: #2a2b2e;
    --sccv-card-border: rgba(255,255,255,0.08);
    --sccv-grid: rgba(255,255,255,0.07);
    --sccv-curve: rgba(255,255,255,0.28);
    --sccv-axis: rgba(255,255,255,0.45);
    --sccv-now: #4D76FD;
    --sccv-target: #5333ed;
    --sccv-success: #1CD991;
    --sccv-error: #E74C3C;

    font-family: var(--sccv-font); max-width: 640px; margin: 24px auto;
    color: var(--sccv-text); -webkit-font-smoothing: antialiased;
    animation: sccvFadeIn 0.4s ease both;
}
.sccv-widget *, .sccv-widget *::before, .sccv-widget *::after { box-sizing: border-box; }
@keyframes sccvFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.sccv-title { font-size: 20px; font-weight: 600; margin-bottom: 16px; text-align: center; }

/* ── Chart ────────────────────────────────────────────────────────────── */

.sccv-chart {
    background: var(--sccv-card-bg);
    border: 1px solid var(--sccv-card-border);
    border-radius: 14px;
    padding: 14px 14px 6px;
    margin-bottom: 16px;
}
.sccv-svg { display: block; width: 100%; height: auto; user-select: none; }

.sccv-grid { stroke: var(--sccv-grid); stroke-width: 1; }
.sccv-curve {
    stroke: var(--sccv-curve); stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 2 7;
}
.sccv-drop { stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.55; }

.sccv-axis-label {
    font-family: var(--sccv-font); font-size: 10px; font-weight: 600;
    fill: var(--sccv-axis);
}
.sccv-axis-caption {
    font-family: var(--sccv-font); font-size: 10px; font-weight: 600;
    letter-spacing: 0.02em; fill: var(--sccv-text-muted);
}

/* ── Markers ──────────────────────────────────────────────────────────── */

.sccv-marker { cursor: grab; }
.sccv-marker:active, .sccv-marker--active { cursor: grabbing; }
.sccv-marker-dot {
    transition: r 0.12s ease, filter 0.15s ease;
}
.sccv-marker:hover .sccv-marker-dot {
    filter: drop-shadow(0 0 5px currentColor);
}
.sccv-marker--active .sccv-marker-dot { r: 11; }
.sccv-marker-label {
    font-family: var(--sccv-font); font-size: 11px; font-weight: 700;
    pointer-events: none;
}

/* ── Readout ──────────────────────────────────────────────────────────── */

.sccv-readout {
    background: var(--sccv-card-bg);
    border: 1px solid var(--sccv-card-border);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 8px;
}
.sccv-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 14px; line-height: 1.45;
}
.sccv-chip {
    display: inline-block; padding: 3px 11px; border-radius: 20px;
    font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap;
    /* background set inline per marker */
}
.sccv-readout-text { font-weight: 600; color: var(--sccv-text); }
.sccv-arrowless { font-weight: 500; color: var(--sccv-text-muted); }

.sccv-gap {
    margin-top: 2px; padding: 8px 12px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(83,51,237,0.18), rgba(44,0,62,0.08));
    font-size: 14px; font-weight: 700; color: var(--sccv-text);
}
.sccv-encourage {
    font-size: 13px; font-weight: 500; color: var(--sccv-text-muted);
    line-height: 1.4;
}
.sccv-status { font-size: 12px; font-weight: 600; min-height: 16px; }
.sccv-status--saved { color: var(--sccv-success); }
.sccv-status--error { color: var(--sccv-error); }
.sccv-status--info { color: var(--sccv-text-muted); }

/* ── Light Theme ──────────────────────────────────────────────────────── */

html[data-theme="light"] .sccv-widget, html.light .sccv-widget {
    --sccv-text: #1a1a1e;
    --sccv-text-muted: rgba(0,0,0,0.5);
    --sccv-bg: #f5f5f7;
    --sccv-card-bg: #fff;
    --sccv-card-border: rgba(0,0,0,0.1);
    --sccv-grid: rgba(0,0,0,0.07);
    --sccv-curve: rgba(0,0,0,0.22);
    --sccv-axis: rgba(0,0,0,0.45);
}

/* ── Focus Mode ───────────────────────────────────────────────────────── */

.sophicly-focus-mode .sccv-widget { max-width: none; margin: 24px 0; }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .sccv-widget { margin: 16px 8px; }
    .sccv-row { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .sccv-widget *, .sccv-widget *::before, .sccv-widget *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}