/* =========================================================
   Classic Agile Operational Environment

   Version: 3.0
   Governance State: Stable
   Architecture State: Comparative Operational Simulation

   Purpose:
   Visual experience layer supporting:
   - Operational visibility simulation
   - Interactive recovery workflows
   - Agile operational role awareness
   - Comparative operational transformation learning
   - Enterprise-grade cognitive flow management

========================================================= */

/* =========================================================
   Core Cards
========================================================= */

.info-card,
.tool-card {

    padding: 1.75rem;

    border: 1px solid #dcdcdc;

    border-radius: 1rem;

    background: #fafafa;

    transition: all 0.2s ease;

}

.tool-card:hover {

    transform: translateY(-2px);

}

/* =========================================================
   Context Layout
========================================================= */

.simulation-context-layout {

    display: flex;

    flex-direction: column;

    gap: 2rem;

    margin-top: 2rem;

}

.simulation-context-top-row {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

}

.compact-info-card {

    min-height: 220px;

}

.enterprise-context-card {

    width: 100%;

}

/* =========================================================
   Grid Layouts
========================================================= */

.card-grid {

    display: grid;

    gap: 1.5rem;

    margin-top: 2rem;

}

.two-column-grid {

    grid-template-columns: repeat(2, 1fr);

}

.three-column-grid {

    grid-template-columns: repeat(3, 1fr);

}

/* =========================================================
   Operational Transformation Comparison
========================================================= */

.comparison-layout {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;

    margin-top: 1rem;

}

.comparison-column {

    padding: 1.25rem;

    border: 1px solid #dcdcdc;

    border-radius: 0.85rem;

    background: #fcfcfc;

}

.comparison-column h4 {

    margin-bottom: 1rem;

    font-size: 1rem;

}

.comparison-column ul {

    padding-left: 1.2rem;

    margin: 0;

}

.comparison-column li {

    margin-bottom: 0.85rem;

    line-height: 1.6;

}

/* =========================================================
   Phase-1.5 Metrics Dashboard
========================================================= */

.metrics-dashboard {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 24px;

    margin-top: 32px;

    margin-bottom: 48px;

    align-items: stretch;

}

/* =========================================================
   Metric Group Titles
========================================================= */

.metric-group-title {

    grid-column: 1 / -1;

    font-size: 1.15rem;

    font-weight: 700;

    margin-top: 48px;

    margin-bottom: 8px;

    padding-bottom: 16px;

    border-bottom:
        1px solid rgba(0,0,0,0.08);

    color: #111111;

}

/* =========================================================
   Metric Cards
========================================================= */

.metric-card {

    padding: 1.5rem;

    height: 100%;

    border-radius: 1rem;

    border: 1px solid #dcdcdc;

    background: #ffffff;

    transition: all 0.2s ease;

    min-height: 260px;

    display: flex;

    flex-direction: column;

}

.metric-card:hover {

    transform: translateY(-2px);

}

/* =========================================================
   Severity Hierarchy
========================================================= */

.critical-metric-card {

    border: 1px solid #222222;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

}

.high-metric-card {

    border: 1px solid #cfcfcf;

}

.elevated-metric-card {

    border: 1px solid #e4e4e4;

    background: #fcfcfc;

}

/* =========================================================
   Metric Typography
========================================================= */

.metric-label {

    font-size: 0.95rem;

    color: #555555;

    margin-bottom: 1rem;

    line-height: 1.5;

}

.metric-value {

    font-size: 2rem;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 1rem;

    color: #111111;

}

.metric-trend {

    font-size: 0.95rem;

    line-height: 1.6;

    margin-bottom: 1.25rem;

}

.negative-trend {

    color: #444444;

}

/* =========================================================
   Metric Status
========================================================= */

.metric-status {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.45rem 0.9rem;

    border-radius: 999px;

    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    width: fit-content;

    margin-bottom: 1rem;

}

/* =========================================================
   Severity Labels
========================================================= */

.critical-status {

    background: #111111;

    color: #ffffff;

}

.high-status {

    background: #dcdcdc;

    color: #111111;

}

.elevated-status {

    background: #efefef;

    color: #333333;

}

/* =========================================================
   Expandable Operational Insights
========================================================= */

