/* ==========================================================================
   Sophicly · What's Next? course chooser (v3.14.0)
   Consumes the shared --sc-* theme tokens (sophicly-theme.css) for light/dark;
   brand purple #5333ed stays fixed. Scholarly + calm — no gradients (bar the
   one allowed primary CTA discipline), no fat bordered buttons.
   ========================================================================== */

.scns-widget {
    --scns-purple: #5333ed;
    font-family: 'Proxima Soft', system-ui, -apple-system, sans-serif;
    color: var(--sc-text, #1c1d1f);
    max-width: 860px;
    margin: 0 auto;
}
.scns-widget.scns-dismissed .scns-upsell { display: none; }

.scns-head { text-align: center; margin-bottom: 20px; }
.scns-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--sc-text, #1c1d1f); }
.scns-intro { font-size: 15px; line-height: 1.5; margin: 0; color: var(--sc-text-muted, rgba(0,0,0,0.6)); }

.scns-gate-note {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0 auto 16px; padding: 10px 16px; max-width: 520px;
    font-size: 13px; font-weight: 600;
    color: var(--sc-text-muted, rgba(0,0,0,0.55));
    background: var(--sc-surface, #f3f2f8); border-radius: 10px;
}
.scns-gate-note svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Section heading (e.g. Poetry, Literature) */
.scns-section {
    margin: 22px 0 10px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--sc-text-muted, rgba(0,0,0,0.5));
}
.scns-section:first-of-type { margin-top: 8px; }

/* ── Card grid ───────────────────────────────────────────────────────────── */
.scns-grid {
    display: grid; gap: 12px; margin-bottom: 4px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.scns-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px; text-align: left; cursor: pointer;
    padding: 16px 16px 14px; min-height: 96px;
    background: var(--sc-surface, #fff);
    border: 2px solid transparent; /* resting = no border; appears on hover/chosen */
    border-radius: 14px;
    font-family: inherit; color: inherit;
    transition: transform 0.18s cubic-bezier(.16,1,.3,1), box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.scns-card:hover:not(.scns-card--locked) {
    transform: translateY(-2px);
    border-color: var(--scns-purple);
    box-shadow: 0 12px 28px -12px rgba(83,51,237,0.4);
}
.scns-card:active:not(.scns-card--locked) { transform: translateY(0); }
.scns-card-title { font-size: 16px; font-weight: 700; line-height: 1.25; }
.scns-card-sub { font-size: 13px; color: var(--sc-text-muted, rgba(0,0,0,0.55)); line-height: 1.4; }
.scns-card-cue {
    position: absolute; top: 14px; right: 14px;
    display: flex; color: var(--sc-text-dim, rgba(0,0,0,0.35));
    transition: color 0.16s ease, transform 0.16s ease;
}
.scns-card-cue svg { width: 18px; height: 18px; }
.scns-card:hover:not(.scns-card--locked) .scns-card-cue { color: var(--scns-purple); transform: translateX(2px); }
.scns-badge {
    align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
    background: rgba(83,51,237,0.12); color: var(--scns-purple);
}

/* Check badge (onboarding-tile style): white disc + green check-circle that
   springs in at the top-right on select; replaces the arrow cue. */
.scns-check {
    position: absolute; top: 10px; right: 10px;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    opacity: 0; transform: scale(0);
    transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), opacity 0.2s ease;
    pointer-events: none;
}
.scns-check svg { width: 22px; height: 22px; display: block; }

/* Chosen — accent border + faint accent wash + spring-in check (matches the
   onboarding tile selection language). */
.scns-card--chosen {
    border-color: var(--scns-purple);
    background: color-mix(in srgb, var(--scns-purple) 8%, var(--sc-surface, #fff));
    box-shadow: 0 8px 20px -10px rgba(83,51,237,0.5);
}
.scns-card--chosen .scns-check { opacity: 1; transform: scale(1); }
.scns-card--chosen .scns-card-cue { opacity: 0; }
.scns-card--saving { opacity: 0.6; pointer-events: none; }

/* Locked (free shelf, or gate closed) — aspirational, not greyed-dead */
.scns-card--locked { cursor: default; }
.scns-grid--locked .scns-card { opacity: 0.85; }
.scns-card--locked .scns-card-cue { color: var(--scns-purple); opacity: 0.7; }
.scns-card--locked:hover { transform: none; box-shadow: none; border-color: transparent; }

/* ── Upsell (free tier) ──────────────────────────────────────────────────── */
.scns-upsell {
    margin-top: 18px; padding: 20px; border-radius: 16px; text-align: center;
    background: var(--sc-surface, #f3f2f8);
    border: 1px solid var(--sc-border, rgba(0,0,0,0.08));
}
.scns-upsell-lead { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--scns-purple); }
.scns-upsell-body { font-size: 14px; line-height: 1.55; margin: 0 auto 16px; max-width: 520px; color: var(--sc-text-muted, rgba(0,0,0,0.62)); }
.scns-upsell-cta { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.scns-btn {
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    padding: 9px 18px; border-radius: 10px; border: none; text-decoration: none;
    transition: filter 0.15s ease, background 0.15s ease;
}
.scns-btn--primary { background: var(--scns-purple); color: #fff; }
.scns-btn--primary:hover { filter: brightness(1.08); }
.scns-btn--ghost { background: transparent; color: var(--sc-text-muted, rgba(0,0,0,0.55)); }
.scns-btn--ghost:hover { color: var(--sc-text, #1c1d1f); }

/* Saved confirmation (paid, no href) — once, after the whole widget */
.scns-widget.scns-saved::after {
    content: '✓ Locked in — this is now your next course in My Journey. Head to your dashboard to continue it.';
    display: block; text-align: center; margin-top: 14px;
    font-size: 13px; font-weight: 600; color: #1CD991;
}

/* ── Continue-Creative-Writing emphasis ──────────────────────────────────── */
.scns-card--cw { border-color: color-mix(in srgb, var(--scns-purple) 38%, var(--sc-border, rgba(0,0,0,0.1))); }

/* ── Guided recommender (3 Qs → one recommendation) ──────────────────────── */
.scns-rec { max-width: 560px; margin: 0 auto 8px; }
.scns-q-head { text-align: center; margin-bottom: 16px; }
.scns-q-count { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-text-dim, rgba(0,0,0,0.4)); }
.scns-q { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 6px 0 0; color: var(--sc-text, #1c1d1f); }
.scns-picks { display: flex; flex-direction: column; gap: 10px; }
.scns-picks--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.scns-q-sub { font-size: 13px; line-height: 1.5; margin: 6px 0 0; color: var(--sc-text-muted, rgba(0,0,0,0.6)); }

/* Per-text confidence ladder (1 shaky → 5 solid; house colour ladder) */
.scns-conf { display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin: 4px auto 0; }
.scns-conf-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 12px;
    background: var(--sc-surface, #fff);
    border: 1px solid var(--sc-border, rgba(0,0,0,0.1));
}
.scns-conf-title { font-size: 14px; font-weight: 600; }
.scns-conf-dots { display: flex; gap: 6px; flex-shrink: 0; }
.scns-dot {
    width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer;
    background: transparent; border: 2px solid var(--sc-border, rgba(0,0,0,0.22));
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.scns-dot:hover { transform: scale(1.12); }
.scns-rec-next { display: block; margin: 18px auto 0; }
.scns-pick {
    font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
    padding: 14px 16px; border-radius: 12px;
    background: var(--sc-surface, #fff);
    border: 2px solid transparent; /* resting = no border; appears on hover/selected */
    color: inherit;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.scns-pick:hover { border-color: var(--scns-purple); transform: translateY(-1px); }
.scns-pick--sel { border-color: var(--scns-purple); background: color-mix(in srgb, var(--scns-purple) 8%, var(--sc-surface, #fff)); }
.scns-back, .scns-skip {
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    background: none; border: none; color: var(--sc-text-muted, rgba(0,0,0,0.55));
}
.scns-back { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; }
.scns-back svg { width: 15px; height: 15px; }
.scns-back--rec { display: flex; justify-content: center; width: 100%; margin: 16px 0 4px; }
.scns-back:hover, .scns-skip:hover { color: var(--scns-purple); }
.scns-skip { display: block; margin: 14px auto 0; }

/* Recommendation card — the one highlighted "we recommend" tile */
.scns-rec-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    width: 100%; max-width: 560px; margin: 0 auto; text-align: left; cursor: pointer;
    padding: 20px; border-radius: 16px;
    background: color-mix(in srgb, var(--scns-purple) 6%, var(--sc-surface, #fff));
    border: 2px solid var(--scns-purple);
    box-shadow: 0 14px 32px -16px rgba(83,51,237,0.5);
    font-family: inherit; color: inherit;
    transition: transform 0.18s cubic-bezier(.16,1,.3,1), box-shadow 0.18s ease;
}
.scns-rec-card:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -16px rgba(83,51,237,0.55); }
.scns-rec-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--scns-purple); }
.scns-rec-flag svg { width: 14px; height: 14px; }
.scns-rec-card .scns-card-title { font-size: 20px; }
.scns-rec-why { font-size: 14px; line-height: 1.5; color: var(--sc-text-muted, rgba(0,0,0,0.62)); }
.scns-rec-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--scns-purple); }
.scns-rec-go svg { width: 18px; height: 18px; }
.scns-rec-alt { text-align: center; font-size: 13px; margin: 18px 0 10px; color: var(--sc-text-muted, rgba(0,0,0,0.55)); }

/* Escape ("my text isn't here") — soft, collapsed by default */
.scns-escape { margin-top: 16px; text-align: center; }
.scns-escape-toggle { font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: none; border: none; color: var(--sc-text-muted, rgba(0,0,0,0.55)); }
.scns-escape-toggle:hover { color: var(--scns-purple); }
.scns-escape-body { display: none; max-width: 480px; margin: 10px auto 0; font-size: 13px; line-height: 1.55; color: var(--sc-text-muted, rgba(0,0,0,0.6)); }
.scns-escape--open .scns-escape-body { display: block; }
.scns-escape-lead { margin: 10px auto 0; max-width: 480px; }
.scns-req-row { display: flex; gap: 8px; max-width: 480px; margin: 10px auto 0; }
.scns-req-input {
    flex: 1; min-width: 0; font-family: inherit; font-size: 14px;
    padding: 9px 12px; border-radius: 10px;
    border: 2px solid var(--sc-border, rgba(0,0,0,0.1));
    background: var(--sc-surface, #fff); color: inherit;
}
.scns-req-input:focus { outline: none; border-color: var(--scns-purple); }
.scns-req-send { white-space: nowrap; }
.scns-req-send:disabled { opacity: 0.6; cursor: default; }
.scns-req-done { max-width: 480px; margin: 12px auto 0; font-size: 13px; font-weight: 600; color: #1CD991; }

.scns-empty { text-align: center; font-size: 14px; color: var(--sc-text-muted, rgba(0,0,0,0.55)); }
.scns-manage-note { text-align: center; font-size: 12.5px; margin: 18px auto 0; max-width: 480px; color: var(--sc-text-dim, rgba(0,0,0,0.45)); }

/* Unseen-Poetry steer (non-blocking) */
.scns-warn {
    max-width: 560px; margin: 0 auto 16px; padding: 16px 18px; border-radius: 14px;
    background: color-mix(in srgb, #F1C40F 12%, var(--sc-surface, #fff));
    border: 1px solid color-mix(in srgb, #F1C40F 45%, var(--sc-border, rgba(0,0,0,0.1)));
}
.scns-warn-body { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--sc-text, #1c1d1f); }
.scns-warn-cta { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 520px) {
    .scns-grid,
    .scns-picks--grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .scns-card, .scns-card-cue, .scns-pick, .scns-rec-card { transition-duration: 0.01ms; }
}