.skills-page {
 display: flex;
 flex-direction: column;
 gap: 16px;
 min-height: 100%;
 padding: 32px;
}

.skills-heading {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
}

.skills-heading h1 {
 margin: 0 0 4px;
}

.skills-heading p {
 margin: 0;
 max-width: 40rem;
}

.skills-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.skills-row {
 display: grid;
 grid-template-columns:
  minmax(0, 1.4fr)
  auto;
 gap: 2px 16px;
 width: 100%;
 padding: 12px 14px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 color: inherit;
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.skills-row:hover {
 background: var(--accent);
}

.skills-row-title {
 font-weight: 600;
}

.skills-row-slug {
 justify-self: end;
 color: var(--muted-foreground);
 font-family:
  ui-monospace, SFMono-Regular, Menlo,
  monospace;
 font-size: 13px;
}

.skills-row-desc,
.skills-row-kind {
 grid-column: 1 / -1;
 font-size: 13px;
}

.skill-hint {
 margin: 0;
 font-size: 12px;
}

.skill-md-editor {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.skill-md-toolbar {
 display: flex;
 gap: 8px;
}

.skill-md-panes {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 min-height: 16rem;
}

.skill-md-input {
 min-height: 16rem;
 font-family:
  ui-monospace, SFMono-Regular, Menlo,
  monospace;
 font-size: 13px;
}

.skill-md-preview {
 min-height: 16rem;
 padding: 12px;
 overflow: auto;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--background);
}

.skill-dialog {
 width: min(920px, calc(100vw - 32px));
}

.skill-dialog-footer {
 display: flex;
 gap: 8px;
 width: 100%;
 justify-content: flex-end;
}

.skill-dialog-footer .btn-destructive {
 margin-right: auto;
}

@media (max-width: 720px) {
 .skill-md-panes {
  grid-template-columns: 1fr;
 }

 .skills-heading {
  flex-direction: column;
 }
}