/* ============================================================================
 * 08-kubectl-flow/style.css — terminal + kubeconfig + flow diagram
 * ============================================================================ */

/* Terminal — top-left */
.kf-term {
    position: absolute;
    left: 4%; top: 18%;
    width: 44%; height: 38%;
    overflow: hidden;
}
.kf-term .tbody {
    padding: 10px 14px;
    font-size: 0.78rem;
    line-height: 1.55;
    overflow: auto;
    height: calc(100% - 28px);
}
.kf-term .tbody .prompt { color: var(--green); margin-right: 6px; }
.kf-term .tbody .ok     { color: var(--green); }
.kf-term .tbody .muted  { color: var(--gray); }
.kf-term .tbody .cmd    { color: var(--cyan); }
.kf-term .tbody .cursor {
    display: inline-block;
    width: 8px; height: 1em;
    background: var(--cyan);
    vertical-align: middle;
    animation: blink 0.9s infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Kubeconfig viewer — right column */
.kf-cfg {
    position: absolute;
    left: 50%; top: 18%;
    width: 46%; height: 56%;
    background: #0a0e14;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    overflow: hidden;
}
.kf-cfg .cfg-title {
    color: var(--cyan);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}
.kf-cfg .cfg-empty {
    color: var(--gray);
    font-style: italic;
    padding: 12px 4px;
}
.kf-cfg .cfg-lines {
    height: calc(100% - 36px);
    overflow: hidden;
}
.kf-cfg .cl {
    display: block;
    padding: 1px 6px;
    margin: 0 -6px;
    border-left: 3px solid transparent;
    color: #d1d5db;
    transition: all 0.4s;
    opacity: 0.3;
    white-space: pre;
}
.kf-cfg .cl.show   { opacity: 1; }
.kf-cfg .cl.a-active {
    background: rgba(56, 189, 248, 0.1);
    border-left-color: var(--cyan);
}

/* Flow diagram — bottom band */
.kf-flow {
    position: absolute;
    left: 4%; top: 60%;
    width: 92%; height: 24%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(145deg, #0f1420, #1a2030);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.kf-step {
    flex: 1;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    text-align: center;
    opacity: 0.4;
    transition: all 0.4s;
}
.kf-step.a-active {
    opacity: 1;
    border-color: var(--cyan);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
    transform: translateY(-2px);
}
.kf-step.a-past {
    opacity: 0.7;
    border-color: var(--green);
}
.kf-step .kf-lbl {
    font-weight: 700;
    color: var(--text);
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.kf-step .kf-sub {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: var(--gray);
}
.kf-arr {
    color: var(--gray);
    font-size: 1.4rem;
    font-family: 'Courier New', monospace;
    flex: 0 0 auto;
}

/* Recap overlay — final step */
.kf-recap {
    position: absolute;
    left: 18%; top: 86%;
    width: 64%;
    padding: 14px 22px;
    background: linear-gradient(145deg, #0f2a1e, #0d3320);
    border: 1px solid var(--green);
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.4s;
}
.kf-recap.show { opacity: 1; }
.kf-recap h4 {
    margin: 0 0 6px 0;
    color: var(--green);
    font-size: 0.95rem;
}
.kf-recap ul {
    margin: 0;
    padding-left: 18px;
    font-size: 0.78rem;
    color: var(--text);
    line-height: 1.5;
}

/* Intro overlay */
.kf-intro {
    position: absolute;
    left: 18%; top: 36%;
    width: 64%;
    padding: 22px 28px;
    background: linear-gradient(145deg, #0f1420, #1a2030);
    border: 1px solid var(--cyan);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.2);
}
.kf-intro h2 {
    margin: 0 0 8px 0;
    color: var(--cyan);
    font-size: 1.25rem;
}
.kf-intro p {
    margin: 0;
    color: var(--text);
    line-height: 1.55;
    font-size: 0.92rem;
}
.kf-intro code {
    font-family: 'Courier New', monospace;
    background: rgba(56, 189, 248, 0.12);
    color: var(--cyan);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.82rem;
}