/* hy-skills — reverser skills mapped onto life areas. */

.hys-toolbar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.8rem}
.hys-modes{display:flex;gap:.3rem}
.hys-hint{margin:0 0 0 auto;color:var(--muted);font:.72rem/1.45 var(--mono);max-width:24rem}

.hys-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(1.6rem,12%,5.5rem);
  padding:1rem .9rem;
  background:var(--code);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.hys-edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.hys-col{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column}
.hys-col-h{margin:0 0 .5rem;color:var(--muted);font:.6rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hys-list,.prose .hys-list{display:grid;gap:.38rem;margin:0;padding:0;list-style:none}
.prose .hys-list li+li{margin-top:0}
.hys-col-skills .hys-list{flex:1;align-content:space-between}

.hys-node{
  position:relative;
  display:block;
  width:100%;
  padding:.46rem .55rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  color:var(--fg);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s,background .15s,opacity .15s;
}
.hys-node:hover{border-color:var(--accent)}
.hys-node[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 13%,var(--surface))}
.hys-node.is-lit{border-color:var(--accent2);background:color-mix(in oklab,var(--accent2) 11%,var(--surface))}
.hys-node[aria-pressed="true"].is-lit{border-color:var(--accent)}
.hys-k{display:block;color:var(--accent2);font:.55rem var(--mono);letter-spacing:.09em;line-height:1.3}
.hys-t{display:block;margin-top:.08rem;font:.82rem/1.3 var(--body);overflow-wrap:anywhere}
.hys-area .hys-t{font-weight:600;font-size:.9rem}
.hys-sub{display:block;margin-top:.08rem;color:var(--muted);font:.68rem/1.35 var(--body)}
.hys-legend{margin:.6rem 0 0;max-width:24ch;color:var(--muted);font:.62rem/1.45 var(--mono)}
.hys-n{display:block;margin-top:.18rem;color:var(--accent3);font:.55rem var(--mono);letter-spacing:.04em}

.hys-edge{fill:none;stroke:var(--line);stroke-width:1.2;opacity:.42;transition:stroke .18s,opacity .18s,stroke-width .18s}
.hys-stage.has-active .hys-edge{opacity:.1}
.hys-stage.has-active .hys-edge.is-lit{opacity:.95;stroke:var(--accent);stroke-width:2.2}
.hys-stage.has-active .hys-edge.is-lit-area{opacity:.95;stroke:var(--accent2);stroke-width:2.2}
.hys-stage.has-active .hys-node:not(.is-lit):not([aria-pressed="true"]){opacity:.55}

.hys-alertdock{margin-top:.7rem;padding:.55rem .7rem;border:1px dashed color-mix(in oklab,var(--accent3) 55%,var(--line));border-radius:10px;background:color-mix(in oklab,var(--accent3) 6%,var(--surface))}
.hys-alertdock[hidden]{display:none}
.hys-alert-h{margin:0;color:var(--accent3);font:.58rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hys-alerts{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0 0;padding:0;list-style:none}
.hys-alert{padding:.22rem .5rem;border:1px solid color-mix(in oklab,var(--accent3) 35%,var(--line));border-radius:6px;background:var(--surface);color:var(--muted);font:.66rem/1.4 var(--mono);animation:hys-alert-in .35s both}
.hys-alert:nth-child(2n){rotate:.8deg}
.hys-alert:nth-child(3n){rotate:-.9deg}
.hys-alert:nth-child(2){animation-delay:.06s}
.hys-alert:nth-child(3){animation-delay:.12s}
.hys-alert:nth-child(4){animation-delay:.18s}
.hys-alert:nth-child(5){animation-delay:.24s}
.hys-alert:nth-child(6){animation-delay:.3s}
@keyframes hys-alert-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}

.hys-stage.is-panic .hys-edge{stroke:var(--accent3);opacity:.55;animation:hys-jitter .8s infinite alternate ease-in-out}
.hys-stage.is-panic .hys-edge.is-lit,.hys-stage.is-panic .hys-edge.is-lit-area{stroke:var(--accent);opacity:1;animation:none}
.hys-stage.is-panic .hys-node{border-color:color-mix(in oklab,var(--accent3) 35%,var(--line))}
@keyframes hys-jitter{from{transform:translate(0,0)}to{transform:translate(1.5px,-1px)}}

