/* ── Resume card ────────────────────────────────────────────────────────────
   A paused sitting, shown on /catalog and /results.

   The previous banner was written entirely in inline styles with hardcoded hex
   (#f0fdfa, #99f6e4, #0f5d66), so it could not follow the theme and rendered as
   a bright mint slab in dark mode. It also led with a bookmark icon and a
   sentence, which told the reader nothing they could act on.

   This version borrows the study path's idiom: a quiet surface, a measured
   progress track, an eyebrow that names the state, and one obvious primary
   action with the destructive one kept ghosted beside it. Every colour is a
   token, so it holds in both themes. */

.resume-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.15rem;
    align-items: center;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-left: 3px solid var(--brand-ink, #1F5FBF);
    border-radius: 14px;
    background: var(--surface-raised, #fff);
    box-shadow: 0 1px 2px rgba(14, 18, 24, 0.04), 0 10px 28px -18px rgba(14, 18, 24, 0.22);
}

/* The dial carries the position in the paper, so the card states progress
   before it states anything else. Conic gradient rather than an SVG: one
   element, no viewBox to keep in sync with the layout. */
.resume-card__dial {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: conic-gradient(var(--brand-ink, #1F5FBF) calc(var(--resume-pct, 0) * 1%), var(--surface-sunk, #eef1f5) 0);
    display: grid;
    place-items: center;
    flex: none;
}
.resume-card__dial::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--surface-raised, #fff);
}
.resume-card__dial-num {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--brand-ink, #1F5FBF);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.resume-card__body { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.resume-card__eyebrow {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-ink, #1F5FBF);
}
.resume-card__title {
    font-size: 0.975rem;
    font-weight: 700;
    color: var(--text-strong, #111827);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Facts on one rule-separated line: position, work done, time left. Tabular so
   a ticking clock does not make the row jitter. */
.resume-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted, #4b5563);
    font-variant-numeric: tabular-nums;
}
.resume-card__meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.resume-card__sep { width: 1px; height: 0.75rem; background: var(--border-subtle, #e5e7eb); }
.resume-card__cloud { color: var(--success-ink, #0f7a55); font-size: 0.75rem; }

.resume-card__actions { display: flex; gap: 0.5rem; align-items: center; flex: none; }
.resume-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.05rem;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.resume-card__btn--primary { background: var(--brand-ink, #1F5FBF); color: #fff; }
.resume-card__btn--primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px var(--brand-ink, #1F5FBF);
}
/* Discard is destructive, so it stays quiet until it is deliberately pointed
   at - it should never compete with Resume for the eye. */
.resume-card__btn--ghost {
    background: transparent;
    color: var(--text-muted, #4b5563);
    border-color: var(--border-subtle, #e5e7eb);
}
.resume-card__btn--ghost:hover {
    color: var(--danger-ink, #b3352f);
    border-color: var(--danger-ink, #b3352f);
    background: var(--danger-soft, rgba(179, 53, 47, 0.06));
}

@media (max-width: 640px) {
    .resume-card { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.85rem; }
    .resume-card__actions { grid-column: 1 / -1; }
    .resume-card__btn { flex: 1; justify-content: center; }
    .resume-card__title { white-space: normal; }

    /* The facts stack one per line at this width, and the rules that separated
       them on a single line wrapped with them - each one trailing at the end of
       a line as a stray mark ("Question 1 of 100 |"). A stacked list separates
       itself, so the rules go and the rows get their own leading instead. */
    .resume-card__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
    /* Selector must outrank `.resume-card__meta > span` above (0,1,1), which a
       bare `.resume-card__sep` (0,1,0) does not - media queries add no
       specificity, so the rules stay unchanged and the marks stayed on screen. */
    .resume-card__meta > .resume-card__sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .resume-card__btn { transition: none; }
    .resume-card__btn:hover { transform: none; }
}