/* ═══════════════════════════════════════════════════════
   Fideograph Quiz Curriculum — curriculum.css v1.0.0
   Self-contained. No theme class dependencies.
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700&family=Playfair+Display:wght@700;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
    --fgc-stage-1: #1A6A38;
    --fgc-stage-2: #185FA5;
    --fgc-stage-3: #C9A84C;
    --fgc-stage-4: #8B3000;
    --fgc-ink: #1c1810;
    --fgc-ink2: #2e2a1e;
    --fgc-parch: #faf6ed;
    --fgc-parch2: #f4edd8;
    --fgc-border: #ddd5b8;
    --fgc-gold: #C9A84C;
    --fgc-serif: 'Source Serif 4', Georgia, serif;
    --fgc-display: 'Playfair Display', Georgia, serif;
    --fgc-garamond: 'EB Garamond', Georgia, serif;
    --fgc-consistent: #1A6A38;
    --fgc-tension: #B8860B;
    --fgc-locked: #888;
}

/* ── Wrapper ──────────────────────────────────────── */
.fgc-wrap {
    background: var(--fgc-parch);
    color: var(--fgc-ink);
    font-family: var(--fgc-serif);
    line-height: 1.65;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── Masthead ─────────────────────────────────────── */
.fgc-masthead {
    background: var(--fgc-ink);
    color: var(--fgc-parch);
    text-align: center;
    padding: 60px 24px 48px;
    position: relative;
    overflow: hidden;
}
.fgc-masthead__glow {
    position: absolute;
    top: -100px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 400px;
    background: radial-gradient(ellipse, rgba(201,168,76,.08) 0%, transparent 70%);
    pointer-events: none;
}
.fgc-masthead__inner { position: relative; max-width: 680px; margin: 0 auto; }
.fgc-masthead__series {
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--fgc-gold);
    margin-bottom: 12px;
}
.fgc-masthead__title {
    font-family: var(--fgc-display);
    font-size: clamp(24px, 5vw, 42px);
    font-weight: 900;
    margin-bottom: 12px;
}
.fgc-masthead__title em { color: var(--fgc-gold); font-style: italic; }
.fgc-masthead__sub {
    font-family: var(--fgc-garamond);
    font-size: 16px;
    color: rgba(250,246,237,.45);
    max-width: 520px;
    margin: 0 auto;
}

/* ── Guest Banner ─────────────────────────────────── */
.fgc-guest-banner {
    background: rgba(201,168,76,.08);
    border: 1px solid rgba(201,168,76,.2);
    border-radius: 6px;
    padding: 14px 20px;
    margin: 20px auto;
    max-width: 780px;
    font-size: 13px;
    color: var(--fgc-ink);
    text-align: center;
    font-family: var(--fgc-garamond);
}

