/*
 * Shared movement language for the 5-series.
 *
 * This layer intentionally touches only route guidance, progress indicators,
 * and previous/next action groups. Each tool keeps its own stage, cards,
 * metaphors, and interaction-specific visual language.
 */

body.five-series-progress-ui {
    --five-flow-brand: #4a6c8c;
    --five-flow-brand-hover: #3a556e;
    --five-flow-brand-soft: #e4ecf3;
    --five-flow-surface: #f3f7fa;
    --five-flow-text: #25384a;
    --five-flow-muted: #5f6f7d;
    --five-flow-border: #d7dee5;
    --five-flow-dark-accent: #9ab7d2;
    --five-flow-radius: 0.75rem;
    --five-flow-target: 2.75rem;
}

/* Opening route guides: one quiet, borderless rhythm across the light tools. */
body.five-series-progress-ui .tool-flow-guide,
body.five-series-progress-ui .intro-steps[aria-label="진행 순서"],
body.five-series-progress-ui .intro-steps[aria-label="이용 순서"] {
    gap: 0.75rem;
}

body.five-series-progress-ui .tool-flow-step,
body.five-series-progress-ui .intro-steps[aria-label="진행 순서"] > div,
body.five-series-progress-ui .intro-steps[aria-label="이용 순서"] > div {
    border: 0 !important;
    border-radius: var(--five-flow-radius) !important;
    background: var(--five-flow-surface) !important;
    box-shadow: none !important;
    transition: none !important;
}

body.five-series-progress-ui .tool-flow-step:hover,
body.five-series-progress-ui .intro-steps[aria-label="진행 순서"] > div:hover,
body.five-series-progress-ui .intro-steps[aria-label="이용 순서"] > div:hover {
    color: inherit;
    background: var(--five-flow-surface) !important;
    transform: none !important;
}

body.five-series-progress-ui .tool-flow-step > span {
    width: auto;
    height: auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    color: var(--five-flow-brand);
    background: transparent;
    box-shadow: none;
}

body.five-series-progress-ui .intro-steps[aria-label="진행 순서"] > div > span,
body.five-series-progress-ui .intro-steps[aria-label="이용 순서"] > div > span {
    font-size: 1.55rem;
}

/* Compact state markers use the same rectangular, blue-gray treatment. */
body.five-series-progress-ui .step-indicator,
body.five-series-progress-ui .progress-wrap > span {
    color: var(--five-flow-brand) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.01em;
}

body.five-series-progress-ui .step-indicator {
    padding: 0.3rem 0.55rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--five-flow-brand-soft);
}

body.five-series-progress-ui .progress-track {
    background: var(--five-flow-border) !important;
}

body.five-series-progress-ui .progress-track > span {
    background: var(--five-flow-brand) !important;
}

body.five-series-progress-ui .progress-step {
    padding: 0.35rem 0.25rem;
    border: 0;
    border-bottom: 0.1875rem solid transparent;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    box-shadow: none;
}

body.five-series-progress-ui .progress-step.completed {
    border-bottom-color: var(--five-flow-dark-accent);
    color: #ffffff;
    background: transparent;
}

/* Shared action geometry. Route-specific dark stages receive colors below. */
body.five-series-progress-ui .navigation-buttons .atm-button,
body.five-series-progress-ui .action-footer .btn,
body.five-series-progress-ui .aha-nav button,
body.five-series-progress-ui .screen-footer-actions .grounding-button,
body.five-series-progress-ui .exercise-actions .grounding-button,
body.five-series-progress-ui .stop-actions .grounding-button,
body.five-series-progress-ui .step-navigation .nav-btn,
body.five-series-progress-ui .cinematic-nav-button {
    min-height: var(--five-flow-target);
    padding: 0.7rem 1.05rem;
    border-radius: var(--five-flow-radius) !important;
    box-shadow: none !important;
    animation: none !important;
    text-decoration: none !important;
    transform: none !important;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, filter 160ms ease !important;
}

