/* ==========================================================================
   Sophicly · Unit Recap (v3.20.0)
   Per-unit stats panel, shown at the end of a LearnDash Lesson. Clones the
   certificate course-recap (etch-theme-child certificate-presentation.php) —
   sunken shell, raised tiles separated by SURFACE CONTRAST (no borders,
   BRAND.md §0), SVG rings, house grade ladder, count-up + ring-fill entrance.

   Light/dark via the shared --sc-* tokens (sophicly-theme.css): the shell is
   the sunken surface and tiles are the raised surface, preserving the cert's
   "tiles lift off the shell" relationship in BOTH themes. House grade colours
   and the brand purple bar/gradient stay fixed hex (brand-locked).
   ========================================================================== */

.scur {
    --scur-stagger: 0s;
    box-sizing: border-box;
    width: 100%;
    max-width: 880px;
    margin: 1.5rem auto;
    padding: clamp(1.15rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.75rem);
    border-radius: 20px;
    background: var(--sc-surface-2);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    color: var(--sc-text);
    font-family: inherit;
}
.scur *, .scur *::before, .scur *::after { box-sizing: border-box; }

/* Entrance — the panel rises, then each block fades up in sequence; counters
   count and rings fill as their tile arrives (timed in JS to match). Gated on
   .is-in so it only fires when scrolled into view. */
@keyframes scurIn   { from { opacity: 0; transform: translateY(20px) scale(0.985); } }
@keyframes scurRise { from { opacity: 0; transform: translateY(16px); } }

.scur.is-in { animation: scurIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.scur:not(.is-in) .scur-head,
.scur:not(.is-in) .scur-grid > * { opacity: 0; }
.scur.is-in .scur-head,
.scur.is-in .scur-grid > * { animation: scurRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.scur.is-in .scur-head { animation-delay: 0.06s; }
.scur.is-in .scur-grid > *:nth-child(1) { animation-delay: 0.20s; }
.scur.is-in .scur-grid > *:nth-child(2) { animation-delay: 0.28s; }
.scur.is-in .scur-grid > *:nth-child(3) { animation-delay: 0.36s; }
.scur.is-in .scur-grid > *:nth-child(4) { animation-delay: 0.44s; }

/* ── Header ── */
.scur-head { text-align: center; margin-bottom: clamp(1.1rem, 3vw, 1.6rem); }
.scur-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sc-accent);
}
.scur-title {
    margin: 0;
    font-family: 'Playfair Display Complete', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.45rem, 4vw, 2.2rem);
    line-height: 1.1;
    color: var(--sc-text);
}
.scur-sub { margin: 0.5rem 0 0; font-size: 0.86rem; color: var(--sc-text-muted); }

/* ── Grid — adaptive: 2-4 tiles. Equal columns, wraps on narrow widths. The
   grade tile (when present) is the hero and spans a little wider. ── */
.scur-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(0.75rem, 2vw, 1.15rem);
    align-items: stretch;
}
.scur-grade { grid-column: span 1; }

/* Tiles read as raised ZONES inside the shell (no nested borders/shadows —
   the shell carries the elevation; tiles lift by surface contrast). */
.scur-grade,
.scur-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border-radius: 14px;
    background: var(--sc-surface);
}
.scur-grade { gap: 0.85rem; padding: clamp(1.25rem, 3vw, 1.85rem); }

/* ── Rings (SVG) ── */
.scur-ring { position: relative; }
.scur-ring--lg { width: clamp(140px, 20vw, 184px); }
.scur-ring--sm { width: clamp(96px, 14vw, 116px); }
.scur-ring svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.scur-ring-track {
    fill: none;
    stroke: var(--sc-border);
    stroke-width: 9;
}
.scur-ring-fill {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 326.726;
    stroke-dashoffset: 326.726;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.scur-ring__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1em;
}
.scur-ring__num {
    font-weight: 700;
    line-height: 1;
    color: var(--sc-text);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
}
.scur-ring--sm .scur-ring__num { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.scur-ring__num--sm { color: var(--sc-text-dim); }
.scur-ring__unit {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sc-text-muted);
}
/* True 9: the ring arc carries the brand gradient; the number tints brand
   purple-light — no gradient text. */
.scur-grade.is-nine .scur-ring__num { color: #8066ff; }
.scur-grade__cap {
    margin: 0;
    max-width: 30ch;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--sc-text-muted);
}
.scur-grade__cap strong { color: var(--sc-text); font-weight: 600; }

/* ── Stat tiles ── */
.scur-tile__label {
    margin: 0.6rem 0 0;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sc-text);
}
.scur-tile__hint { margin: 0.2rem 0 0; font-size: 0.68rem; color: var(--sc-text-muted); }
.scur-stat {
    margin: 0;
    font-weight: 700;
    line-height: 1;
    color: var(--sc-text);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.9rem, 5vw, 2.7rem);
}
.scur-stat__of { font-size: 0.5em; color: var(--sc-text-muted); font-weight: 600; }

.scur-bar {
    width: 100%;
    height: 6px;
    margin-top: 0.75rem;
    border-radius: 999px;
    background: var(--sc-border);
    overflow: hidden;
}
.scur-bar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #5333ed;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .scur.is-in { animation: none; }
    .scur.is-in .scur-head,
    .scur.is-in .scur-grid > * { animation: none; }
    .scur:not(.is-in) .scur-head,
    .scur:not(.is-in) .scur-grid > * { opacity: 1; }
    .scur-ring-fill,
    .scur-bar__fill { transition: none; }
}