/* ============================================================================
   GitHubDB · css/extras.css — ADVISORIES / MARKDOWN-TOOL / GITIGNORE / CONDUCT
   ----------------------------------------------------------------------------
   Zuständig für die Zusatzseiten (js/extras.js: Security Advisories,
   Markdown-Vorschau, .gitignore-Vorlagen, Codes of Conduct).
   EIGENE COMPONENT-CLASSES (hier erweitern):
     .advisory-eco, .advisory-cve, .advisory-meta   (Security-Liste)
     .md-tool, .md-pane, .md-input, .md-preview     (Markdown-Split-Pane)
     .template-panel, .template-grid, .gi-card, .gi-card-dot,
     .gi-detail-head, .gi-actions, .gi-copied, .gi-body (gitignore)
     .conduct-grid, .conduct-card, .conduct-head    (Codes of Conduct)
   Tabellen-/Status-/Panel-Gerüste liegen in base.css & views.css —
   nicht duplizieren (Advisories nutzen .table-wrap/.repo-table,
   Schweregrad-Badges die .badge-*-Modifier aus base.css).
   Alle Werte aus css/tokens.css.
   ========================================================================== */

/* ---------- Security Advisories ---------- */

/* GHSA-ID + Paket als Mono-Meta-Zeile unter dem Summary */
.advisory-meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Ökosystem-Chip (neutral, Hairline) */
.advisory-eco {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 9px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  white-space: nowrap;
}

/* CVE-ID mono, ohne das generische code-Chroming */
.advisory-cve {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--text-2);
  white-space: nowrap;
}
.advisory-cve code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ---------- Markdown-Tool (Split-Pane) ---------- */
.md-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
  align-items: stretch;
}
@media (max-width: 860px) { .md-tool { grid-template-columns: 1fr; } }

.md-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.md-pane .field-label { margin-bottom: 0; }

.md-input {
  width: 100%;
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  resize: vertical;
  min-height: 360px;
}
.md-preview {
  margin: 0;
  min-height: 360px;
  max-height: 720px;
  overflow-y: auto;
}

/* ---------- .gitignore-Vorlagen ---------- */
.template-panel { min-height: 180px; }

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}

.gi-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: border-color var(--transition-fast) var(--ease-out),
              background-color var(--transition-fast) var(--ease-out),
              color var(--transition-fast) var(--ease-out);
}
.gi-card:hover {
  border-color: var(--accent-border);
  background: var(--surface-2);
  color: var(--text-1);
}
.gi-card:active { transform: translateY(1px); }
.gi-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.gi-card-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast) var(--ease-out);
}
.gi-card:hover .gi-card-dot,
.gi-card:focus-visible .gi-card-dot { opacity: 1; }

.gi-detail-head h2 { margin-bottom: 0; font-size: var(--text-md); }
.gi-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.gi-copied {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--success);
}
.gi-copied:empty { display: none; }
.gi-body { margin-top: 0; }
.gi-body:focus-visible { outline-offset: -2px; }

/* ---------- Codes of Conduct ---------- */
.conduct-grid { margin-top: var(--space-4); align-items: start; }
.conduct-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.conduct-card h2 { margin-bottom: 0; font-size: var(--text-md); }
.conduct-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.conduct-head .btn { flex-shrink: 0; }
.conduct-card details { margin-top: var(--space-1); }
.conduct-card summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-2);
  transition: color var(--transition-fast) var(--ease-out);
}
.conduct-card summary:hover { color: var(--text-1); }
.conduct-card .license-body { margin-top: var(--space-2); }