.hys-detail{margin-top:.8rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--surface2);min-height:4.8rem}
.hys-d-kicker{margin:0;color:var(--muted);font:.58rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hys-d-title{margin:.15rem 0 .3rem;font:600 1.05rem/1.25 var(--disp);color:var(--fg)}
.hys-d-title small{display:block;margin-top:.1rem;color:var(--muted);font:400 .74rem/1.4 var(--body)}
.hys-d-text{margin:0;color:var(--fg);font:.88rem/1.6 var(--body)}
.hys-d-text b{color:var(--accent2);font-weight:600}
.hys-d-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.55rem 0 0;padding:0;list-style:none}
.hys-chip{padding:.2rem .5rem;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--fg);font:.68rem var(--mono)}
.hys-d-label{margin:.5rem 0 .2rem;color:var(--muted);font:.6rem var(--mono);letter-spacing:.08em;text-transform:uppercase}

.hys-cap{margin:.8rem 0 0;padding-left:.7rem;border-left:3px solid var(--accent);color:var(--fg);font:.9rem/1.6 var(--body)}
.hys-root.is-panic .hys-cap{border-left-color:var(--accent3);color:var(--muted)}
.hys-root :focus-visible{outline:2px dashed var(--accent2);outline-offset:2px}

.hys-static{display:block}
html.hys-ready .hys-static{display:none}
html:not(.hys-ready) .hys-app{display:none}
html.hys-ready .hys-app{display:block}
.hys-static-note{margin:.2rem 0 .8rem;color:var(--muted);font:.82rem/1.6 var(--body)}
.hys-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.hys-tablewrap table{min-width:34rem;margin:0;font-size:.82rem}
.hys-tablewrap caption{text-align:left;padding:.5rem .7rem;color:var(--muted);font:.68rem var(--mono);border-bottom:1px solid var(--line)}
.hys-tablewrap th,.hys-tablewrap td{padding:.45rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.hys-tablewrap thead th{background:var(--surface2);font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase}
.hys-tablewrap tbody th{font-weight:600}
.hys-tablewrap tr:last-child th,.hys-tablewrap tr:last-child td{border-bottom:0}

@media(max-width:620px){
  .hys-tablewrap{overflow:visible;border:0}
  .hys-tablewrap table{display:block;width:100%;min-width:0;margin:0;font-size:.8rem}
  .hys-tablewrap caption{display:block;width:100%;padding:.3rem 0 .4rem;border-bottom:0}
  .hys-tablewrap thead{display:none}
  .hys-tablewrap tbody{display:block;width:100%}
  .hys-tablewrap tr{display:block;width:100%;box-sizing:border-box;margin-top:.55rem;padding:.55rem .65rem;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
  .hys-tablewrap tbody th{display:block;width:100%;box-sizing:border-box;padding:0;border:0;font-size:.86rem;line-height:1.35}
  .hys-tablewrap td{display:block;width:100%;box-sizing:border-box;padding:.1rem 0;border:0;font-size:.78rem;line-height:1.5;overflow-wrap:anywhere}
  .hys-tablewrap td::before{content:attr(data-label);display:block;margin:.3rem 0 .05rem;color:var(--muted);font:.52rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
}

@media(max-width:620px){
  .hys-toolbar{gap:.45rem}
  .hys-hint{margin-left:0;max-width:none;flex-basis:100%}
  /* One column: the two 140px columns made every title wrap. The SVG edges
     only describe a left-to-right map, so drop them rather than draw a
     tangle across the stacked cards. Selection still lights up linked nodes. */
  .hys-stage{grid-template-columns:minmax(0,1fr);gap:1rem;padding:.65rem .5rem}
  .hys-edges{display:none}
  .hys-col-skills{padding-bottom:.9rem;border-bottom:1px dashed var(--line)}
  .hys-node{min-height:44px}
  .hys-legend{max-width:none}
  /* Beat the article-wide 40px toy-button rule for the map's mode controls. */
  .layout:has(.hyf-hud) .prose .hys-modes .toy-btn{min-height:44px}
  .hys-col-h{font-size:.54rem}
  .hys-list{gap:.3rem}
  .hys-node{padding:.38rem .42rem}
  .hys-k{font-size:.5rem}
  .hys-t{font-size:.72rem;line-height:1.25}
  .hys-area .hys-t{font-size:.8rem}
  .hys-sub{font-size:.62rem}
  .hys-n{font-size:.5rem}
  .hys-detail{padding:.6rem .65rem}
}

@media(min-width:761px) and (max-width:1024px){
  .hys-node,.hys-modes .toy-btn{min-height:44px}
}

@media(prefers-reduced-motion:reduce){
  .hys-node,.hys-edge{transition:none}
  .hys-stage.is-panic .hys-edge{animation:none}
  .hys-alert{animation:none}
}