/* ==========================================================================
   EXPERIENCE.CSS — Student Portal redesign layer
   ──────────────────────────────────────────────────────────────────────────
   Loaded AFTER student.css on every page. Pure overlay: it never removes
   behaviour, it re-skins the shell and adds micro-interaction primitives.
     1. Extended design tokens
     2. Micro-interaction primitives (ripple, press, reveal)
     3. Auth experience  (immersive dark scene + solid panel)
     4. App shell        (sidebar, main canvas)
     5. Dashboard        (welcome hero, stats, action cards, progress)
     6. Reduced motion
   ========================================================================== */

/* ==========================================================================
   1. EXTENDED TOKENS
   ========================================================================== */
:root {
    /* Deep-ocean ink ramp (auth scene + sidebar) */
    --ink-950: #03110f;
    --ink-900: #06211e;
    --ink-800: #0a312d;
    --ink-700: #0e423d;

    /* Light surface ramp (app canvas) */
    --surface-0:  #f4faf8;
    --surface-1:  #ffffff;
    --surface-2:  #eef7f4;
    --line-soft:  #dcebe7;
    --line-mid:   #c4ddd7;

    /* Accent ramp */
    --teal-650:   #0c8377;
    --cyan-300:   #67e8f9;

    /* Elevation */
    --elev-1: 0 1px 2px rgba(8, 51, 46, .05), 0 2px 8px rgba(8, 51, 46, .05);
    --elev-2: 0 2px 6px rgba(8, 51, 46, .06), 0 10px 28px rgba(8, 51, 46, .09);
    --elev-3: 0 6px 16px rgba(3, 17, 15, .22), 0 28px 80px rgba(3, 17, 15, .34);

    /* Motion — exponential ease-outs only */
    --ease-out:   cubic-bezier(.22, 1, .36, 1);   /* ~expo-out */
    --ease-swift: cubic-bezier(.16, 1, .3, 1);
    --dur-fast:   .16s;
    --dur-mid:    .26s;

    /* Semantic z-scale */
    --z-nav: 50; --z-sticky: 100; --z-backdrop: 900; --z-modal: 1000; --z-toast: 20000;
}

/* ==========================================================================
   2. MICRO-INTERACTION PRIMITIVES
   ========================================================================== */

/* Ripple host + ink ripple (spawned by experience.js on pointerdown) */
.xp-ripple-host { position: relative; overflow: hidden; }
.xp-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: currentColor;
    opacity: .14;
    transform: scale(0);
    animation: xp-ripple .55s var(--ease-out) forwards;
}
@keyframes xp-ripple {
    to { transform: scale(1); opacity: 0; }
}

/* Tactile press for primary controls */
.btn--auth, .s-nav-item, .action-card, .prog-outer-header, .prog-cat-header {
    transition-property: transform, box-shadow, background, border-color, color;
    transition-duration: var(--dur-fast);
    transition-timing-function: var(--ease-out);
}
.btn--auth:active { transform: scale(.985); }

/* ==========================================================================
   3. AUTH EXPERIENCE — deep-ocean scene
   ========================================================================== */

body.auth-page {
    background: radial-gradient(120% 90% at 78% 12%, #0c4f47 0%, var(--ink-900) 46%, var(--ink-950) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}
/* Replace the old radial overlay with a quieter one */
body.auth-page::before {
    background:
        radial-gradient(ellipse at 14% 86%, rgba(34, 211, 238, .10) 0%, transparent 55%),
        radial-gradient(ellipse at 86% 10%, rgba(13, 148, 136, .14) 0%, transparent 55%);
}

/* three.js canvas sits behind everything */
.xp-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

/* Large soft glows — cheap depth without GPU cost */
.xp-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.xp-glow--a { width: 46vw; height: 46vw; left: -12vw; bottom: -18vw; background: rgba(13, 148, 136, .20); }
.xp-glow--b { width: 34vw; height: 34vw; right: -10vw; top: -12vw;  background: rgba(34, 211, 238, .10); }

/* ── Stage layout (new login page) ─────────────────────────────────────── */
.xp-stage {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    width: min(1120px, 100% - 48px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
    padding-block: 48px;
}

/* ── Hero (left) ───────────────────────────────────────────────────────── */
.xp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 9px;
    border: 1px solid rgba(204, 251, 241, .22);
    border-radius: var(--radius-pill);
    background: rgba(6, 33, 30, .45);
    margin-bottom: 28px;
}
.xp-hero-badge img { width: 30px; height: 30px; object-fit: contain; }
.xp-hero-badge span {
    color: #ccfbf1;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.xp-hero-title {
    font-size: clamp(2.6rem, 5.4vw, 4.25rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #f3fdfa;
    margin-bottom: 18px;
    max-width: 12ch;
}
.xp-hero-title .xp-char { display: inline-block; will-change: transform; }
.xp-hero-sub {
    color: rgba(204, 251, 241, .82);
    font-size: 1.05rem;
    line-height: var(--leading-normal);
    margin-bottom: 30px;
    max-width: 44ch;
}
.xp-hero-points {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 0;
}
.xp-hero-points li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(204, 251, 241, .72);
    font-size: .88rem;
    font-weight: 500;
}
.xp-hero-points li::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cyan-300);
    box-shadow: 0 0 10px rgba(103, 232, 249, .8);
}