body.five-series-progress-ui .navigation-buttons,
body.five-series-progress-ui .action-footer,
body.five-series-progress-ui .aha-nav,
body.five-series-progress-ui .screen-footer-actions,
body.five-series-progress-ui .exercise-actions,
body.five-series-progress-ui .stop-actions,
body.five-series-progress-ui .step-navigation {
    gap: 0.75rem;
}

body.five-series-progress-ui .step-navigation {
    border-top: 0 !important;
}

body.five-series-progress-ui .navigation-buttons .atm-button--primary,
body.five-series-progress-ui .action-footer .btn-primary,
body.five-series-progress-ui .screen-footer-actions .grounding-button--primary,
body.five-series-progress-ui .exercise-actions .grounding-button--primary,
body.five-series-progress-ui .stop-actions .grounding-button--primary {
    border-color: var(--five-flow-brand) !important;
    color: #ffffff !important;
    background: var(--five-flow-brand) !important;
}

body.five-series-progress-ui .navigation-buttons .atm-button--primary:hover:not(:disabled),
body.five-series-progress-ui .action-footer .btn-primary:hover:not(:disabled),
body.five-series-progress-ui .screen-footer-actions .grounding-button--primary:hover:not(:disabled),
body.five-series-progress-ui .exercise-actions .grounding-button--primary:hover:not(:disabled),
body.five-series-progress-ui .stop-actions .grounding-button--primary:hover:not(:disabled) {
    border-color: var(--five-flow-brand-hover) !important;
    background: var(--five-flow-brand-hover) !important;
    transform: none !important;
}

body.five-series-progress-ui .navigation-buttons .atm-button--secondary,
body.five-series-progress-ui .action-footer .btn-secondary,
body.five-series-progress-ui .screen-footer-actions .grounding-button--secondary,
body.five-series-progress-ui .exercise-actions .grounding-button--secondary,
body.five-series-progress-ui .stop-actions .grounding-button--secondary {
    border: 1px solid var(--five-flow-border) !important;
    color: var(--five-flow-text) !important;
    background: var(--five-flow-surface) !important;
}

body.five-series-progress-ui .grounding-button--quiet,
body.five-series-progress-ui .section-top-actions .btn--text,
body.five-series-progress-ui .section-top-actions .return-intro-btn {
    color: var(--five-flow-brand) !important;
    text-decoration: none !important;
}

body.five-series-progress-ui .navigation-buttons .atm-button:hover:not(:disabled),
body.five-series-progress-ui .action-footer .btn:hover:not(:disabled),
body.five-series-progress-ui .grounding-button:hover:not(:disabled),
body.five-series-progress-ui .aha-nav button:hover:not(:disabled),
body.five-series-progress-ui .step-navigation .nav-btn:hover:not(:disabled),
body.five-series-progress-ui .cinematic-nav-button:hover:not(:disabled) {
    transform: none !important;
}

/* 5-3 keeps its immersive AHA sequence; only the movement controls align. */
body.five-series-progress-ui .aha-next-btn,
body.five-series-progress-ui .aha-next-btn.final-btn {
    border: 1px solid var(--five-flow-dark-accent) !important;
    color: #142536 !important;
    background: var(--five-flow-dark-accent) !important;
}

body.five-series-progress-ui .aha-prev-btn {
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* 5-5 keeps its black-box theatre, type, scenes, and pacing. */
body.five-series-progress-ui.drama-director-page #workshop-timeline {
    border: 0 !important;
    border-radius: var(--five-flow-radius) !important;
    background: rgba(236, 243, 249, 0.07) !important;
    box-shadow: none !important;
}

