/* Reusable component classes — app-agnostic, shared by patterns/landing.css and
   patterns/kb-article.css. Requires tokens/tokens.css and tokens/core.css loaded first.

   Naming: unprefixed (.btn, .badge, .card, .callout, .tabs) — these are the shared vocabulary.
   Page-pattern-specific classes live in patterns/*.css with an `lp-`/`kb-` prefix instead. */

.wrap {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.btn-sm {
  min-height: 36px;
  padding: 0 var(--space-4);
  font-size: var(--font-sm);
}

.btn:hover {
  background: var(--control-hover);
  border-color: var(--border-strong);
}

.btn-primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-color);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-ghost:hover {
  background: var(--bg-panel-soft);
  border-color: var(--border-strong);
}

/* ---- Badges / pills ---- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 22px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg-panel-soft);
  color: var(--text-muted);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.badge-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }

/* ---- Cards ---- */

.card {
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-panel);
}

.card-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-soft);
}

/* ---- Callouts (info/warning banners — prose asides, product notices) ---- */

.callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
}

.callout-warning { border-left-color: var(--warning); }
.callout-danger { border-left-color: var(--danger); }

.callout-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--accent-hover);
}

.callout-icon svg {
  width: 20px;
  height: 20px;
}

.callout-warning .callout-icon { color: var(--warning); }
.callout-danger .callout-icon { color: var(--danger); }

.callout p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: var(--leading-normal);
}

.callout p strong {
  color: var(--text-primary);
}

/* ---- Nav / tabs (shared chrome primitives) ---- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 2px solid var(--border-subtle);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: -2px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}

.tab:hover { color: var(--text-secondary); }

.tab.is-active,
.tab[aria-current="page"] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

/* ---- Forms (marketing-context: newsletter/contact, not dashboard density) ---- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text-primary);
  font: inherit;
  transition: border-color var(--transition);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
  outline: none;
}

/* ---- Simple data table (specs, comparisons) ---- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}

.table thead th {
  color: var(--text-muted);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.table td {
  color: var(--text-secondary);
}


/* Подпись строки — заголовок, а не ячейка. Без `th[scope="row"]` диктор
   читает середину таблицы без привязки: «Yes» — да к чему? Правило
   повторяет приём, уже принятый на главной у `.rt-table`, чтобы у сайта
   был один образец, а не два. Найдено Lighthouse: `td-has-header`. */
.table th[scope="row"] {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---- Alerts (page-level notices — distinct from inline .callout) ---- */

.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-panel-soft);
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.alert-success { background: var(--success-soft); color: var(--success); }
.alert-warning { background: var(--warning-soft); color: var(--warning); }
.alert-danger { background: var(--danger-soft); color: var(--danger); }

/* ---- Button danger / disabled / busy ---- */

.btn-danger {
  border-color: transparent;
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 88%, #000);
}

.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.is-busy {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: var(--text-primary);
  border-radius: 50%;
  animation: kit-spin 0.7s linear infinite;
}

.btn-primary.is-busy::after,
.btn-danger.is-busy::after {
  border-color: color-mix(in srgb, #fff 30%, transparent);
  border-top-color: #fff;
}

@keyframes kit-spin {
  to { transform: rotate(360deg); }
}

/* ---- Icon buttons ---- */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon-btn:hover {
  background: var(--control-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.icon-btn-sm {
  width: 36px;
  height: 36px;
}

.icon-btn-sm svg {
  width: 16px;
  height: 16px;
}

.icon-btn:disabled,
.icon-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Form extras ---- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-xs);
  line-height: var(--leading-normal);
}

.field-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--font-xs);
  line-height: var(--leading-normal);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--danger);
}

.form-feedback {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-panel-soft);
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.form-feedback-error {
  background: var(--danger-soft);
  color: var(--danger);
}

.form-feedback-success {
  background: var(--success-soft);
  color: var(--success);
}

/* ---- Code block (shared; .kb-code-block is alias) ---- */

.code-block,
.kb-code-block {
  position: relative;
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-panel-soft);
  overflow-x: auto;
}

.code-block pre,
.kb-code-block pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  white-space: pre;
}

.code-block .tok-comment,
.kb-code-block .tok-comment { color: var(--text-muted); }

.code-block .tok-key,
.kb-code-block .tok-key { color: var(--accent-hover); }

.code-block-copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

/* ---- FAQ (shared; .lp-faq* aliases) ---- */

.faq,
.lp-faq {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item,
.lp-faq-item {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-5) 0;
}

.faq-item summary,
.lp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  font-size: var(--font-md);
  font-weight: var(--weight-medium);
  list-style: none;
  color: var(--text-primary);
}

.faq-item summary::-webkit-details-marker,
.lp-faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after,
.lp-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: var(--font-lg);
  font-weight: var(--weight-regular);
}

.faq-item[open] summary::after,
.lp-faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p,
.lp-faq-item p {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: var(--leading-normal);
}

/* ---- Breadcrumbs (shared; .kb-breadcrumbs alias) ---- */

.breadcrumbs,
.kb-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) 0 0;
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.breadcrumbs a,
.kb-breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover,
.kb-breadcrumbs a:hover {
  color: var(--text-secondary);
}

.breadcrumbs [aria-current="page"],
.kb-breadcrumbs [aria-current="page"] {
  color: var(--text-secondary);
}

.breadcrumbs .sep,
.kb-breadcrumbs .sep {
  color: var(--text-muted);
  user-select: none;
}

/* ---- Marketing nav cards ---- */

.nav-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-panel);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition), background-color var(--transition);
}

a.nav-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-panel-soft);
}

.nav-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.nav-card-icon svg {
  width: 22px;
  height: 22px;
}

.nav-card-body {
  flex: 1;
  min-width: 0;
}

.nav-card-body h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
}

.nav-card-body p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: var(--leading-normal);
}

.nav-card-chevron {
  flex-shrink: 0;
  align-self: center;
  color: var(--text-muted);
}

.nav-card-chevron svg {
  width: 18px;
  height: 18px;
}

.nav-card-grid {
  display: grid;
  /* `auto-fit`, а НЕ `auto-fill`: второй оставляет пустые треки, и раздел
     с одной карточкой показывает её в половине рельса, а вторая половина
     пустует — читается как недоделанный. Так выглядит `/tools/`: карточка
     одна, а треков два. При четырёх и шести карточках поведение не
     меняется. B-57, починено в комплекте 2026-08-27; сюда правка сама не
     доезжает — `build.py` копию CSS в репозитории не трогает. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

/* ---- CSS tooltip ---- */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: var(--z-dropdown);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--bg);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}

/* ---- Iso sprite face colors (for schemas) ---- */

.iso-top { fill: color-mix(in srgb, currentColor 20%, transparent); }
.iso-left { fill: color-mix(in srgb, currentColor 12%, transparent); }
.iso-right { fill: color-mix(in srgb, currentColor 8%, transparent); }
.iso-line,
.iso-line-strong {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}
.iso-line-strong { stroke-width: 1.5; }
.iso-glyph { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.icon-stroke {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}