.metric-expand-button {

    margin-top: auto;

    padding: 0.75rem 1rem;

    border: 1px solid #d0d0d0;

    background: #fafafa;

    border-radius: 0.75rem;

    cursor: pointer;

    font-size: 0.92rem;

    transition: all 0.2s ease;

    text-align: left;

}

.metric-expand-button:hover {

    background: #f0f0f0;

}

.metric-insight-panel {

    margin-top: 1rem;

    padding-top: 1rem;

    border-top: 1px solid #ececec;

}

.metric-insight-panel ul {

    margin: 0;

    padding-left: 1.2rem;

}

.metric-insight-panel li {

    margin-bottom: 0.75rem;

    line-height: 1.6;

    color: #444444;

}

/* =========================================================
   Executive Command Bar Navigation
========================================================= */

.horizontal-tabs {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    margin-top: 0.75rem;
    margin-bottom: 1rem;

    flex-wrap: nowrap;

}

.horizontal-tab {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;

    padding: 0.85rem 1.25rem;

    border: none;
    background: transparent;

    color: #666666;

    font-size: 1rem;
    font-weight: 600;

    border-radius: 999px;

    cursor: pointer;

    transition: all 0.2s ease;

    white-space: nowrap;

}

.horizontal-tab:hover {

    background: #f3f3f3;
    color: #111111;

}

.active-horizontal-tab {

    background: transparent;

    color: #111111;

    font-weight: 700;

    position: relative;

}

.active-horizontal-tab::after {

    content: "";

    position: absolute;

    bottom: -8px;

    left: 20%;

    width: 60%;

    height: 3px;

    border-radius: 999px;

    background: #111111;

}

.active-horizontal-tab:hover {

    background: transparent;

    color: #111111;

}

/* =========================================================
   Workspace Panels
========================================================= */

.horizontal-tab-content {

    display: none;

}

/* =========================================================
   Evidence Workspace Tabs
========================================================= */

.workspace-tab-row {

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 32px;

    margin-bottom: 32px;

}

.evidence-workspace-tab {

    padding: 12px 22px;

    border: 1px solid #222222;

    background: #ffffff;

    color: #111111;

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 1rem;

    border-radius: 0.75rem;

    font-weight: 500;

}

.evidence-workspace-tab:hover {

    background: #222222;

    color: #ffffff;

}

.active-evidence-workspace-tab {

    background: #222222;

    color: #ffffff;

}

/* =========================================================
   Evidence Workspace Panels
========================================================= */

.evidence-workspace-panel {

    display: none;

}

.active-evidence-workspace-panel {

    display: block;

}

/* =========================================================
   Section Introduction
========================================================= */

.section-intro {

    max-width: 900px;

    line-height: 1.9;

    margin-top: 1rem;

    margin-bottom: 2rem;

}

/* =========================================================
   Operational Role Metadata
========================================================= */

.role-meta {

    font-size: 0.85rem;

    opacity: 0.72;

    margin-top: -0.35rem;

    margin-bottom: 1rem;

    line-height: 1.6;

    font-weight: 500;

}

/* =========================================================
   Tool Card Headings
========================================================= */

.tool-card h3 {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.8rem;

}

/* =========================================================
   Progress Panel
========================================================= */

.simulation-progress-panel {

    padding: 1.75rem;

    border: 1px solid #dcdcdc;

    border-radius: 1rem;

    background: #fafafa;

}

.progress-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1rem;

}

.simulation-status {

    padding: 0.6rem 1rem;

    border: 1px solid #dcdcdc;

    border-radius: 999px;

    background: #ffffff;

    font-size: 0.9rem;

}

.progress-track {

    width: 100%;

    height: 12px;

    background: #e5e5e5;

    border-radius: 999px;

    overflow: hidden;

}

.progress-bar {

    width: 0%;

    height: 100%;

    background: #111111;

    transition: width 0.3s ease;

}

/* =========================================================
   Simulation Steps
========================================================= */

.simulation-steps {

    margin-top: 2rem;

}

.simulation-step {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1rem;

    margin-bottom: 1rem;

    border: 1px solid #e5e5e5;

    border-radius: 1rem;

}

.step-number {

    width: 42px;

    height: 42px;

    border-radius: 999px;

    border: 1px solid #cfcfcf;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    flex-shrink: 0;

}

.step-content {

    flex: 1;

}

.simulation-button {

    padding: 0.8rem 1rem;

    border: 1px solid #222222;

    background: #ffffff;

    cursor: pointer;

    border-radius: 0.75rem;

    transition: all 0.2s ease;

}

.simulation-button:hover {

    background: #222222;

    color: #ffffff;

}

.step-completed {

    background: #f4faf4;

    border-color: #99c799;

}

/* =========================================================
   Completion Banner
========================================================= */

.completion-banner {

    display: none;

    margin-top: 2rem;

    padding: 1.5rem;

    border-radius: 1rem;

    border: 1px solid #dcdcdc;

    background: #fafafa;

}

/* =========================================================
   Insight Block
========================================================= */

.insight-block {

    padding: 1.5rem;

    border-left: 4px solid #222222;

    background: #fafafa;

    margin-top: 2rem;

}

/* =========================================================
   Navigation Buttons
========================================================= */

.button-row {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    margin-top: 2rem;

}

/* =========================================================
   Mobile Responsive
========================================================= */

@media (max-width: 1024px) {

    .metrics-dashboard {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 768px) {

    .simulation-context-top-row {

        grid-template-columns: 1fr;

    }

    .two-column-grid {

        grid-template-columns: 1fr;

    }

    .three-column-grid {

        grid-template-columns: 1fr;

    }

    .comparison-layout {

        grid-template-columns: 1fr;

    }

    .metrics-dashboard {

        grid-template-columns: 1fr;

    }

    .workspace-tab-row {

        flex-direction: column;

    }

    .evidence-workspace-tab {

        width: 100%;

    }

    .horizontal-tabs {

        flex-wrap: wrap;

        justify-content: center;

        gap: 0.75rem;

    }

    .horizontal-tab {

        width: auto;

    }

    .horizontal-tab::after {

        display: none;

    }

    .progress-header {

        flex-direction: column;

        align-items: flex-start;

    }

    .simulation-step {

        flex-direction: column;

        align-items: flex-start;

    }

}

/* =========================================================
   Phase-4 Operational Narrative Transition Layer
   Version: 8.0
   Governance State: Additive Enhancement
   Architecture State:
   Operational Narrative Continuity

   Purpose:
   - Visual operational progression continuity
   - Section-to-section recovery flow
   - Executive simulation storytelling rhythm
   - Transition state visibility
========================================================= */

/* =========================================================
   Operational Transition Bridge
========================================================= */

.operational-transition-bridge {

    display: flex;

    align-items: center;

    margin-top: 1.75rem;

    margin-bottom: 2rem;

}

/* =========================================================
   Narrative Transition Pill
========================================================= */

.transition-pill {

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    padding:
        0.9rem
        1.35rem;

    border:
        1px
        solid
        #d8d8d8;

    border-radius: 999px;

    background: #fafafa;

    color: #222222;

    font-size: 0.95rem;

    font-weight: 600;

    line-height: 1.4;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.03);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

/* =========================================================
   Hover State
========================================================= */

.transition-pill:hover {

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.05);

}

/* =========================================================
   Mobile Continuity
========================================================= */

@media (max-width: 768px) {

    .operational-transition-bridge {

        margin-top: 1.5rem;

        margin-bottom: 1.75rem;

    }

    .transition-pill {

        width: 100%;

        justify-content: center;

        text-align: center;

        font-size: 0.9rem;

        padding:
            0.85rem
            1rem;

    }

}

/* =========================================================
   Operational Pulse Engine
========================================================= */

.operational-pulse-engine {

    margin-top: 2rem;

    padding: 1.5rem;

    border: 1px solid #dcdcdc;

    border-radius: 1rem;

    background: #fafafa;

    animation:
        operationalPulseGlow 2.4s ease infinite;

}

/* =========================================================
   Pulse Header
========================================================= */

.pulse-header {

    font-size: 1rem;

    font-weight: 700;

    margin-bottom: 0.85rem;

    color: #111111;

}

/* =========================================================
   Pulse Message
========================================================= */

.pulse-message {

    line-height: 1.7;

    color: #333333;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

}

/* =========================================================
   Ambient Pulse Animation
========================================================= */

@keyframes operationalPulseGlow {

    0% {

        box-shadow:
            0 0 0 rgba(0,0,0,0);

    }

    50% {

        box-shadow:
            0 6px 18px rgba(0,0,0,0.05);

    }

    100% {

        box-shadow:
            0 0 0 rgba(0,0,0,0);

    }

}

/* =========================================================
   Phase-2 Operational Recovery Experience Layer
   Version: 6.2
   Governance State: Additive Enhancement
   Architecture State:
   Executive Recovery Transition Experience

   Purpose:
   - Guided operational recovery visibility
   - Launch Recovery Coordination emphasis
   - Agile role transition highlighting
   - Progressive transformation reveal
   - Executive-grade animation continuity

========================================================= */

/* =========================================================
   Launch Recovery Coordination
========================================================= */

.launch-recovery-coordination {

    animation:
        operationalRecoveryPulse 1.2s ease;

    border-color: #111111;

    box-shadow:
        0 10px 24px rgba(0,0,0,0.08);

}

/* =========================================================
   Agile Operational Recovery State
========================================================= */

.role-recovery-active {

    animation:
        roleRecoveryFade 1s ease;

    border-color: #111111;

    box-shadow:
        0 10px 24px rgba(0,0,0,0.08);

}

/* =========================================================
   Activated War Room Button
========================================================= */

.launch-recovery-button-active {

    background: #111111;

    color: #ffffff;

    border-color: #111111;

    opacity: 0.96;

}

/* =========================================================
   Progressive Transformation Reveal
========================================================= */

#transformation-comparison-section {

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;

}

/* =========================================================
   Recovery Pulse Animation
========================================================= */

@keyframes operationalRecoveryPulse {

    0% {

        transform: scale(1);

        opacity: 0.92;

    }

    50% {

        transform: scale(1.015);

        opacity: 1;

    }

    100% {

        transform: scale(1);

        opacity: 1;

    }

}

/* =========================================================
   Agile Role Recovery Animation
========================================================= */

@keyframes roleRecoveryFade {

    0% {

        opacity: 0.35;

        transform: translateY(10px);

    }

    100% {

        opacity: 1;

        transform: translateY(0px);

    }

}

/* =========================================================
   Phase-3 Operational Recovery Transition Layer
   Version: 7.0
   Governance State: Stable Additive Enhancement
   Architecture State:
   Executive Operational Recovery Visualization

   Purpose:
   - Highlight operational transformation progression
   - Reduce cognitive overload
   - Visualize BEFORE vs AFTER recovery state
   - Support executive storytelling flow
   - Add progressive recovery animation continuity

========================================================= */

/* =========================================================
   Operational Recovery Transition Wrapper
========================================================= */

.operational-recovery-transition {

    margin-top: 2rem;

    padding: 1.5rem;

    border: 1px solid #dcdcdc;

    border-radius: 1rem;

    background: #fafafa;

    opacity: 0;

    transform: translateY(24px);

    animation:
        operationalTransitionReveal 0.8s ease forwards;

}

/* =========================================================
   Recovery Header
========================================================= */

.recovery-transition-header {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    color: #111111;

}

/* =========================================================
   Recovery Grid
========================================================= */

.recovery-transition-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;

}

/* =========================================================
   Recovery Transition Cards
========================================================= */

.recovery-transition-card {

    padding: 1.25rem;

    border-radius: 0.85rem;

    border: 1px solid #dcdcdc;

    background: #ffffff;

    transition: all 0.25s ease;

}

.recovery-transition-card:hover {

    transform: translateY(-2px);

}

/* =========================================================
   Previous State Card
========================================================= */

.previous-state-card {

    border-left: 4px solid #bdbdbd;

}

/* =========================================================
   Recovery State Card
========================================================= */

.recovery-state-card {

    border-left: 4px solid #111111;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.05);

}

/* =========================================================
   Recovery Typography
========================================================= */

.recovery-transition-card h4 {

    margin-bottom: 1rem;

    font-size: 1rem;

}

