.guides-section-tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0 24px;
  border-bottom: 1px solid var(--border);
}
.guides-section-tab {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 4px;
  margin-right: 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.guides-section-tab:hover:not(:disabled) { color: var(--text); }
.guides-section-tab.is-active { color: var(--text); border-bottom-color: var(--accent-strong); }
.guides-section-tab:disabled { opacity: 0.4; cursor: not-allowed; }

.guides-search {
  width: 100%;
  max-width: 360px;
  margin-bottom: 14px;
}

.guides-table-wrap {
  max-height: 68vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Таблицам нужно больше места, чем обычному тексту — расширяем блок за пределы
   стандартной ширины страницы, центрируя его относительно окна браузера (только на
   широких экранах — на мобильных это только мешало бы). */
@media (min-width: 900px) {
  .guides-wide {
    width: 100vw;
    max-width: 1720px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

.guides-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  white-space: nowrap;
}
.guides-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-inset);
  text-align: left;
  padding: 8px 9px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.guides-table thead th.is-sortable {
  cursor: pointer;
  user-select: none;
}
.guides-table thead th.is-sortable:hover { color: var(--text); }
.guides-table thead th.is-sortable::after {
  content: '';
  display: inline-block;
  width: 0.7em;
  margin-left: 3px;
  opacity: 0.4;
}
.guides-table thead th.sort-asc::after { content: '\2191'; opacity: 1; color: var(--accent-strong); }
.guides-table thead th.sort-desc::after { content: '\2193'; opacity: 1; color: var(--accent-strong); }
.guides-table tbody td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.guides-table tbody tr:last-child td { border-bottom: none; }
.guides-table tbody tr:hover { background: rgba(var(--accent-strong-rgb), 0.06); }
.guides-table td.guides-name { font-weight: 600; color: var(--text); white-space: normal; }

.guides-hint {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--text-dim);
}