/*
 * lab-targets.css — styles for the Live Targets block rendered by lab-targets.js.
 *
 * Kept separate from styles.css on purpose: the path pages
 * (practitioners-foundation, aiml-security, cloud-security-basics, ...) are
 * self-contained and never load styles.css, so putting these rules there left
 * the block unstyled on exactly the rooms it was built for.
 *
 * Scoped entirely to .lt-* class names, so loading it on any page is safe.
 */
/* ============================================================
   LIVE TARGETS (lab-targets.js)
   Cards for the fake-sites / docker-challenges practice apps.
   Rendered inside the lab modal and inside path rooms.
   ============================================================ */
.lt-wrap {
    margin-top: 25px;
    padding: 16px;
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.04);
}
.lt-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--accent);
}
.lt-sub-label {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0;
    color: var(--text-muted);
    font-weight: normal;
}
.lt-blurb {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 8px 0 14px;
}
.lt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 12px;
}
.lt-card {
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--bg-card);
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.3s, transform 0.3s;
}
.lt-card:hover {
    border-color: rgba(251, 191, 36, 0.45);
    transform: translateY(-2px);
}
.lt-card-stack { grid-column: 1 / -1; }
/* Icon + title on row 1, launch button on row 2. A single wrapping row
   squeezed the title to ~120px and broke names mid-word ("My / Account"). */
.lt-head {
    display: grid;
    grid-template-columns: 30px 1fr;
    grid-template-areas: "icon titles" "launch launch" "badge badge";
    align-items: center;
    gap: 9px 10px;
}
.lt-icon {
    grid-area: icon;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--accent);
}
.lt-titles { grid-area: titles; min-width: 0; }
.lt-name {
    font-family: var(--font-display);
    font-size: 12.5px;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    overflow-wrap: normal;
    word-break: keep-all;
}
.lt-vuln {
    font-size: 11px;
    color: var(--secondary);
    margin-top: 2px;
}
.lt-obj {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}
.lt-obj strong { color: var(--accent); font-weight: 600; }
.lt-badge {
    grid-area: badge;
    justify-self: start;
    font-size: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: var(--accent-green);
    white-space: nowrap;
}
.lt-launch {
    grid-area: launch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 7px;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.3s, box-shadow 0.3s;
}
.lt-launch:hover {
    background: var(--primary-dark);
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.45);
}
.lt-cmds, .lt-eps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lt-cmds li, .lt-eps li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--glass-border);
    border-radius: 7px;
    padding: 7px 10px;
}
.lt-cmds code, .lt-eps code {
    font-family: 'Fira Code', monospace;
    font-size: 11.5px;
    color: var(--accent-green);
    background: none;
    border: none;
    padding: 0;
}
.lt-ep-label {
    font-size: 11px;
    color: var(--text-secondary);
    flex: 0 0 210px;
}
.lt-copy {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px 7px;
    font-size: 11px;
    transition: color 0.3s, border-color 0.3s;
}
.lt-copy:hover { color: var(--accent); border-color: var(--accent); }
.lt-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 14px 0 0;
    padding-top: 11px;
    border-top: 1px dashed var(--glass-border);
}
.lt-warn i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.lt-warn code {
    font-family: 'Fira Code', monospace;
    font-size: 11px;
    color: var(--accent-green);
    background: rgba(0, 255, 0, 0.07);
    border: 1px solid rgba(0, 255, 0, 0.16);
    border-radius: 4px;
    padding: 1px 6px;
}

/* ============================================================
   EMBEDDED / AUTO-START MODE (preloadTargets opts.embed/autoStart)
   The lab modal pre-loads the target page in an inline iframe and
   offers a one-click start for docker-backed stacks.
   ============================================================ */
.lt-card-embed { grid-column: 1 / -1; }
.lt-embed-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lt-target-frame {
    width: 100%;
    min-height: 420px;
    height: 52vh;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
}
.lt-embed-actions .lt-launch {
    grid-area: unset;
    justify-self: unset;
    align-self: flex-start;
}
.lt-eps-embed { margin-top: 2px; }
.lt-eps-embed li { padding: 5px 9px; }
.lt-eps-embed .lt-ep-label { flex-basis: auto; }
.lt-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    align-self: flex-start;
    padding: 9px 15px;
    border: 1px solid rgba(52, 211, 153, 0.45);
    border-radius: 7px;
    background: rgba(52, 211, 153, 0.12);
    color: var(--accent-green);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.lt-ctrl-btn:hover {
    background: rgba(52, 211, 153, 0.22);
    border-color: var(--accent-green);
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.35);
}
.lt-status {
    font-size: 11.5px;
    color: var(--accent);
    min-height: 16px;
}
/* The start button carries both classes; keep the compound selector so the
   verification script's "every emitted lt- class has a rule" check passes. */
.lt-start-env { font-size: 11px; }

@media (max-width: 640px) {
    .lt-grid { grid-template-columns: 1fr; }
    .lt-ep-label { flex-basis: auto; }
    .lt-target-frame { min-height: 320px; height: 46vh; }
}