.commands-hero {
  padding:
    var(--space-12)
    0
    var(--space-10);
}

.commands-hero-inner {
  max-width: 820px;
}

.commands-hero .heading-xl {
  margin-bottom: var(--space-5);
}

.commands-hero .lead {
  margin-bottom: var(--space-8);
}

.commands-search-wrap {
  position: relative;

  max-width: 720px;
}

.commands-search {
  width: 100%;
  min-height: 52px;

  padding:
    0
    46px
    0
    16px;

  border:
    1px solid
    var(--border-default);

  border-radius:
    var(--radius-md);

  background:
    var(--background-raised);

  color:
    var(--text-primary);

  font-size:
    var(--font-sm);

  transition:
    border-color
    var(--transition-fast),
    background
    var(--transition-fast);
}

.commands-search::placeholder {
  color:
    var(--text-subtle);
}

.commands-search:focus {
  border-color:
    var(--border-strong);

  background:
    var(--background-card);
}

.commands-search-icon {
  position: absolute;

  top: 50%;
  right: 16px;

  color:
    var(--text-subtle);

  font-family:
    var(--font-mono);

  transform:
    translateY(-50%);

  pointer-events:
    none;
}

.commands-layout {
  display: grid;

  grid-template-columns:
    220px
    minmax(0, 1fr);

  gap:
    var(--space-10);

  align-items:
    start;
}

.commands-sidebar {
  position: sticky;

  top:
    calc(
      var(--navbar-height) +
      var(--space-6)
    );
}

.commands-sidebar-title {
  margin-bottom:
    var(--space-4);

  color:
    var(--text-subtle);

  font-size:
    10px;

  font-weight:
    var(--weight-semibold);

  text-transform:
    uppercase;

  letter-spacing:
    var(--tracking-wide);
}

.commands-categories {
  display: flex;

  flex-direction:
    column;

  gap:
    4px;
}

.command-category-button {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  width:
    100%;

  min-height:
    40px;

  padding:
    0
    12px;

  border-radius:
    var(--radius-sm);

  color:
    var(--text-muted);

  font-size:
    var(--font-sm);

  text-align:
    left;

  transition:
    color
    var(--transition-fast),
    background
    var(--transition-fast);
}

.command-category-button:hover {
  color:
    var(--text-primary);

  background:
    var(--surface-2);
}

.command-category-button.active {
  color:
    var(--text-primary);

  background:
    var(--surface-3);
}

.command-category-count {
  color:
    var(--text-subtle);

  font-family:
    var(--font-mono);

  font-size:
    10px;
}

.commands-content {
  min-width:
    0;
}

.commands-toolbar {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    var(--space-5);

  margin-bottom:
    var(--space-6);
}

.commands-result-count {
  color:
    var(--text-muted);

  font-size:
    var(--font-sm);
}

.commands-result-count strong {
  color:
    var(--text-primary);

  font-weight:
    var(--weight-medium);
}

.commands-view-options {
  display: flex;

  align-items:
    center;

  gap:
    var(--space-2);
}

.command-list {
  display: flex;

  flex-direction:
    column;

  gap:
    var(--space-3);
}

.command-detail-card {
  overflow:
    hidden;

  border:
    1px solid
    var(--border-default);

  border-radius:
    var(--radius-lg);

  background:
    var(--surface-1);

  transition:
    border-color
    var(--transition-normal),
    background
    var(--transition-normal);
}

.command-detail-card:hover {
  border-color:
    var(--border-strong);

  background:
    var(--surface-2);
}

.command-detail-header {
  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    var(--space-6);

  padding:
    var(--space-6);
}

.command-detail-main {
  min-width:
    0;
}

.command-detail-title {
  display: flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    var(--space-3);

  margin-bottom:
    var(--space-3);
}

.command-detail-title code {
  color:
    var(--text-primary);

  font-size:
    var(--font-md);

  font-weight:
    var(--weight-semibold);
}

.command-badges {
  display: flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;
}

.command-type-badge {
  display: inline-flex;

  align-items:
    center;

  min-height:
    24px;

  padding:
    0
    8px;

  border:
    1px solid
    var(--border-default);

  border-radius:
    var(--radius-full);

  background:
    var(--surface-2);

  color:
    var(--text-muted);

  font-family:
    var(--font-mono);

  font-size:
    10px;
}

.command-detail-description {
  max-width:
    720px;

  color:
    var(--text-muted);

  font-size:
    var(--font-sm);

  line-height:
    var(--leading-relaxed);
}