/* ── Progress Overview ────────────────────────────── */
.fgc-progress-overview {
    max-width: 780px;
    margin: 24px auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fgc-progress-overview__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
.fgc-progress-overview__label {
    width: 100px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.fgc-progress-overview__bar {
    flex: 1;
    height: 6px;
    background: rgba(0,0,0,.06);
    border-radius: 3px;
    overflow: hidden;
}
.fgc-progress-overview__fill {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}
.fgc-progress-overview__count {
    font-size: 11px;
    color: rgba(28,24,16,.45);
    width: 42px;
    text-align: right;
    flex-shrink: 0;
}
.fgc-progress-overview__lock {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fgc-locked);
}

/* ── Stage ────────────────────────────────────────── */
.fgc-stage {
    max-width: 920px;
    margin: 0 auto 36px;
    padding: 0 16px;
}
.fgc-stage[data-stage="1"] { --stage-color: var(--fgc-stage-1); }
.fgc-stage[data-stage="2"] { --stage-color: var(--fgc-stage-2); }
.fgc-stage[data-stage="3"] { --stage-color: var(--fgc-stage-3); }
.fgc-stage[data-stage="4"] { --stage-color: var(--fgc-stage-4); }

.fgc-stage--locked { opacity: .6; }

.fgc-stage__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: color-mix(in srgb, var(--stage-color) 6%, transparent);
    border-left: 4px solid var(--stage-color);
    border-radius: 0 8px 8px 0;
    margin-bottom: 6px;
}
.fgc-stage__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fgc-stage__lock-icon { font-size: 14px; }
.fgc-stage__icon {
    color: var(--stage-color);
    font-size: 16px;
}
.fgc-stage__label {
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--stage-color);
    font-weight: 700;
}
.fgc-stage__title {
    font-family: var(--fgc-display);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--fgc-ink);
}
.fgc-stage__header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.fgc-stage__count {
    font-size: 11px;
    color: rgba(28,24,16,.45);
    white-space: nowrap;
}
.fgc-stage__bar {
    width: 80px;
    height: 5px;
    background: rgba(0,0,0,.06);
    border-radius: 3px;
    overflow: hidden;
}
.fgc-stage__bar-fill {
    height: 100%;
    background: var(--stage-color);
    border-radius: 3px;
    transition: width .4s ease;
}
.fgc-stage__desc {
    font-family: var(--fgc-garamond);
    font-size: 14px;
    color: rgba(28,24,16,.5);
    margin: 0 0 16px;
    padding-left: 24px;
}

/* ── Unlock Notice ────────────────────────────────── */
.fgc-unlock-notice {
    background: rgba(0,0,0,.03);
    border: 1px dashed rgba(0,0,0,.12);
    border-radius: 6px;
    padding: 12px 18px;
    font-size: 13px;
    color: rgba(28,24,16,.5);
    text-align: center;
    margin-bottom: 16px;
    font-family: var(--fgc-garamond);
}

/* ── Topic Grid ───────────────────────────────────── */
.fgc-stage__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* ── Topic Card ───────────────────────────────────── */
.fgc-topic {
    background: #fff;
    border: 1px solid var(--fgc-border);
    border-left: 4px solid var(--fgc-border);
    border-radius: 0 8px 8px 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .15s, box-shadow .15s;
}
.fgc-topic:hover:not(.fgc-topic--locked) {
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* States */
.fgc-topic--locked {
    border-left-color: #ccc;
    background: #f8f6f0;
    opacity: .55;
}
.fgc-topic--available {
    border-left-color: var(--stage-color);
}
.fgc-topic--in-progress {
    border-left-color: var(--stage-color);
}
.fgc-topic--complete {
    border-left-color: var(--fgc-consistent);
    background: linear-gradient(180deg, rgba(26,106,56,.04) 0%, #fff 40%);
}

/* Status Badge */
.fgc-topic__status { margin-bottom: 2px; }
.fgc-topic__badge {
    display: inline-block;
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
}
.fgc-topic__badge--complete {
    background: rgba(26,106,56,.1);
    color: var(--fgc-consistent);
}
.fgc-topic__badge--progress {
    background: color-mix(in srgb, var(--stage-color) 10%, transparent);
    color: var(--stage-color);
}
.fgc-topic__badge--available {
    background: rgba(28,24,16,.04);
    color: rgba(28,24,16,.5);
}
.fgc-topic__badge--locked {
    background: rgba(0,0,0,.04);
    color: #999;
}

/* Title and Meta */
.fgc-topic__title {
    font-family: var(--fgc-display);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--fgc-ink);
    line-height: 1.3;
}
.fgc-topic__meta {
    font-size: 11px;
    color: rgba(28,24,16,.4);
    margin: 0;
}

/* Score and Progress */
.fgc-topic__score {
    font-size: 12px;
    color: rgba(28,24,16,.55);
    font-family: var(--fgc-garamond);
}
.fgc-topic__bar {
    height: 4px;
    background: rgba(0,0,0,.06);
    border-radius: 2px;
    overflow: hidden;
}
.fgc-topic__bar-fill {
    height: 100%;
    background: var(--stage-color);
    border-radius: 2px;
    transition: width .3s ease;
}

/* Action */
.fgc-topic__action { margin-top: auto; padding-top: 6px; }
.fgc-topic__lock-hint {
    font-size: 11px;
    color: rgba(28,24,16,.35);
    font-style: italic;
    font-family: var(--fgc-garamond);
}

/* ── Buttons ──────────────────────────────────────── */
.fgc-btn {
    display: inline-block;
    font-family: var(--fgc-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    padding: 7px 18px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}
.fgc-btn--primary {
    background: var(--stage-color, var(--fgc-gold));
    color: #fff;
}
.fgc-btn--primary:hover { opacity: .88; }
.fgc-btn--ghost {
    background: transparent;
    color: var(--stage-color, var(--fgc-gold));
    border: 1px solid currentColor;
}
.fgc-btn--ghost:hover { background: rgba(0,0,0,.03); }

/* ── Compact Progress Widget ──────────────────────── */
.fgc-progress-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--fgc-serif);
}
.fgc-progress-compact__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.fgc-progress-compact__label {
    width: 80px;
    font-weight: 600;
    color: var(--fgc-ink);
}
.fgc-progress-compact__bar {
    flex: 1;
    height: 4px;
    background: rgba(0,0,0,.06);
    border-radius: 2px;
    overflow: hidden;
}
.fgc-progress-compact__fill {
    height: 100%;
    border-radius: 2px;
}
.fgc-progress-compact__pct {
    width: 32px;
    text-align: right;
    color: rgba(28,24,16,.4);
    font-size: 10px;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .fgc-stage__grid {
        grid-template-columns: 1fr;
    }
    .fgc-stage__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .fgc-stage__title { font-size: 18px; }
    .fgc-masthead { padding: 40px 16px 32px; }
    .fgc-masthead__title { font-size: 26px; }
}
@media (max-width: 480px) {
    .fgc-stage { padding: 0 10px; }
    .fgc-progress-overview { padding: 0 10px; }
    .fgc-progress-overview__label { width: 70px; font-size: 9px; }
}

/* ── Formation Profile Section ────────────────────── */
.fgc-profile-section {
    max-width: 920px;
    margin: 0 auto 24px;
    padding: 0 16px;
}
.fgc-profile-section .fg-profile-wrap,
.fgc-profile-section .fgf-profile {
    background: #fff;
    border: 1px solid var(--fgc-border);
    border-radius: 8px;
    overflow: hidden;
}

/* ═══ ARCHETYPE BADGE (in masthead) ═══ */
.fgc-arch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 4px 16px 4px 10px;
    border: 1px solid color-mix(in srgb, var(--arch-color) 40%, transparent);
    border-radius: 99px;
    background: color-mix(in srgb, var(--arch-color) 8%, transparent);
}
.fgc-arch__icon { font-size: 16px; color: var(--arch-color); }
.fgc-arch__name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--arch-color);
}

/* ═══ ASSESS BANNER ═══ */
.fgc-assess-banner {
    max-width: 780px;
    margin: 20px auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(201,168,76,.06);
    border: 1px solid rgba(201,168,76,.18);
    border-radius: 8px;
    font-size: 14px;
    color: var(--fgc-ink);
    font-family: var(--fgc-garamond);
}
.fgc-btn--gold {
    background: var(--fgc-gold);
    color: var(--fgc-ink);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .fgc-assess-banner { flex-direction: column; text-align: center; }
}

/* ═══ FORMATION DASHBOARD ═══ */
.fgc-dashboard {
    max-width: 920px;
    margin: 0 auto 8px;
    padding: 0 16px;
}
.fgc-dash-focus {
    background: #fff;
    border: 1px solid var(--fgc-border);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 12px;
}
.fgc-dash-focus__desc {
    font-family: var(--fgc-garamond);
    font-size: 15px;
    line-height: 1.7;
    color: rgba(28,24,16,.6);
    margin: 0 0 8px;
}
.fgc-dash-focus__action {
    font-size: 13px;
    margin: 0;
    color: rgba(28,24,16,.55);
}
.fgc-dash-focus__label {
    font-weight: 700;
    color: var(--fgc-gold);
}