/* ── Form panel (right) — solid, credible, elevated ────────────────────── */
.xp-form-card {
    position: relative;
    z-index: 1;
    background: var(--surface-1);
    border-radius: 24px;
    padding: clamp(28px, 3.4vw, 42px);
    box-shadow: var(--elev-3);
    will-change: transform;
}
.xp-form-card h2 {
    color: #0f2e2a;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 4px;
}
.xp-form-hint {
    color: #587571;
    font-size: .9rem;
    margin-bottom: 26px;
}

/* Light-panel field overrides (auth fields are glass/white by default) */
.xp-form-card .field { margin-bottom: 18px; }
.xp-form-card .field__label {
    color: #41605b;
    font-size: .72rem;
    letter-spacing: .09em;
    font-weight: 600;
}
.xp-form-card .field__input {
    height: 48px;
    background: var(--surface-0);
    border: 1.5px solid var(--line-mid);
    border-radius: 12px;
    color: #10312d;
    font-size: .95rem;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.xp-form-card .field__input::placeholder { color: #587571; }
.xp-form-card .field__input:hover { border-color: #9fc5bd; }
.xp-form-card .field__input:focus,
.xp-form-card .field__input:focus:not(:focus-visible) {
    outline: none;
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, .14);
}
.xp-form-card .field__input:user-invalid {
    border-color: #dc2626;
    background-color: #fef2f2;
}
.xp-form-card .field__input:user-valid { border-color: #34d399; }

.xp-form-card .remember-me { margin: 4px 0 18px; }
.xp-form-card .remember-me input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--color-primary);
}
.xp-form-card .remember-me label { color: #41605b; font-size: .85rem; }

.xp-form-card .message-error,
.xp-form-card .message-success { min-height: 0; margin-top: 0; }
.xp-form-card .message-error   { color: #b91c1c; font-size: .85rem; font-weight: 500; }
.xp-form-card .message-success { color: #047857; font-size: .85rem; font-weight: 500; }
.xp-form-card .message-error:not(:empty),
.xp-form-card .message-success:not(:empty) { margin-bottom: 12px; }

.xp-form-card .btn--auth {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .08em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(13, 148, 136, .35);
    will-change: transform;
}
.xp-form-card .btn--auth:hover {
    background: linear-gradient(180deg, var(--teal-650) 0%, #0c5f58 100%);
    box-shadow: 0 8px 24px rgba(13, 148, 136, .45);
}
.xp-form-card .btn--auth:disabled {
    opacity: .65;
    cursor: progress;
    transform: none;
}

.xp-form-card .auth-links { margin-top: 22px; }
.xp-form-card .forgot-link { text-align: center; margin-bottom: 10px; }
.xp-form-card .forgot-link a,
.xp-form-card .signup-text a {
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.xp-form-card .forgot-link a:hover,
.xp-form-card .signup-text a:hover { border-bottom-color: var(--color-primary-dark); }
.xp-form-card .forgot-link a { font-size: .85rem; font-weight: 500; }
.xp-form-card .signup-text {
    text-align: center;
    color: #587571;
    font-size: .88rem;
}

/* ── Legacy auth pages (regis / recovery) on the new dark scene ────────── */
body.auth-page .login-card { box-shadow: var(--elev-3); }
body.auth-page .login-card__glass {
    background: rgba(7, 36, 33, .66);
    border-color: rgba(204, 251, 241, .16);
}
body.auth-page .login-card__brand { background: rgba(255, 255, 255, .98); }
body.auth-page .login-card__glass .forgot-link a,
body.auth-page .login-card__glass .signup-text a { color: #5eead4; }

/* ── Auth responsive ───────────────────────────────────────────────────── */
@media (max-width: 880px) {
    .xp-stage {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-block: 40px 32px;
        width: min(480px, 100% - 40px);
    }
    .xp-hero { text-align: center; }
    .xp-hero-badge { margin-bottom: 20px; }
    .xp-hero-title { margin-inline: auto; font-size: clamp(2.2rem, 9vw, 2.9rem); }
    .xp-hero-sub { margin-inline: auto; margin-bottom: 20px; font-size: .95rem; }
    .xp-hero-points { justify-content: center; }
}

/* ==========================================================================
   4. APP SHELL — sidebar + canvas polish
   ========================================================================== */

.layout-body { background: var(--surface-0); }
.main-content { background: var(--surface-0); }

.sidebar {
    background: linear-gradient(178deg, var(--ink-900) 0%, var(--ink-800) 58%, #0c443e 100%);
    box-shadow: inset -1px 0 0 rgba(204, 251, 241, .07);
}
.sidebar__header { border-bottom-color: rgba(204, 251, 241, .10); }

/* Brand block (replaces old inline styles on home; harmless elsewhere) */
.xp-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.xp-brand img { width: 36px; height: 36px; object-fit: contain; }
.xp-brand-name { font-size: 1.1rem; font-weight: 700; color: #ccfbf1; letter-spacing: -0.01em; }
.xp-brand-tag {
    font-size: .68rem;
    font-weight: 600;
    color: #5eead4;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-left: 46px;
}

/* Logged-in user chip */
.xp-userchip-wrap { padding: 12px 14px 0; }
.xp-userchip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(204, 251, 241, .08);
    border: 1px solid rgba(204, 251, 241, .10);
}
.xp-userchip-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, #0a6b62 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #fff;
    flex-shrink: 0;
}
.xp-userchip-name { font-size: .82rem; font-weight: 700; color: #fff; line-height: 1.3; }
.xp-userchip-role { font-size: .68rem; color: rgba(204, 251, 241, .60); }

/* Nav refinement: indicator dot + slide */
.s-nav-item {
    border-radius: 10px;
    padding: 10px 14px 10px 16px;
    color: rgba(220, 248, 242, .78);
}
.s-nav-item:hover { background: rgba(204, 251, 241, .09); transform: translateX(2px); }
.s-nav-item.active {
    background: rgba(204, 251, 241, .14);
    box-shadow: inset 0 0 0 1px rgba(204, 251, 241, .14);
}
.s-nav-item.active::after {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cyan-300);
    box-shadow: 0 0 8px rgba(103, 232, 249, .9);
    margin-left: auto;
}
.s-nav-item svg, .s-nav-item i { opacity: .85; }

/* ==========================================================================
   5. DASHBOARD
   ========================================================================== */

/* ── Welcome hero ──────────────────────────────────────────────────────── */
.dash-welcome {
    position: relative;
    overflow: hidden;
    background: linear-gradient(112deg, var(--ink-900) 0%, var(--ink-700) 62%, #0d6b61 100%);
    border-radius: 20px;
    padding: 30px 32px;
    box-shadow: var(--elev-2);
    isolation: isolate;
}
.dash-welcome::before,
.dash-welcome::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(204, 251, 241, .14);
    pointer-events: none;
    z-index: -1;
}
.dash-welcome::before { width: 340px; height: 340px; right: -90px;  top: -190px; }
.dash-welcome::after  { width: 480px; height: 480px; right: -160px; top: -270px; }
.dash-welcome-text h2 {
    color: #f3fdfa;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.dash-welcome-text h2 span { color: #99f6e4; }
.dash-welcome-text p { color: rgba(204, 251, 241, .72); font-size: .92rem; margin-top: 4px; }
.dash-welcome-avatar {
    background: linear-gradient(135deg, var(--color-primary) 0%, #0a6b62 100%);
    border: 2px solid rgba(204, 251, 241, .35);
    box-shadow: 0 6px 20px rgba(3, 17, 15, .35);
    color: #fff;
}

/* ── Stats ─────────────────────────────────────────────────────────────── */
.stat-card {
    background: var(--surface-1);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    box-shadow: var(--elev-1);
    transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out),
                border-color var(--dur-mid) var(--ease-out);
    will-change: transform;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: var(--line-mid); }
.stat-icon {
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.stat-icon svg { width: 21px; height: 21px; }
.stat-icon.teal  { background: #ccfbf1; color: #0f766e; }
.stat-icon.blue  { background: #e0f2fe; color: #0369a1; }
.stat-icon.amber { background: #fef3c7; color: #b45309; }
.stat-value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ── Section titles & notice ───────────────────────────────────────────── */
.dash-section-title { display: flex; align-items: center; gap: 8px; }
.dash-notice {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 14px;
    color: #78350f;
}

/* ── Action cards ──────────────────────────────────────────────────────── */
.dash-cards { gap: 16px; }
.action-card {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    box-shadow: var(--elev-1);
    overflow: hidden;
    will-change: transform;
}
.action-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-mid);
    box-shadow: var(--elev-2);
}
.action-card-icon {
    width: 44px; height: 44px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
    transition: transform var(--dur-mid) var(--ease-out);
}
.action-card-icon svg { width: 21px; height: 21px; }
.action-card:hover .action-card-icon { transform: scale(1.08) rotate(-3deg); }
/* Differentiated hue per card (order matches home.html) */
.dash-cards .action-card:nth-child(7n+1) .action-card-icon { background: #ccfbf1; color: #0f766e; }
.dash-cards .action-card:nth-child(7n+2) .action-card-icon { background: #e0f2fe; color: #0369a1; }
.dash-cards .action-card:nth-child(7n+3) .action-card-icon { background: #ede9fe; color: #6d28d9; }
.dash-cards .action-card:nth-child(7n+4) .action-card-icon { background: #fce7f3; color: #be185d; }
.dash-cards .action-card:nth-child(7n+5) .action-card-icon { background: #dcfce7; color: #15803d; }
.dash-cards .action-card:nth-child(7n+6) .action-card-icon { background: #fef3c7; color: #b45309; }
.dash-cards .action-card:nth-child(7n+7) .action-card-icon { background: #ffe4e6; color: #be123c; }
.action-card h3 { letter-spacing: -0.01em; }
.action-card-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary-dark);
    font-weight: 600;
    transition: gap var(--dur-mid) var(--ease-out);
}
.action-card:hover .action-card-arrow { gap: 11px; }

/* ── Progress (My Requirement) ─────────────────────────────────────────── */
.prog-outer-card {
    background: var(--surface-1);
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    box-shadow: var(--elev-1);
}
.prog-outer-header { border-radius: 18px; }
.prog-outer-header:hover { background: var(--surface-2); }
.prog-outer-chevron,
.prog-cat-chevron { transition: transform .35s var(--ease-swift); }
.prog-cat-card {
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--surface-1);
}
.prog-cat-header:hover { background: var(--surface-2); }

/* ==========================================================================
   6. TASK PAGES — page-topbar shell (all eval pages) + JC Topic composer
   ========================================================================== */

/* Shared top bar on task pages (jc_topic, appointment, labs, clinic, …) */
.page-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: linear-gradient(90deg, var(--ink-900) 0%, var(--ink-800) 100%);
    box-shadow: 0 1px 0 rgba(204, 251, 241, .08), 0 6px 20px rgba(3, 17, 15, .14);
    padding: 12px 24px;
}
.eval-body { background: var(--surface-0); }
.eval-container {
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    box-shadow: var(--elev-1);
}

/* ── JC Topic page (body.xp-task) ──────────────────────────────────────── */
.xp-task-wrap {
    max-width: 680px;
    margin: 36px auto 64px;
    padding: 0 20px;
}

/* Page header */
.xp-task-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.xp-task-glyph {
    width: 52px; height: 52px;
    border-radius: 15px;
    background: #ccfbf1;
    color: #0f766e;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .14);
    flex-shrink: 0;
}
.xp-task-glyph svg { width: 25px; height: 25px; }
.xp-task-titles { flex: 1; min-width: 220px; }
.xp-task-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #0f2e2a;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.xp-task-sub { color: #587571; font-size: .9rem; margin-top: 3px; max-width: 52ch; }
.xp-task-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    border: 1px solid var(--line-soft);
    box-shadow: var(--elev-1);
    font-size: .84rem;
    color: #41605b;
    white-space: nowrap;
}
.xp-task-user strong { color: #0f766e; font-weight: 700; }
.xp-task-user::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 6px rgba(22, 163, 74, .55);
}

/* Composer card */
.xp-composer {
    background: var(--surface-1);
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    box-shadow: var(--elev-1);
    padding: clamp(20px, 4vw, 28px);
    margin-bottom: 30px;
}
.xp-field { margin-bottom: 18px; }
.xp-task .s-label { color: #2c4a45; font-size: .86rem; margin-bottom: 7px; }
.xp-optional { font-weight: 400; color: #587571; font-size: .8rem; }
.xp-task .s-input {
    max-width: none;
    padding: 11px 14px;
    border: 1.5px solid var(--line-mid);
    border-radius: 12px;
    background: var(--surface-0);
    font-size: .92rem;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.xp-task .s-input:hover { border-color: #9fc5bd; }
.xp-task .s-input:focus,
.xp-task .s-input:focus:not(:focus-visible) {
    outline: none;
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, .14);
}
.xp-task .s-input.xp-date { max-width: 230px; }

/* Topic input + search */
.xp-input-row { display: flex; gap: 10px; align-items: stretch; }
.xp-input-row .s-input { flex: 1; }
.xp-task .btn--primary {
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(13, 148, 136, .28);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.xp-task .btn--primary:hover { box-shadow: 0 6px 18px rgba(13, 148, 136, .38); }
.xp-task .btn--primary:active { transform: scale(.985); }
.xp-task .btn--primary:disabled { opacity: .65; cursor: progress; }

/* Word meter (5-dot progress toward the search minimum) */
.xp-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.xp-meter-dots { display: flex; gap: 5px; }
.xp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line-mid);
    transition: background .25s var(--ease-out), transform .25s var(--ease-out);
}
.xp-dot.on { background: var(--color-primary); transform: scale(1.18); }
.xp-meter-text { font-size: .8rem; color: #587571; }
.xp-meter-text.ok { color: #0f766e; font-weight: 600; }

/* Results box — full border + tint (replaces the old side-stripe) */
.xp-task .jc-results-box {
    border: 1px solid var(--line-mid);
    background: var(--surface-2);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.xp-task .jc-results-box--ok   { border-color: #bbf7d0; background: #f0fdf4; }
.xp-task .jc-results-box--warn { border-color: #fecaca; background: #fef2f2; }

/* Status line (id selector — survives className resets from setMsg) */
#jcMessage { font-size: .875rem; min-height: 1.3em; margin-bottom: 4px; }

/* Submit row — Cancel (edit mode) clones the submit classes and joins the row */
.jc-actions { display: flex; margin-top: 14px; }
.jc-actions .btn {
    flex: 1;
    height: 48px;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 600;
}

/* Past submissions */
.xp-past-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
.xp-section-title { font-size: 1.05rem; font-weight: 700; color: #0f2e2a; letter-spacing: -0.01em; }
.xp-past-count { font-size: .8rem; color: #587571; }
.xp-task .jc-past-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface-1);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--elev-1);
    transition: transform var(--dur-mid) var(--ease-out),
                box-shadow var(--dur-mid) var(--ease-out),
                border-color var(--dur-mid) var(--ease-out);
}
.xp-task .jc-past-item:hover {
    transform: translateY(-1px);
    border-color: var(--line-mid);
    box-shadow: var(--elev-2);
}
.xp-task .jc-edit-btn { border-radius: var(--radius-pill); padding: 6px 14px; }
.xp-loading { color: #94a3b8; font-size: .85rem; font-style: italic; }

@media (max-width: 560px) {
    .xp-task-wrap { margin-top: 24px; }
    .xp-input-row { flex-direction: column; }
    .xp-input-row .btn--primary { height: 44px; }
}

/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .xp-ripple { animation: none; opacity: 0; }
    .btn--auth, .s-nav-item, .action-card, .stat-card,
    .prog-outer-chevron, .prog-cat-chevron,
    .action-card-icon, .action-card-arrow,
    .xp-dot, .xp-task .btn--primary, .xp-task .jc-past-item {
        transition: none !important;
    }
    .s-nav-item:hover, .action-card:hover, .stat-card:hover,
    .xp-task .jc-past-item:hover { transform: none; }
}