.command-expand-button {
  display: grid;

  place-items:
    center;

  width:
    34px;

  height:
    34px;

  flex-shrink:
    0;

  border:
    1px solid
    var(--border-default);

  border-radius:
    var(--radius-sm);

  background:
    var(--surface-2);

  color:
    var(--text-secondary);

  transition:
    transform
    var(--transition-normal),
    border-color
    var(--transition-fast),
    background
    var(--transition-fast);
}

.command-detail-card.open
.command-expand-button {
  transform:
    rotate(180deg);
}

.command-detail-body {
  overflow:
    hidden;

  max-height:
    0;

  border-top:
    1px solid
    transparent;

  opacity:
    0;

  transition:
    max-height
    var(--transition-slow),
    opacity
    var(--transition-normal),
    border-color
    var(--transition-normal);
}

.command-detail-card.open
.command-detail-body {
  max-height:
    1200px;

  border-top-color:
    var(--border-subtle);

  opacity:
    1;
}

.command-detail-body-inner {
  padding:
    var(--space-6);
}

.command-section {
  margin-bottom:
    var(--space-7);
}

.command-section:last-child {
  margin-bottom:
    0;
}

.command-section-title {
  margin-bottom:
    var(--space-3);

  color:
    var(--text-subtle);

  font-size:
    10px;

  font-weight:
    var(--weight-semibold);

  text-transform:
    uppercase;

  letter-spacing:
    var(--tracking-wide);
}

.command-usage {
  display: flex;

  flex-direction:
    column;

  gap:
    var(--space-2);
}

.command-code {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    var(--space-4);

  padding:
    var(--space-3)
    var(--space-4);

  border:
    1px solid
    var(--border-default);

  border-radius:
    var(--radius-sm);

  background:
    var(--background-soft);
}

.command-code code {
  overflow:
    hidden;

  color:
    var(--text-secondary);

  font-size:
    var(--font-xs);

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.command-copy {
  flex-shrink:
    0;

  color:
    var(--text-subtle);

  font-size:
    11px;

  transition:
    color
    var(--transition-fast);
}

.command-copy:hover {
  color:
    var(--text-primary);
}

.command-options {
  display: flex;

  flex-direction:
    column;

  border:
    1px solid
    var(--border-default);

  border-radius:
    var(--radius-sm);

  overflow:
    hidden;
}

.command-option {
  display: grid;

  grid-template-columns:
    minmax(120px, 0.6fr)
    minmax(100px, 0.4fr)
    1fr;

  gap:
    var(--space-4);

  padding:
    var(--space-3)
    var(--space-4);

  border-bottom:
    1px solid
    var(--border-subtle);
}

.command-option:last-child {
  border-bottom:
    0;
}

.command-option-name {
  color:
    var(--text-primary);

  font-family:
    var(--font-mono);

  font-size:
    var(--font-xs);
}

.command-option-type {
  color:
    var(--text-subtle);

  font-family:
    var(--font-mono);

  font-size:
    10px;
}

.command-option-description {
  color:
    var(--text-muted);

  font-size:
    var(--font-xs);

  line-height:
    var(--leading-relaxed);
}

.commands-empty {
  display:
    none;

  padding:
    var(--space-12)
    var(--space-6);

  border:
    1px dashed
    var(--border-default);

  border-radius:
    var(--radius-lg);

  text-align:
    center;
}

.commands-empty.visible {
  display:
    block;
}

.commands-empty h3 {
  margin-bottom:
    var(--space-3);

  color:
    var(--text-primary);

  font-size:
    var(--font-xl);
}

.commands-empty p {
  color:
    var(--text-muted);

  font-size:
    var(--font-sm);
}

.commands-footer-note {
  margin-top:
    var(--space-8);

  padding-top:
    var(--space-6);

  border-top:
    1px solid
    var(--border-subtle);

  color:
    var(--text-subtle);

  font-size:
    var(--font-xs);
}

@media (max-width: 900px) {
  .commands-layout {
    grid-template-columns:
      1fr;

    gap:
      var(--space-7);
  }

  .commands-sidebar {
    position:
      static;
  }

  .commands-categories {
    flex-direction:
      row;

    flex-wrap:
      wrap;
  }

  .command-category-button {
    width:
      auto;

    min-height:
      36px;
  }
}

@media (max-width: 680px) {
  .commands-hero {
    padding-top:
      var(--space-10);
  }

  .commands-toolbar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .command-detail-header {
    padding:
      var(--space-5);
  }

  .command-detail-body-inner {
    padding:
      var(--space-5);
  }

  .command-option {
    grid-template-columns:
      1fr;

    gap:
      6px;
  }
}