/*
 * faq.css — FAQ-specific styles.
 *
 * Chrome, utility patterns, and base typography come from infodancer/ui
 * (tokens.css + base.css), which faq mounts at /static/ui/ and loads
 * before this file in templates/base.gohtml. This sheet carries only the
 * widgets that are genuinely FAQ-shaped: questions, answers, semantic
 * badge variants.
 *
 * Themable surface (see DESIGN.md §9.3):
 *
 *   Site-wide: override --app-* at :root.
 *
 *   FAQ-scoped: override --app-* on .faq, e.g.
 *     .faq { --app-color-accent: #c44; }
 *
 *   Structural: replace templates/partials/{nav,footer}.gohtml via
 *   faq.Config.Templates.
 */

.faq {
  --faq-badge-archived-bg: #fef3c7;
  --faq-badge-archived-fg: #92400e;
  --faq-badge-accepted-bg: #d1fae5;
  --faq-badge-accepted-fg: #065f46;
}

/* ----- question list ----- */

.faq-q-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--app-space-sm);
}

/* Composes with .app-card from infodancer/ui: <article class="app-card faq-q-card"> */
.faq-q-card {
  display: grid;
  grid-template-columns: minmax(5rem, auto) 1fr;
  gap: var(--app-space);
}

.faq-q-stats {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-xs);
  align-items: end;
  color: var(--app-color-fg-muted);
  font-size: 0.9rem;
}
.faq-q-stats small { font-size: 0.75rem; display: block; }

.faq-q-title {
  margin: 0 0 var(--app-space-sm);
  font-size: 1.1rem;
  line-height: 1.3;
  font-family: var(--app-font-display);
}
.faq-q-title a { color: var(--app-color-fg); }

.faq-q-excerpt {
  margin: 0 0 var(--app-space-sm);
  color: var(--app-color-fg-muted);
  font-size: 0.95rem;
}

.faq-q-attribution {
  margin: var(--app-space-sm) 0 0;
  font-size: 0.8rem;
  color: var(--app-color-fg-muted);
}

/* ----- question detail ----- */

.faq-q-header {
  border-bottom: 1px solid var(--app-color-border);
  padding-bottom: var(--app-space-sm);
  margin-bottom: var(--app-space);
}
.faq-q-meta { color: var(--app-color-fg-muted); font-size: 0.9rem; margin: 0; }

.faq-q-body {
  line-height: 1.65;
  color: var(--app-color-prose-fg);
}
.faq-q-body pre {
  background: var(--app-color-bg-raised);
  padding: var(--app-space-sm);
  border-radius: var(--app-radius);
  overflow-x: auto;
}

/* ----- answers ----- */

.faq-answers { margin-top: var(--app-space-lg); }
.faq-answer-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--app-space);
}
.faq-answer {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--app-space);
  padding: var(--app-space);
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius);
}
.faq-answer.is-accepted { border-color: var(--app-color-success); }
.faq-answer-stats { color: var(--app-color-fg-muted); font-size: 0.9rem; }
.faq-answer-meta { color: var(--app-color-fg-muted); font-size: 0.85rem; margin-top: var(--app-space-sm); }

/* ----- FAQ-specific badge variants (compose on top of .app-badge) ----- */

.faq-badge-archived { background: var(--faq-badge-archived-bg); color: var(--faq-badge-archived-fg); }
.faq-badge-accepted { background: var(--faq-badge-accepted-bg); color: var(--faq-badge-accepted-fg); }

/* ----- interactive controls (votes, accept, answer form) ----- */

.faq-answer-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--app-space-xs);
}

.faq-vote-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--app-space-xs);
}
.faq-vote-up,
.faq-vote-down,
.faq-vote-clear,
.faq-accept-btn {
  background: none;
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius);
  color: var(--app-color-fg-muted);
  cursor: pointer;
  line-height: 1;
  padding: var(--app-space-xs) var(--app-space-sm);
}
.faq-vote-up:hover,
.faq-vote-down:hover,
.faq-vote-clear:hover { color: var(--app-color-fg); border-color: var(--app-color-accent, #c44); }
.faq-vote-up.is-active { color: var(--app-color-success); border-color: var(--app-color-success); }
.faq-vote-down.is-active { color: var(--app-color-danger, #c0392b); border-color: var(--app-color-danger, #c0392b); }
.faq-vote-score { font-weight: 600; color: var(--app-color-fg); }
.faq-vote-clear { font-size: 0.75rem; }

.faq-accept-btn { font-size: 0.8rem; }
.faq-accept-btn:hover,
.faq-accept-btn.is-accepted { color: var(--app-color-success); border-color: var(--app-color-success); }

.faq-form-answer {
  margin-top: var(--app-space-lg);
  display: grid;
  gap: var(--app-space-sm);
}
.faq-form-answer textarea {
  width: 100%;
  font: inherit;
  padding: var(--app-space-sm);
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius);
}

.faq-signin-prompt {
  margin-top: var(--app-space-lg);
  color: var(--app-color-fg-muted);
}

/* ----- action bars + author controls ----- */

/* Question Edit/Lock/Delete sit in one horizontal row. */
.faq-mod-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-space-sm);
  margin-top: var(--app-space);
}
.faq-mod-bar form { margin: 0; }

/* The answer body, footer, and comments share the wide column. */
.faq-answer-main { min-width: 0; }

/* Author/admin actions in the answer footer: text-style buttons inline with
   the "answered by …" line. */
.faq-answer-actions {
  display: inline-flex;
  gap: var(--app-space-sm);
  margin-left: var(--app-space-sm);
}
.faq-answer-actions form { display: inline; margin: 0; }
.faq-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--app-color-accent, #c44);
  cursor: pointer;
  text-decoration: underline;
}
.faq-link-danger { color: var(--app-color-danger, #c0392b); }

/* A soft-deleted answer (admins only) renders muted. */
.faq-answer.is-deleted { opacity: 0.6; border-style: dashed; }
.faq-deleted-note { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }