/* Computer Skills Activities CSS */

/* =============================================================================
   INDEPENDENT PRACTICE CARD
   ----------------------------------------------------------------------------
   Rendered inline inside a lesson step's description field. The course-pipeline
   generator emits the 4-part shape (Your goal / Time / Task / Success criteria)
   wrapped in <div class="independent-practice-card">. See generate.md in the
   course-pipeline repo for the authoring convention.
   ============================================================================= */

.independent-practice-card {
    margin: 1.5rem 0;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f9 100%);
    border-left: 5px solid #6366f1;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.independent-practice-card .ip-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #4338ca;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.18);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.independent-practice-card .ip-title i {
    color: #6366f1;
    font-size: 1.2rem;
}

.independent-practice-card .ip-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.independent-practice-card .ip-row:last-child {
    margin-bottom: 0;
}

.independent-practice-card .ip-icon {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: #fff;
    border-radius: 50%;
    font-size: 0.95rem;
    margin-top: 0.15rem;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.25);
}

.independent-practice-card .ip-row.ip-goal .ip-icon    { background: #3b82f6; box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3); }
.independent-practice-card .ip-row.ip-time .ip-icon    { background: #f59e0b; box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3); }
.independent-practice-card .ip-row.ip-task .ip-icon    { background: #8b5cf6; box-shadow: 0 1px 3px rgba(139, 92, 246, 0.3); }
.independent-practice-card .ip-row.ip-success .ip-icon { background: #10b981; box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3); }

.independent-practice-card .ip-content {
    flex: 1;
    min-width: 0;
    color: #1f2937;
    line-height: 1.55;
}

.independent-practice-card .ip-content strong {
    color: #111827;
    font-weight: 700;
    margin-right: 0.35rem;
}

.independent-practice-card .ip-content p {
    margin: 0 0 0.5rem 0;
}

.independent-practice-card .ip-content p:last-child {
    margin-bottom: 0;
}

.independent-practice-card .ip-success .ip-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0.6rem 0 0 0;
}

.independent-practice-card .ip-success .ip-content li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.4rem;
    color: #374151;
}

.independent-practice-card .ip-success .ip-content li::before {
    content: "\2713"; /* ✓ */
    position: absolute;
    left: 0;
    top: -0.05rem;
    color: #10b981;
    font-weight: 700;
    font-size: 1.05rem;
}

.independent-practice-card .ip-success .ip-content li:last-child {
    margin-bottom: 0;
}

/* Code / filename markers (from the {{code:...}} markup) */
.independent-practice-card .ip-content code {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.92em;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .independent-practice-card {
        padding: 1.1rem 1.25rem;
    }

    .independent-practice-card .ip-row {
        gap: 0.75rem;
    }

    .independent-practice-card .ip-icon {
        flex: 0 0 1.85rem;
        width: 1.85rem;
        height: 1.85rem;
        font-size: 0.82rem;
    }

    .independent-practice-card .ip-title {
        font-size: 0.98rem;
    }
}