/* Skills explorer: layered interactivity without changing the content inventory. */
.skills-explorer[hidden] { display:none!important; }
.skills-explorer { margin-bottom:clamp(1.5rem,4vw,2.5rem); padding:clamp(1.1rem,2.8vw,1.8rem); border:1px solid rgba(125,180,240,.25); border-radius:1.3rem; background:linear-gradient(145deg,rgba(125,180,240,.065),transparent 60%),#1b2430; }
.skills-explorer-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6rem 1rem; }
.skills-explorer-head h3 { font:600 clamp(1rem,2vw,1.25rem)/1.3 Inter,system-ui,sans-serif; margin:0; }
.skills-explorer-head p { margin:0; color:#aebfd0; font-size:.8rem; font-variant-numeric:tabular-nums; }
.skills-explorer-search { display:flex; gap:.7rem; margin-top:1.2rem; }
.skills-explorer-search input { flex:1; min-width:0; min-height:48px; padding:.65rem 1rem; border:1px solid rgba(157,203,244,.3); border-radius:.7rem; background:#121923; color:#ebf5ff; font:500 .94rem/1.4 Inter,system-ui,sans-serif; }
.skills-explorer-search input:focus-visible { outline:2px solid #8cbdeb; outline-offset:3px; }
.skills-explorer-search button { min-height:48px; padding:.6rem 1rem; border:1px solid rgba(157,203,244,.32); border-radius:.7rem; background:#263649; color:#e3f0fb; font:600 .82rem Inter,system-ui,sans-serif; cursor:pointer; }
.skills-explorer-search button:hover { background:#36516a; }
.skills-areas { display:flex; gap:.6rem; overflow-x:auto; padding:.35rem 0 .6rem; margin-top:.95rem; scrollbar-width:thin; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.skills-areas button { flex:0 0 auto; min-height:44px; padding:.55rem .95rem; border:1px solid rgba(157,203,244,.26); border-radius:3rem; background:transparent; color:#c6d8e9; font:600 .8rem/1.4 Inter,system-ui,sans-serif; cursor:pointer; transition:background .2s ease,border-color .2s ease; }
.skills-areas button:hover { border-color:#9bc7f5; }
.skills-areas button[aria-pressed="true"] { color:#101923; background:#95c5f5; border-color:#95c5f5; }
.skills-areas button:focus-visible, .skills-visual:focus-visible { outline:2px solid #9bcfff; outline-offset:3px; }
.inventory-card.skill-filtered-out { display:none!important; }
.skill-directory-grid .skills-no-results { grid-column:1/-1; border:1px dashed rgba(157,203,244,.36); border-radius:1rem; padding:2.5rem 1rem; text-align:center; color:#c6d8e9; }
.skill-list li.skill-hit { border-color:#9bc8fb; background:rgba(125,180,240,.12); color:#e5f4ff; }
#skills-directory .inventory-card { position:relative; isolation:isolate; transition:border-color .3s ease,box-shadow .3s ease,transform .4s cubic-bezier(.22,1,.36,1); }
#skills-directory .inventory-card:not(.inventory-tools) { padding-top:clamp(5.5rem,9vw,6.2rem); }
#skills-directory .inventory-card:hover { border-color:rgba(125,180,240,.4); box-shadow:0 18px 55px -45px rgba(125,180,240,.3); }
.skills-visual { position:absolute; top:1.05rem; right:1.1rem; width:min(44%,140px); height:56px; border:0; border-radius:.6rem; background:transparent; cursor:pointer; opacity:.8; transition:opacity .25s ease,transform .3s ease; }
.skills-visual svg { width:100%; height:100%; overflow:visible; }
.skills-visual :is(.skill-trace,.skill-guide) { fill:none; stroke:#a2ceff; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.skills-visual .skill-guide { stroke:#77a8d4; opacity:.3; }
.skills-visual .skill-point { fill:#5285b2; stroke:#aedaff; stroke-width:1.3; }
@media(hover:hover) and (pointer:fine) {
  .skills-visual:hover { opacity:1; transform:translateY(-2px); }
  #skills-directory .inventory-card:hover .skills-visual .skill-trace { stroke:#d0e9ff; }
}
@media(prefers-reduced-motion:no-preference) {
  .skills-visual:hover .skill-trace, .skills-visual.is-playing .skill-trace { stroke-dasharray:240; stroke-dashoffset:240; animation:skill-signal-draw 1.45s cubic-bezier(.22,1,.36,1) both; }
  .skills-visual:hover .skill-point, .skills-visual.is-playing .skill-point { animation:skill-point-rise .8s ease-in-out infinite alternate; }
}
@keyframes skill-signal-draw { to { stroke-dashoffset:0; } }
@keyframes skill-point-rise { to { opacity:.4; transform:translateY(-3px); } }
@media(max-width:700px) {
  .skills-explorer { padding:1rem; }
  .skills-explorer-search { flex-wrap:wrap; }
  .skills-explorer-search button { width:100%; }
  .skills-visual { top:1rem; width:110px; }
  #skills-directory .inventory-card:not(.inventory-tools) { padding-top:5.4rem; }
}
@media(prefers-reduced-motion:reduce) { .skills-visual *, #skills-directory .inventory-card { animation:none!important;transition:none!important; } }

/* Semantic icon cards: compact, balanced, no empty illustration band. */
#skills-directory .inventory-card { min-width:0; padding:clamp(1rem,2.2vw,1.4rem); }
#skills-directory .inventory-card:not(.inventory-tools) { padding-top:clamp(1rem,2.2vw,1.4rem); }
#skills-directory .inventory-card > h3 { max-width:calc(100% - 80px); min-height:64px; display:flex; align-items:center; margin:0 0 .65rem; font-size:clamp(1.04rem,1.45vw,1.24rem); line-height:1.35; text-wrap:pretty; }
#skills-directory .inventory-card > p { margin-top:.2rem; }
#skills-directory .inventory-card .skills-visual { top:clamp(.9rem,2vw,1.2rem); right:clamp(.9rem,2vw,1.2rem); width:58px; height:58px; display:grid; place-items:center; color:#a9d3fd; border:1px solid rgba(125,180,240,.24); border-radius:16px; background:#233244; opacity:1; }
#skills-directory .inventory-card .skills-visual svg { width:48px; height:48px; }
#skills-directory .inventory-card .skills-visual .skill-trace { stroke:currentColor; stroke-width:1.65; stroke-linejoin:round; stroke-linecap:round; fill:none; }
#skills-directory .inventory-card .skills-visual .skill-accent { stroke:#d1ebff; stroke-width:1.7; fill:rgba(125,180,240,.17); }
#skills-directory .inventory-card .skills-visual rect.skill-accent { fill:#395c7f; }
#skills-directory .inventory-card .skills-visual .skill-trace path[stroke-dasharray] { stroke-dasharray:3 4; }
#skills-directory .inventory-card .skills-visual:hover { transform:translateY(-2px); background:#30445c; border-color:rgba(153,207,255,.52); }
#skills-directory .inventory-card .skills-visual:focus-visible { outline:2px solid #b0daff; outline-offset:3px; }
#skills-directory .inventory-tools > h3 { max-width:calc(100% - 80px); }
#skills-directory .inventory-tools .tools-grid { margin-top:.75rem; }
@keyframes semantic-icon-trace { from { transform:translateY(0) scale(1); opacity:.75; } 50% { transform:translateY(-2px) scale(1.04); opacity:1; } to { transform:translateY(0) scale(1); opacity:.9; } }
@keyframes semantic-icon-accent { 50% { fill:#6fa8df; transform:scale(1.09); } }
@media(prefers-reduced-motion:no-preference){
  .skills-visual:is(:hover,.is-playing) svg .skill-trace { stroke-dasharray:none; stroke-dashoffset:0; animation:semantic-icon-trace .8s cubic-bezier(.22,1,.36,1) both; transform-origin:32px 32px; }
  .skills-visual:is(:hover,.is-playing) svg .skill-accent { animation:semantic-icon-accent .9s ease-in-out alternate; transform-origin:center; }
}
@media(max-width:700px){
  #skills-directory .inventory-card:not(.inventory-tools) { padding-top:1.1rem; }
  #skills-directory .inventory-card .skills-visual { width:52px; height:52px; }
  #skills-directory .inventory-card .skills-visual svg { width:42px; height:42px; }
  #skills-directory .inventory-card > h3 { max-width:calc(100% - 66px); min-height:56px; }
}
@media(prefers-reduced-motion:reduce){#skills-directory .inventory-card .skills-visual,.skills-visual *{animation:none!important;transition:none!important;}}