.skill-panel {
  margin-block: .75rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: var(--bg);
  color: var(--text);
  min-width: 0;
}
.skill-panel [hidden] { display: none !important; }
.skill-panel > summary { cursor: pointer; color: var(--accent); font-weight: 650; }
.skill-panel p { margin-block: .6rem; line-height: 1.5; }
.skill-abilities { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .65rem; align-items: flex-start; }
.skill-ability { flex: 1 1 9rem; min-width: 0; border: 1px solid var(--border); border-radius: .4rem; background: var(--surface2); }
.skill-ability[open] { flex-basis: 100%; }
.skill-ability > summary { display: flex; align-items: center; gap: .35rem; padding: .35rem; cursor: pointer; list-style: none; }
.skill-ability > summary::after { content: '+'; color: var(--accent); margin-left: auto; padding-inline: .15rem; }
.skill-ability[open] > summary::after { content: '−'; }
.skill-ability img { flex: 0 0 32px; border-radius: .25rem; }
.skill-slot { color: var(--gold); font-size: .75rem; font-weight: 750; }
.skill-ability-name { font-size: .8rem; line-height: 1.3; overflow-wrap: break-word; }
.skill-tooltip-body { padding: 0 .65rem .65rem; font-size: .85rem; }
.skill-tooltip-body > small { display: block; color: var(--muted); margin-bottom: .45rem; }
.skill-tooltip-body a, .skill-evidence a { color: var(--accent); text-decoration: underline; text-underline-offset: .15rem; }
.skill-scope, .skill-rank-summary { font-size: .82rem; color: var(--muted); }
.skill-plan-status { font-size: .85rem; font-weight: 650; color: var(--gold); }
.skill-limitation { border-left: 3px solid var(--gold); padding-left: .65rem; font-size: .8rem; color: var(--muted); }
.skill-exception { font-size: .82rem; color: var(--text); }
.skill-native-field { display: grid; gap: .35rem; margin-block: .8rem; }
.skill-native-field input { width: 100%; max-width: 24rem; font-family: monospace; letter-spacing: .12em; }
.skill-native-field small { color: var(--muted); font-size: .78rem; }
.skill-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.1rem, 1fr)); gap: .35rem; margin-block: .65rem; }
.skill-level { display: grid; gap: .25rem; padding: .3rem; border: 1px solid var(--border); border-radius: .3rem; min-width: 0; }
.skill-level-number { text-align: center; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.skill-level select { width: 100%; min-width: 0; padding: .35rem .15rem; font-size: .8rem; background: var(--surface2); color: var(--text); border: 1px solid var(--control-border); border-radius: .25rem; }
.skill-level-current { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.skill-level-future { border-style: dashed; }
.skill-plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-block: .7rem; font-size: .8rem; }
.skill-plan-actions select { max-width: 100%; background: var(--surface2); color: var(--text); border: 1px solid var(--control-border); border-radius: .3rem; padding: .4rem; }
.skill-plan-actions button { border: 1px solid var(--control-border); border-radius: .35rem; background: var(--surface2); color: var(--text); padding: .45rem .55rem; cursor: pointer; }
.skill-panel :is(select, button, input, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skill-edit-error { grid-column: 1 / -1; border-left: 3px solid var(--gold); padding: .5rem .65rem; color: var(--text); overflow-wrap: anywhere; }
.skill-panel select[aria-invalid="true"] { border-color: var(--gold); }
.skill-evidence :is(a, p, li), .skill-tooltip-body { overflow-wrap: anywhere; }
.skill-evidence { margin-top: .6rem; font-size: .8rem; color: var(--muted); }
.skill-evidence > summary { cursor: pointer; color: var(--accent); }
.skill-evidence ul { padding-left: 1.2rem; }
@media (max-width: 480px) {
  .skill-panel { padding: .6rem; }
  .skill-ability { flex-basis: 100%; }
  .skill-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .skill-level { padding: .35rem; }
  .skill-level-number { font-size: .85rem; }
  .skill-panel :is(select, button, input) { min-height: 44px; font-size: 1rem; }
  .skill-panel summary { min-height: 44px; align-content: center; }
  .skill-plan-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .skill-plan-actions :is(select, button) { width: 100%; }
  .skill-ability > summary { padding: .5rem; }
}