/* ---------- skills ---------- */
.skill-browser{display:grid;grid-template-columns:220px 1fr;gap:38px;align-items:start}

/* filter rail — same button design + click effect, stacked vertically */
.filters{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.filters button{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--ink-2);
  padding:9px 18px;transition:all .2s;text-transform:uppercase;
}
.filters button:hover{border-color:var(--accent);color:var(--accent)}
.filters button.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* skills panel (right) — empty until a filter is picked */
.skill-panel{min-height:120px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font-family:var(--mono);font-size:.8rem;padding:10px 16px;
  border:1px solid var(--line);background:var(--surface);
  transition:all .25s;cursor:default;
}
.chip:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.chip.hide{display:none}
.chip .cat{color:var(--ink-3);font-size:.66rem;margin-left:8px;text-transform:uppercase;letter-spacing:.08em}

/* empty-state terminal */
.skill-empty{display:none}
.skill-empty.is-shown{display:block}
.term{width:100%;max-width:440px;border:1px solid var(--line);background:var(--surface);font-family:var(--mono)}
.term-bar{display:flex;align-items:center;gap:7px;padding:9px 14px;border-bottom:1px solid var(--line)}
.term-dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.term-dot:first-child{background:var(--accent)}
.term-title{margin-left:6px;font-size:.7rem;letter-spacing:.08em;color:var(--ink-3)}
.term-body{padding:16px}
.term-line{font-size:.85rem;color:var(--ink);line-height:1.5;min-height:1.5em}
.term-prompt{color:var(--accent);margin-right:8px}
.term-cursor{
  display:inline-block;width:7px;height:1em;margin-left:3px;transform:translateY(2px);
  background:var(--accent);animation:termBlink 1.05s steps(1) infinite;
}
@keyframes termBlink{50%{opacity:0}}
.term-hint{font-size:.74rem;color:var(--ink-3);margin-top:13px}
.term-meta{font-size:.74rem;color:var(--ink-3);margin-top:6px}
.term-meta b{color:var(--accent);font-weight:600}

@media(max-width:720px){
  .skill-browser{grid-template-columns:1fr;gap:22px}
  .filters{flex-direction:row;flex-wrap:wrap}
  .skill-panel{min-height:0}
}
@media(max-width:480px){
  .chip{font-size:.74rem;padding:9px 13px}
  .chip .cat{font-size:.6rem;margin-left:6px}
  .term{max-width:none}
  .term-line{font-size:.8rem}
}