/*==================== SKILLS — neofetch terminal ====================*/
/* A dark terminal panel that "runs" neofetch: ASCII banner + a spec sheet of the
   stack, in the site's brutalist frame (2px ink border + hard navy offset shadow).
   Ties to the terminal identity of the nav logo. Logos stay full-colour. */

.skills .section__subtitle.sk-sub {
    display: block;
    font-family: var(--mono-font);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: lowercase;
    color: var(--text-color-light);
    margin-bottom: 0;
}

/* neutralise the global span{font-style:italic} inside this section */
.skills .sk-sub,
.skills .sk-wrap span { font-style: normal; }

.sk-wrap { max-width: 920px; margin: 2.6rem auto 0; padding: 0 1rem; }

.sk-term {
    background: #0d1117;
    border: 2px solid var(--first-color-dark);
    box-shadow: 8px 8px 0 var(--first-color-second);
    font-family: var(--mono-font);
    overflow: hidden;
    animation: sk-in .6s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes sk-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.sk-bar { display: flex; align-items: center; gap: .5rem; background: #161b22; padding: .6rem .85rem; border-bottom: 1px solid #30363d; }
.sk-dot { width: .72rem; height: .72rem; border-radius: 50%; background: #484f58; flex: none; }
.sk-dot:nth-child(1) { background: #ff5f56; }
.sk-dot:nth-child(2) { background: #febc2e; }
.sk-dot:nth-child(3) { background: #28c840; }
.sk-tt { margin-left: .55rem; color: #8b949e; font-size: .74rem; }

.sk-body { padding: 1.5rem 1.6rem 1.7rem; color: #c9d1d9; font-size: .86rem; line-height: 1.5; }
.sk-cmd { color: #8b949e; margin-bottom: 1.4rem; }
.sk-user { color: #56d364; font-weight: 700; }
.sk-path { color: #79c0ff; }
.sk-cmd .fl { color: #c9d1d9; font-weight: 700; }
.sk-cur { display: inline-block; width: .55rem; height: 1.05em; background: #c9d1d9; vertical-align: -.15em; margin-left: .25rem; animation: sk-blink 1.1s steps(1) infinite; }
@keyframes sk-blink { 50% { opacity: 0; } }

.sk-spec { min-width: 0; }
.sk-hdr { color: #56d364; font-weight: 700; }
.sk-hdr .sk-at { color: #8b949e; }
.sk-rule { color: #30363d; margin: .05rem 0 .5rem; letter-spacing: -.05em; overflow: hidden; white-space: nowrap; }
.sk-row { display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline; padding: .24rem 0; }
.sk-key { color: #79c0ff; font-weight: 700; width: 5.6rem; flex: none; }
.sk-key::after { content: "/"; color: #30363d; }
.sk-vals { display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
.sk-v { display: inline-flex; align-items: center; gap: .35rem; color: #c9d1d9; font-size: .82rem; transition: color .2s, transform .2s; }
.sk-v img { width: 16px; height: 16px; object-fit: contain; display: block; }
.sk-v:hover { color: #fff; transform: translateY(-1px); }

@media (max-width: 620px) {
    .sk-body { padding: 1.2rem 1.1rem 1.3rem; font-size: .82rem; }
    .sk-key { width: auto; }
    .sk-key::after { content: "/ "; }
}
@media (prefers-reduced-motion: reduce) {
    .sk-term { animation: none; }
    .sk-cur { animation: none; }
}