body.five-series-progress-ui.drama-director-page .timeline-item {
    min-height: var(--five-flow-target);
    border: 0 !important;
    border-radius: 0.5rem !important;
    color: #d9e2ea !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

body.five-series-progress-ui.drama-director-page .timeline-item.is-completed {
    color: #ffffff !important;
    background: rgba(154, 183, 210, 0.16) !important;
}

body.five-series-progress-ui.drama-director-page .timeline-item.is-active {
    color: #142536 !important;
    background: var(--five-flow-dark-accent) !important;
}

body.five-series-progress-ui.drama-director-page .nav-btn:not(.nav-btn--prev):not(.nav-btn--intro) {
    border: 1px solid var(--five-flow-dark-accent) !important;
    color: #142536 !important;
    background: var(--five-flow-dark-accent) !important;
}

body.five-series-progress-ui.drama-director-page .nav-btn--prev,
body.five-series-progress-ui.drama-director-page .nav-btn--intro {
    border: 1px solid rgba(226, 235, 243, 0.34) !important;
    color: #e7eef4 !important;
    background: rgba(226, 235, 243, 0.08) !important;
}

body.five-series-progress-ui.drama-director-page .nav-btn:disabled {
    border-color: rgba(226, 235, 243, 0.12) !important;
    color: rgba(231, 238, 244, 0.5) !important;
    background: rgba(226, 235, 243, 0.08) !important;
}

/* 5-6 keeps the cinematic modal; its transport controls share the same cue. */
body.five-series-progress-ui .cinematic-progress {
    background: rgba(255, 255, 255, 0.16) !important;
}

body.five-series-progress-ui .cinematic-progress > span {
    background: var(--five-flow-dark-accent) !important;
}

body.five-series-progress-ui #cinematic-next-btn {
    border: 1px solid var(--five-flow-dark-accent) !important;
    color: #142536 !important;
    background: var(--five-flow-dark-accent) !important;
}

body.five-series-progress-ui #cinematic-prev-btn {
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #edf3f8 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body.five-series-progress-ui .cinematic-progress-text {
    color: #dce7f0 !important;
    font-variant-numeric: tabular-nums;
}

body.five-series-progress-ui .navigation-buttons .atm-button:focus-visible,
body.five-series-progress-ui .action-footer .btn:focus-visible,
body.five-series-progress-ui .grounding-button:focus-visible,
body.five-series-progress-ui .aha-nav button:focus-visible,
body.five-series-progress-ui .step-navigation .nav-btn:focus-visible,
body.five-series-progress-ui .timeline-item:focus-visible,
body.five-series-progress-ui .cinematic-nav-button:focus-visible,
body.five-series-progress-ui .cinematic-text-button:focus-visible {
    outline: 3px solid var(--five-flow-brand);
    outline-offset: 3px;
}

body.five-series-progress-ui.drama-director-page .nav-btn:focus-visible,
body.five-series-progress-ui.drama-director-page .timeline-item:focus-visible,
body.five-series-progress-ui .aha-nav button:focus-visible,
body.five-series-progress-ui .cinematic-nav-button:focus-visible,
body.five-series-progress-ui .cinematic-text-button:focus-visible {
    outline-color: #bed0e1;
}

@media (prefers-reduced-motion: reduce) {
    body.five-series-progress-ui .navigation-buttons .atm-button,
    body.five-series-progress-ui .action-footer .btn,
    body.five-series-progress-ui .aha-nav button,
    body.five-series-progress-ui .grounding-button,
    body.five-series-progress-ui .nav-btn,
    body.five-series-progress-ui .timeline-item,
    body.five-series-progress-ui .cinematic-nav-button {
        animation: none !important;
        transition: none !important;
    }
}

@media (forced-colors: active) {
    body.five-series-progress-ui .tool-flow-step,
    body.five-series-progress-ui .intro-steps[aria-label="진행 순서"] > div,
    body.five-series-progress-ui .intro-steps[aria-label="이용 순서"] > div,
    body.five-series-progress-ui .step-indicator,
    body.five-series-progress-ui .timeline-item,
    body.five-series-progress-ui .navigation-buttons .atm-button,
    body.five-series-progress-ui .action-footer .btn,
    body.five-series-progress-ui .grounding-button,
    body.five-series-progress-ui .nav-btn,
    body.five-series-progress-ui .cinematic-nav-button {
        border: 1px solid ButtonText !important;
    }
}