/* Hux Studio · Skill detail column system v98 */

.sheet-backdrop {
  background: rgb(3 3 4 / 84%);
  backdrop-filter: blur(2px) saturate(0.72);
}

.asset-sheet {
  width: min(760px, 100vw);
  border-left-color: rgb(255 255 255 / 15%);
  box-shadow: -32px 0 72px rgb(0 0 0 / 46%);
}

.skill-detail-sheet {
  --skill-detail-label-width: 168px;
  --skill-detail-edge: 32px;
  --skill-detail-row-pad: 24px;
}

.skill-detail-record {
  border-top: 1px solid rgb(255 255 255 / 9%);
}

.skill-detail-row {
  grid-template-columns: var(--skill-detail-label-width) minmax(0, 1fr);
  min-height: 88px;
  padding: 0;
  border-bottom-color: rgb(255 255 255 / 9%);
  align-items: stretch;
}

.skill-detail-label,
.skill-detail-value {
  min-height: 88px;
  padding-block: var(--skill-detail-row-pad);
  box-sizing: border-box;
}

.skill-detail-label {
  align-items: flex-start;
  padding-inline: var(--skill-detail-edge) 24px;
  border-right: 1px solid rgb(255 255 255 / 10%);
  background: #111113;
  color: #b8b8be;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
}

.skill-detail-value {
  min-width: 0;
  justify-content: flex-start;
  gap: 14px;
  padding-inline: 32px var(--skill-detail-edge);
  border-left: 0;
  color: #dddddf;
}

.skill-detail-value > p,
.skill-detail-command,
.skill-detail-steps,
.skill-detail-link,
.skill-detail-pills,
.skill-detail-resources {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.skill-detail-command {
  display: flex;
  min-height: 42px;
  padding: 9px 13px;
  border-color: rgb(255 255 255 / 13%);
  background: #151517;
  line-height: 1.65;
}

.skill-detail-link {
  min-height: 42px;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid rgb(255 76 79 / 24%);
  background: rgb(255 76 79 / 4%);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.skill-detail-link:hover,
.skill-detail-link:focus-visible {
  border-color: rgb(255 76 79 / 58%);
  background: rgb(255 76 79 / 9%);
  color: #fff;
  outline: 0;
}

.skill-detail-steps {
  gap: 12px;
  padding-left: 22px;
}

.skill-detail-pills {
  align-items: flex-start;
}

.skill-detail-person {
  min-height: 42px;
  padding-inline: 13px;
  border-color: rgb(255 255 255 / 13%);
  background: #151517;
}

.skill-detail-empty {
  color: #909096;
}

@media (max-width: 760px) {
  .sheet-backdrop {
    background: rgb(3 3 4 / 88%);
    backdrop-filter: none;
  }

  .asset-sheet {
    right: 0;
    left: 0;
    width: auto;
  }

  .skill-detail-sheet {
    --skill-detail-edge: 20px;
    --skill-detail-row-pad: 18px;
  }

  .skill-detail-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    padding: var(--skill-detail-row-pad) var(--skill-detail-edge) 20px;
  }

  .skill-detail-label,
  .skill-detail-value {
    min-height: 0;
    padding: 0;
  }

  .skill-detail-label {
    border-right: 0;
    background: transparent;
    color: #a9a9af;
  }

  .skill-detail-value {
    gap: 10px;
  }

  .skill-detail-command,
  .skill-detail-link {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skill-detail-link {
    transition: none;
  }
}