/* ==========================================================================
   Sophicly Forgetting Curve v3.8.0
   Dark brand shell (matches keystone/tower). Slide-palette curve segments.
   ========================================================================== */

.scfc-widget {
    --scfc-bg-from: #2c003e;
    --scfc-bg-to:   #1b1240;
    --scfc-text:    #f5f0ff;
    --scfc-muted:   rgba(245, 240, 255, 0.5);
    --scfc-accent:  #51dacf;
    display: block;
    width: 100%;
    max-width: 860px;
    margin: 24px auto;
    font-family: 'Proxima Soft Complete', 'Inter', system-ui, sans-serif;
}

.scfc-inner {
    background: linear-gradient(150deg, var(--scfc-bg-from) 0%, var(--scfc-bg-to) 100%);
    border-radius: 24px;
    padding: clamp(18px, 3vw, 28px);
    color: var(--scfc-text);
    box-shadow: 0 18px 52px -12px rgba(44, 0, 62, 0.4);
}

.scfc-head { margin-bottom: 10px; }

.scfc-title {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--scfc-accent);
    letter-spacing: 0.01em;
}

.scfc-sub {
    font-size: 0.85rem;
    color: var(--scfc-muted);
    margin-top: 3px;
}

.scfc-svg {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-select: none;
}

/* Axes + grid */
.scfc-grid {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}
.scfc-tick {
    stroke: rgba(255, 255, 255, 0.10);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}
.scfc-ylab, .scfc-xlab {
    fill: var(--scfc-muted);
    font-size: 19px;
    font-weight: 600;
}
.scfc-axis-title {
    fill: var(--scfc-text);
    font-size: 20px;
    font-weight: 700;
    opacity: 0.85;
}

.scfc-curve {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    transition: d 0.12s ease;
}

/* Faint "no reviews" decay drawn behind the live curve for contrast. */
.scfc-baseline {
    stroke: rgba(255, 90, 95, 0.45);
    stroke-width: 2.5;
    stroke-dasharray: 3 7;
    stroke-linecap: round;
}
.scfc-baseline-lab {
    fill: rgba(255, 90, 95, 0.6);
    font-size: 17px;
    font-style: italic;
    font-weight: 600;
}

/* Review markers */
.scfc-marker-line {
    stroke-width: 2;
    stroke-dasharray: 5 5;
    opacity: 0.7;
}
.scfc-marker circle {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}
.scfc-marker-x {
    fill: var(--scfc-text);
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0.6;
}
.scfc-marker-x:hover { opacity: 1; }

.scfc-hint {
    fill: var(--scfc-muted);
    font-size: 20px;
    font-style: italic;
    pointer-events: none;
}

/* Footer readout + reset */
.scfc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.scfc-readout {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.92rem;
}
.scfc-count {
    font-weight: 700;
    color: var(--scfc-accent);
}
.scfc-longterm { color: var(--scfc-muted); }
.scfc-longterm strong { color: var(--scfc-text); }

.scfc-reset {
    appearance: none;
    font-family: inherit;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--scfc-text);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 40px;
    padding: 9px 20px;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, opacity 0.18s;
}
.scfc-reset:hover:not(:disabled) {
    border-color: var(--scfc-accent);
    color: var(--scfc-accent);
}
.scfc-reset:disabled { opacity: 0.35; cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .scfc-curve { transition: none; }
}