/**
 * Security pages — overlay on theme.css. Uses same nav, container, guide-* from theme.
 * Only adds: callout cards, doc grid, safety banner, code panel, meta panel.
 * No body/nav overrides; theme.css provides background, pill nav, typography.
 */

/* Inline links in guide content: use theme accent (no default blue/purple) */
.guide-page .guide-list a,
.guide-page .guide-intro a {
  color: var(--accent);
  text-decoration: none;
}
.guide-page .guide-list a:hover,
.guide-page .guide-intro a:hover {
  text-decoration: underline;
}

/* ─── Callout row: two cards side-by-side on desktop ─── */
.sec-callout-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
  .sec-callout-row {
    grid-template-columns: 1fr;
  }
}

.sec-callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}

.sec-callout--success {
  background: var(--success-muted, rgba(74, 222, 128, 0.12));
  border-color: var(--success, #4ade80);
}

.sec-callout--warning {
  background: var(--warning-muted, rgba(251, 191, 36, 0.12));
  border-color: var(--warning, #fbbf24);
}

.sec-callout .guide-list {
  margin-bottom: 0;
}

.sec-callout .guide-section-title {
  margin-top: 0;
}

/* ─── Stepper: ordered list in review workflow ─── */
.sec-stepper {
  margin-top: 0.5rem;
}

.sec-stepper li {
  margin-bottom: 0.5rem;
}

/* ─── Doc grid: card-style links (theme .guide-list links stay; these are extra) ─── */
.sec-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.sec-doc-card {
  display: block;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.sec-doc-card:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
  color: var(--accent-hover);
  text-decoration: none;
}

/* ─── Safety banner ─── */
.sec-safety-banner {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sec-safety-banner strong {
  color: var(--text);
}

/* ─── Evidence page: meta panel (run_date, git_commit, etc.) ─── */
.sec-meta-panel {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.875rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-top: 0.5rem;
}

.sec-meta-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.sec-meta-row:last-child {
  margin-bottom: 0;
}

.sec-meta-key {
  color: var(--text-muted);
  min-width: 6rem;
}

/* ─── Code panel ─── */
.sec-code-panel {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.875rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-top: 0.5rem;
  overflow-x: auto;
}

.sec-code-panel code {
  color: var(--text);
}