/* Lab widget styles — extracted from inline <style> blocks in
   functions.php so they land in every LiteSpeed CSS bundle, not just
   /security-lab/'s. Without this, AJAX navigation from another page
   into the lab loads the page-cached HTML but keeps the previous
   page's <head> CSS — so widgets render unstyled until refresh.

   Originally inline in: mefolio_child_security_headers_shortcode (cyber-*),
   mefolio_child_tcp_handshake_shortcode (tcp-*),
   mefolio_child_dns_explainer_shortcode (dns-*). */

/* ---------- cyber-widget — shared dialect for ~14 lab tools ---------- */
.cyber-widget {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    border: 1px solid rgba(23, 182, 160, .15);
    border-radius: 8px;
    padding: 24px;
    margin: 20px 0;
    font-family: 'Poppins', sans-serif;
    color: #c9d3df;
    font-size: 14px;
    line-height: 1.55;
    /* The lab commits to a dark "terminal" surface on purpose, even when the
       rest of the site is in OS light mode — these are code/console panels,
       not page chrome. Declaring the scheme makes the browser paint the
       widgets' NATIVE controls to match: the cipher range slider, text
       input/textarea internals, autofill, and inner scrollbars would
       otherwise render light-on-dark and look broken on a light-mode OS. */
    color-scheme: dark;
}
.cyber-widget-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(23, 182, 160, .12);
}
.cyber-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.cyber-input {
    flex: 1;
    background: rgba(15, 23, 42, .5);
    border: 1px solid rgba(23, 182, 160, .18);
    color: #c9d3df;
    padding: 10px 14px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
}
.cyber-input::placeholder { color: #94a3b8; } /* slate-400, ~6.9:1 on the dark panel; slate-500 #64748b was ~3.8:1, below AA */
.cyber-input:focus {
    outline: 2px solid #17b6a0;
    outline-offset: 1px;
    border-color: rgba(23, 182, 160, .4);
}
.cyber-btn {
    background: #17b6a0;
    border: 1px solid #17b6a0;
    color: #0f172a;
    padding: 10px 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background .2s, color .2s, border-color .2s;
}
.cyber-btn:hover { background: transparent; color: #17b6a0; }
.cyber-btn:focus { outline: 2px solid #17b6a0; outline-offset: 2px; }
.cyber-results {
    font-size: 13px;
    line-height: 1.6;
}
.header-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(23, 182, 160, .1);
}
.header-pass { color: #17b6a0; }
.header-fail { color: #ff4757; }
.header-warn { color: #ffa502; }
.grade-badge {
    display: inline-block;
    font-size: 28px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 4px;
    margin: 12px 0;
}
.grade-a { color: #17b6a0; border: 2px solid #17b6a0; }
.grade-b { color: #ffa502; border: 2px solid #ffa502; }
.grade-c { color: #ff6348; border: 2px solid #ff6348; }
.grade-f { color: #ff4757; border: 2px solid #ff4757; }

/* ---------- TCP handshake visualizer ---------- */
.tcp-viz-btn.active { background: #17b6a0; color: #0f172a; }
.tcp-packet {
    position: absolute;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    animation: tcpSlide .6s ease-out forwards;
    opacity: 0;
}
.tcp-packet.right { left: 62px; text-align: left; border-left: 2px solid #17b6a0; }
.tcp-packet.left { right: 62px; text-align: right; border-right: 2px solid #ff4757; }
.tcp-packet.attack { left: 62px; border-left: 2px solid #ff4757; color: #ff4757; }
@keyframes tcpSlide {
    from { opacity: 0; transform: translateX(0); }
    to { opacity: 1; transform: translateX(0); }
}

/* ---------- DNS resolution explainer ---------- */
.dns-node { transition: opacity .3s; }
.dns-node.active { opacity: 1 !important; }
.dns-arrow { color: #17b6a0; animation: dnsFade .4s ease-in; }
@keyframes dnsFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Respect prefers-reduced-motion. The TCP packet-flow and DNS-resolution
   animations are illustrative, not essential, so disable them when the
   user asks. .tcp-packet rests at opacity:0 (the animation fills it to 1),
   so the override must restore opacity:1 or the packets vanish. */
@media (prefers-reduced-motion: reduce) {
    .tcp-packet { animation: none; opacity: 1; }
    .dns-arrow { animation: none; }
    .dns-node { transition: none; }
}