.recovery-transition-card ul {

    margin: 0;

    padding-left: 1.2rem;

}

.recovery-transition-card li {

    margin-bottom: 0.85rem;

    line-height: 1.6;

    color: #333333;

}

/* =========================================================
   Operational Recovery Reveal Animation
========================================================= */

@keyframes operationalTransitionReveal {

    0% {

        opacity: 0;

        transform: translateY(24px);

    }

    100% {

        opacity: 1;

        transform: translateY(0px);

    }

}

/* =========================================================
   Mobile Responsive
========================================================= */

@media (max-width: 768px) {

    .recovery-transition-grid {

        grid-template-columns: 1fr;

    }

}

/* =========================================================
   Narrative Transition Rendering Fix
========================================================= */

.narrative-transition {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 3rem;

    margin-bottom: 3rem;

}

.narrative-transition span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.65rem;

    padding:
        0.95rem
        1.5rem;

    border:
        1px
        solid
        #d8d8d8;

    border-radius: 999px;

    background: #fafafa;

    color: #222222;

    font-size: 0.95rem;

    font-weight: 600;

    line-height: 1.4;

    text-align: center;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.03);

}

/* =========================================================
   Mobile Rendering
========================================================= */

@media (max-width: 768px) {

    .narrative-transition {

        margin-top: 2rem;

        margin-bottom: 2rem;

        padding-left: 1rem;

        padding-right: 1rem;

    }

    .narrative-transition span {

        width: 100%;

        font-size: 0.9rem;

    }

}

/* =========================================================
   Stage-1 Preview Governance Layer
   Governance State: Institutional Preview Architecture
   Purpose:
   - Controlled institutional preview visibility
   - Leadership progression evidence
   - Adaptive coordination layer gating
   - Institutional access atmosphere
========================================================= */

/* =========================================================
   Preview Governance Banner
========================================================= */

.preview-governance-banner {

    margin-top: 2rem;

    margin-bottom: 3rem;

}

.preview-banner-card {

    padding: 1.75rem;

    border: 1px solid #dcdcdc;

    border-radius: 1rem;

    background: #fafafa;

}

.preview-banner-card h3 {

    margin-top: 0;

    margin-bottom: 1rem;

    font-size: 1.05rem;

}

.preview-banner-card p {

    margin-bottom: 0;

    line-height: 1.8;

    max-width: 920px;

}

/* =========================================================
   Preview Locked Section
========================================================= */

.preview-locked-section {

    position: relative;

    overflow: hidden;

}

/* =========================================================
   Institutional Blur Layer
========================================================= */

.preview-locked-section::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.22)
        );

    backdrop-filter: blur(2px);

    z-index: 2;

    pointer-events: none;

}

/* =========================================================
   Preview Overlay
========================================================= */

.preview-locked-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 2rem;

    z-index: 3;

}

/* =========================================================
   Institutional Lock Card
========================================================= */

.preview-lock-content {

    max-width: 520px;

    padding: 2rem;

    border: 1px solid #dcdcdc;

    border-radius: 1rem;

    background: rgba(255,255,255,0.96);

    text-align: center;

    box-shadow:
        0 10px 24px rgba(0,0,0,0.06);

}

.preview-lock-content h3 {

    margin-top: 0;

    margin-bottom: 1rem;

}

.preview-lock-content p {

    margin-bottom: 0;

    line-height: 1.8;

}

/* =========================================================
   Mobile Responsive
========================================================= */

@media (max-width: 768px) {

    .preview-lock-content {

        padding: 1.5rem;

    }

}

/* =========================================================
   Preview Governance Message
========================================================= */

.preview-governance-message {

    margin-top: 1rem;

    padding: 1rem 1.25rem;

    border: 1px solid #dcdcdc;

    border-radius: 0.85rem;

    background: #fafafa;

    line-height: 1.8;

    max-width: 720px;

}

/* =========================================================
   Learning Stage Panel
   Governance State: Guided Learning Experience
   Version: 2.0
   Purpose:
   - Learning progression visibility
   - Context awareness guidance
   - Low-noise instructional support
   - Non-dominant navigation aid
========================================================= */