.fgc-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.fgc-dash-card {
    background: #fff;
    border: 1px solid var(--fgc-border);
    border-radius: 8px;
    padding: 16px;
}
.fgc-dash-card__title {
    font-family: var(--fgc-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--fgc-ink);
    margin: 0 0 10px;
    letter-spacing: .02em;
}
.fgc-dash-card__link {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--fgc-gold);
    text-decoration: none;
    font-weight: 600;
}
.fgc-dash-card__link:hover { text-decoration: underline; }

/* Vectors */
.fgc-vec {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.fgc-vec__label {
    width: 58px;
    font-size: 11px;
    color: rgba(28,24,16,.5);
    flex-shrink: 0;
}
.fgc-vec__bar {
    flex: 1;
    height: 5px;
    background: rgba(0,0,0,.06);
    border-radius: 3px;
    overflow: hidden;
}
.fgc-vec__fill {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}
.fgc-vec__fill--int { background: #6B4C9A; }
.fgc-vec__fill--spi { background: #1A9C80; }
.fgc-vec__pct {
    width: 30px;
    font-size: 10px;
    color: rgba(28,24,16,.4);
    text-align: right;
    flex-shrink: 0;
}

/* Engagement */
.fgc-engage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.fgc-engage__stat {
    text-align: center;
    padding: 6px 0;
}
.fgc-engage__num {
    display: block;
    font-family: var(--fgc-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--fgc-ink);
    line-height: 1.1;
}
.fgc-engage__lbl {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(28,24,16,.4);
}

/* Rule of Life items */
.fgc-rule-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
}
.fgc-rule-item__freq {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
.fgc-freq--daily { background: rgba(26,106,56,.1); color: #1A6A38; }
.fgc-freq--weekly { background: rgba(24,95,165,.1); color: #185FA5; }
.fgc-freq--monthly { background: rgba(201,168,76,.1); color: #8B6914; }
.fgc-rule-item__text {
    color: rgba(28,24,16,.6);
    line-height: 1.4;
}

/* Dashboard meta */
.fgc-dash-meta {
    font-size: 11px;
    color: rgba(28,24,16,.35);
    text-align: center;
    padding: 6px 0 0;
}
.fgc-dash-meta__link {
    color: var(--fgc-gold);
    text-decoration: none;
}
.fgc-dash-meta__link:hover { text-decoration: underline; }

/* ═══ SECTION DIVIDER ═══ */
.fgc-section-divider {
    max-width: 920px;
    margin: 28px auto 20px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.fgc-section-divider__line {
    flex: 1;
    height: 1px;
    background: var(--fgc-border);
}
.fgc-section-divider__text {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(28,24,16,.3);
    font-weight: 700;
    flex-shrink: 0;
}

/* ═══ RESPONSIVE DASHBOARD ═══ */
@media (max-width: 640px) {
    .fgc-dash-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
    .fgc-dash-grid { grid-template-columns: 1fr; }
}

/* ═══ FIX: Masthead spacing + archetype legibility ═══ */
.fgc-masthead {
    padding-bottom: 56px;
}
.fgc-arch {
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Spacing between masthead and first content block */
.fgc-guest-banner,
.fgc-assess-banner,
.fgc-dashboard,
.fgc-progress-overview {
    margin-top: 28px;
}

/* ═══ FIX: Retake button styling ═══ */
.fgc-dash-meta {
    font-size: 12px;
    padding: 10px 0 0;
}
.fgc-dash-meta__link {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid rgba(201,168,76,.3);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--fgc-gold);
    text-decoration: none;
    margin-left: 4px;
    transition: background .15s;
}
.fgc-dash-meta__link:hover {
    background: rgba(201,168,76,.08);
    text-decoration: none;
}