/* =============================================================================
     Assessment Styles
     Sections:
         1. Instruction Panel
         2. Linear Progress (status-step)
         3. Exercise Countdown
         4. Hand Progress Indicators
         5. Break Overlay
         6. Warmup Overlay
         7. Responsive Adjustments
     Conventions: Uses semantic design tokens (see design-tokens.css). Avoid raw hex neutrals.
     ============================================================================= */

/* 1. Instruction Panel ------------------------------------------------------ */
.instruction-panel {
    background: var(--color-surface);
    padding: var(--space-5, 1.5rem);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border);
    margin: var(--space-4, 1rem) 0;
}

.instruction-panel p {
    margin-bottom: var(--space-2, 0.5rem);
    font-size: var(--font-size-base, 1.125rem);
}

.instruction-panel strong {
    color: var(--color-heading);
    font-weight: var(--font-weight-bold, 700);
}

/* 2. Linear Progress (status-step) ----------------------------------------- */
.status-step {
    width: 100%;
    height: 8px;
    background: var(--color-border-decorative);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    margin: var(--space-4, 1rem) 0;
}

.status-step .progress {
    height: 100%;
    background: var(--color-primary, #165C84);
    width: 0%;
    transition: width var(--transition-base, 150ms ease-in-out);
}

/* 3. Exercise Countdown ----------------------------------------------------- */
.exercise-countdown {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--font-size-base, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-sm, 4px);
    color: var(--color-heading);
    margin-bottom: var(--space-3, 0.75rem);
    user-select: none;
}
.exercise-countdown .label {
    text-transform: uppercase;
    font-size: var(--font-size-xs, 0.75rem);
    letter-spacing: .5px;
    color: var(--color-text-muted);
}
.exercise-countdown .seconds {
    min-width: 3ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.exercise-countdown.warning .seconds { color: var(--color-warning, #D97706); }
.exercise-countdown.final .seconds { color: var(--color-alert, #C0392B); }
.exercise-countdown.d-none { display: none !important; }

.status-step.complete .progress {
    background: var(--color-success, #219653);
}

/* 4. Hand Progress Indicators ---------------------------------------------- */
.hand-progress {
    display: flex;
    justify-content: center;
    gap: var(--space-4, 1rem);
    margin: var(--space-4, 1rem) 0;
}

.hand-progress-item {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
    min-width: 120px;
    text-align: center;
    transition: background-color var(--transition-base, 150ms ease-in-out),
                border-color var(--transition-base, 150ms ease-in-out),
                color var(--transition-base, 150ms ease-in-out);
}

.hand-progress-item.active {
    background: var(--color-surface);
    border-color: var(--color-primary, #165C84);
    color: var(--color-primary, #165C84);
}

.hand-progress-item.completed {
    background: var(--color-surface);
    border-color: var(--color-success, #219653);
    color: var(--color-success, #219653);
}

.hand-progress-item h6 {
    margin: 0 0 var(--space-1, 0.25rem) 0;
    font-weight: var(--font-weight-bold, 700);
}

.hand-progress-item .status {
    font-size: var(--font-size-sm, 0.8rem);
    opacity: 0.8;
}

/* 5. Break Overlay ---------------------------------------------------------- */
.break-overlay {
    display: none;
    padding: var(--space-4, 1rem);
}

.break-overlay.warmup-overlay {
    position: absolute;
    inset: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    background: rgba(255, 255, 255, 0.9);
    z-index: 11;
    box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.2);
}

.break-overlay .break-overlay-inner {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-5, 1.5rem);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--elevation-lg, 0 18px 40px -24px rgba(13,32,58,0.45));
    margin: 0 auto;
}

.break-overlay .break-overlay-inner h2 {
    font-size: var(--font-size-lg, 1.5rem);
    color: var(--color-heading);
}

.break-overlay .break-overlay-inner p {
    color: var(--color-text-body);
    font-size: var(--font-size-base, 1.125rem);
}

/* 6. Warmup Overlay --------------------------------------------------------- */
/* Utility: hidden state (JS toggles by removing/adding .is-hidden) */
.is-hidden { display:none !important; }
/* Component root */
.warmup-panel { background: var(--color-surface); border:1px solid var(--color-border); padding: var(--space-4,20px); border-radius: var(--radius-md,8px); font-size:.95rem; }
/* Overlay presentation */
.warmup-panel.warmup-overlay { position:absolute; inset: 4%; display:flex !important; align-items:center; justify-content:center; backdrop-filter:blur(3px); background:rgba(255,255,255,0.88); z-index:10; box-shadow:0 4px 18px -4px rgba(0,0,0,.18); }
@media (max-width: 575px) { .warmup-panel.warmup-overlay { inset:6% 4%; padding:12px; } }
/* Dark mode variant (shares token surface adjustments) */
.dark-mode .warmup-panel.warmup-overlay,
.dark-mode .break-overlay.warmup-overlay { background:rgba(20,22,28,0.82); }
/* Inner layout (fluid clamp for responsiveness) */
.warmup-panel.warmup-overlay .warmup-inner { width:100%; max-width:clamp(300px, 90vw, 520px); margin:0 auto; }
/* Checklist layout adjustments for overlay presentation */
.warmup-panel.warmup-overlay .warmup-checklist { justify-content:space-between; }
.warmup-panel.warmup-overlay .warmup-checklist li { flex:1 1 auto; text-align:center; padding-left:0; }
.warmup-panel.warmup-overlay .warmup-checklist li::before { position:static; margin:0 auto 4px; display:block; }
.warmup-panel.warmup-overlay .warmup-tip { text-align:center; }
/* Progress bar inside warmup */
.warmup-progress-bar { height:10px; background: var(--color-border-decorative); border-radius:6px; overflow:hidden; position:relative; }
.warmup-progress-fill { height:100%; width:0; background: var(--color-primary,#5B4FFF); transition: width .35s var(--transition-base,ease); }
.warmup-progress-label { font-size:.75rem; margin-top:4px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color: var(--color-text-muted); }
/* Progress wrapper (added for responsive centering / squish) */
.warmup-progress-wrapper { width:100%; max-width:520px; margin:0 auto; display:flex; flex-direction:column; align-items:stretch; }
.warmup-panel .warmup-inner { display:flex; flex-direction:column; align-items:center; gap:var(--space-3, .75rem); }
.warmup-panel .warmup-inner #warmupInstruction { text-align:center; line-height:1.25; max-width:38ch; }
.warmup-progress-bar { width:100%; flex:1 1 auto; }
.warmup-progress-label { text-align:center; }
/* Checklist */
.warmup-checklist { display:flex; gap:12px; flex-wrap:wrap; padding:0; }
.warmup-checklist li { list-style:none; position:relative; padding-left:18px; font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color: var(--color-text-muted); }
.warmup-checklist li::before { content:''; width:12px; height:12px; border-radius:50%; background: var(--color-border-decorative); position:absolute; left:0; top:2px; box-shadow:0 0 0 1px rgba(0,0,0,.05) inset; }
.warmup-checklist li.done { color: var(--color-heading); font-weight:600; }
.warmup-checklist li.done::before { background: var(--color-success,#2e8b57); }
.warmup-tip { min-height:1.1em; font-size:.75rem; margin-top:4px; }
/* Exit animation */
.warmup-panel.fading-out { opacity:0; transition: opacity .45s ease; pointer-events:none; }

/* 7. Responsive Adjustments ------------------------------------------------- */
/* Warmup-specific tweaks */

/* Tighter overlay in very small viewports */
@media (max-width: 480px) {
    .warmup-panel.warmup-overlay { inset:2% 3%; padding:10px; }
    .warmup-panel.warmup-overlay .warmup-inner { max-width:100%; padding-inline:4px; }
    .warmup-progress-wrapper { max-width:100%; }
    .warmup-panel .warmup-inner #warmupInstruction { max-width:100%; }
    .warmup-checklist { flex-direction:column; gap:8px; }
    .warmup-checklist li { text-align:left; }
}

/* Landscape small height: reduce vertical inset to avoid clipping */
@media (max-height: 480px) and (orientation: landscape) {
    .warmup-panel.warmup-overlay { inset:2% 4%; }
    .warmup-progress-bar { height:8px; }
}


.warmup-panel {
    padding: var(--space-4, 30px) var(--space-4, 20px) 40px var(--space-2, 30px);
    /* top                         right                  bottom  left */
}