#learning-stage-panel {

    margin-top: 1.5rem;

    margin-bottom: 1.5rem;

    padding: 1rem 1.25rem;

    border: 1px solid #e5e5e5;

    border-radius: 0.85rem;

    background: #fafafa;

}

.learning-stage-header {

    font-size: 0.8rem;

    font-weight: 600;

    color: #777777;

    margin-bottom: 0.35rem;

    text-transform: uppercase;

    letter-spacing: 0.06em;

}

.learning-stage-focus {

    font-size: 1rem;

    font-weight: 600;

    color: #111111;

    margin-bottom: 0.75rem;

    line-height: 1.4;

}

.learning-stage-progress {

    width: 100%;

    height: 8px;

    background: #e5e5e5;

    border-radius: 999px;

    overflow: hidden;

}

#learning-stage-progress-fill {

    width: 20%;

    height: 100%;

    background: #111111;

    border-radius: 999px;

    transition: width 0.3s ease;

}

/* =========================================================
   Mobile Responsive
========================================================= */

@media (max-width: 768px) {

    #learning-stage-panel {

        padding: 0.9rem 1rem;

    }

    .learning-stage-focus {

        font-size: 0.95rem;

    }

}

/* =========================================================
   Workspace Investigation Progress
   Governance State: Guided Investigation Experience
   Version: 2.0

   Purpose:
   - Workspace-level learner guidance
   - Investigation progress visibility
   - Cognitive load reduction
   - Current focus reinforcement
========================================================= */

#workspace-learning-focus {

    margin-bottom: 1.5rem;

    padding: 1.25rem;

    border: 1px solid #e5e5e5;

    border-radius: 0.85rem;

    background: #fcfcfc;

}

.workspace-focus-label {

    font-size: 0.75rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: #777777;

    margin-bottom: 0.5rem;

}

.workspace-progress-counter {

    font-size: 0.85rem;

    font-weight: 600;

    color: #666666;

    margin-bottom: 0.75rem;

}

.workspace-progress-bar {

    width: 100%;

    height: 8px;

    background: #e5e5e5;

    border-radius: 999px;

    overflow: hidden;

    margin-bottom: 1rem;

}

.workspace-progress-fill {

    width: 25%;

    height: 100%;

    background: #111111;

    border-radius: 999px;

    transition: width 0.3s ease;

}

.workspace-focus-title {

    font-size: 0.8rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: #777777;

    margin-bottom: 0.35rem;

}

#workspace-focus-text {

    font-size: 1rem;

    font-weight: 600;

    line-height: 1.5;

    color: #111111;

}

/* =========================================================
   Investigation Validation Layer
   Governance State: Guided Analysis Validation
========================================================= */

#workspace-pending-review {

    margin-top: 1rem;

    margin-bottom: 1rem;

    padding: 0.9rem 1rem;

    border: 1px solid #e5e5e5;

    border-radius: 0.75rem;

    background: #fafafa;

}

#workspace-pending-review strong {

    display: block;

    margin-bottom: 0.5rem;

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: #666666;

}

#workspace-pending-review ul {

    margin: 0;

    padding-left: 1.2rem;

}

#workspace-pending-review li {

    margin-bottom: 0.35rem;

    line-height: 1.5;

}

#workspace-readiness-status {

    margin-bottom: 1rem;

    padding: 0.9rem 1rem;

    border-radius: 0.75rem;

    font-size: 0.9rem;

    font-weight: 600;

    line-height: 1.5;

}

.readiness-pending {

    border: 1px solid #e5e5e5;

    background: #fafafa;

    color: #444444;

}

.readiness-complete {

    border: 1px solid #dcdcdc;

    background: #f5f5f5;

    color: #111111;

}

#learning-review-status {

    margin-top: 1rem;

    padding-top: 1rem;

    border-top: 1px solid rgba(0,0,0,0.08);

}

#learning-review-summary {

    margin-top: 0.5rem;

    font-size: 0.9rem;

    font-weight: 600;

    letter-spacing: 0.05em;

}

#learning-review-pending {

    margin-top: 0.75rem;

    font-size: 0.9rem;

    color: #555;

}

#learning-review-pending ul {

    margin-top: 0.5rem;

    padding-left: 1.25rem;

}