/*
 * bug.css — Phase 2.6 (#6) REPORT A BUG (user form) + BUG REPORTS (admin triage).
 * Built from the existing OSR system: Stone Wall .panel surfaces, 1px Mortar
 * borders, single accent (var(--color-accent)), Void Red (var(--color-danger))
 * for the one terminal/danger affordance, border-radius:0. No new colors — all
 * tokens reference base.css. Reuses .module-view__title/__tagline, .panel,
 * .field / .field__input / .field__label, .btn / .btn--primary, .admin-table /
 * .admin-row / .admin__list-panel (admin.css), .profile__loading (profile.css).
 */

/* ---- user submit form --------------------------------------------------- */

.bug-report {
  max-width: 720px;
}

.bug-report__head {
  margin-bottom: var(--space-lg);
}

.bug-form__panel {
  padding: var(--space-lg);
}

.bug-form .field {
  margin-bottom: var(--space-md);
}

.bug-form__textarea {
  resize: vertical;
  min-height: 5rem;
  font-family: var(--font-body);
  line-height: 1.5;
}

.field__hint {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: var(--text-sm);
}

.bug-form__error,
.settings__error {
  color: var(--color-damage);
  font-weight: 600;
  margin: 0 0 var(--space-md);
}

.bug-form__error[hidden],
.settings__error[hidden] {
  display: none;
}

.bug-form__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.bug-form__done {
  padding: var(--space-md) 0 0;
}

.bug-form__done-line {
  color: var(--color-accent);
  margin: 0 0 var(--space-md);
}

/* ---- admin: filters + list --------------------------------------------- */

/* Feedback inbox fills the content shell (#app-content caps at 1600px) so the
   table columns — Title, Kind, Type, Section, Reporter, Status, Created — have
   room to breathe instead of squeezing into 980px. The reading-style DETAIL view
   (.bugs-admin.bug-detail) keeps a narrower measure below. */
.bugs-admin {
  max-width: 100%;
}

.bugs-admin.bug-detail {
  max-width: 980px;
}

.bugs-admin__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.bugs-admin__filter {
  flex: 1 1 180px;
  margin: 0;
}

.bugs-row {
  cursor: pointer;
}

.bugs-row:hover,
.bugs-row:focus-visible {
  background: var(--color-surface-hover);
}

.bugs-row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.bugs-row__title {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bugs-row__created {
  white-space: nowrap;
  color: var(--color-text-muted);
}

/* ---- status badge (dot + always-present word; KDL 2026-06-27 §7.1) --------------- */

.bug-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
}

.bug-status__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex-shrink: 0;
}

.bug-status__word {
  font-size: var(--text-sm);
}

/* New/active states accent; resolved/closed/wont_fix dim. Color is supportive
   only — the word is always present. */
.bug-status--new .bug-status__dot,
.bug-status--triaged .bug-status__dot,
.bug-status--in_progress .bug-status__dot {
  background: var(--color-accent);
}

.bug-status--resolved .bug-status__dot {
  background: var(--color-heal);
}

.bug-status--wont_fix .bug-status__dot {
  background: var(--color-danger);
}

.bug-status--closed .bug-status__dot {
  background: var(--color-border);
}

.bug-status--closed .bug-status__word,
.bug-status--wont_fix .bug-status__word {
  color: var(--color-text-muted);
}

/* ---- admin: detail + triage -------------------------------------------- */

.bug-detail__body {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 760px) {
  .bug-detail__body {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

.bug-detail__info,
.bug-detail__triage {
  padding: var(--space-lg);
}

.bug-detail__status-line {
  margin-bottom: var(--space-md);
}

.bug-detail__field {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.bug-detail__field:last-child {
  border-bottom: 0;
}

.bug-detail__field--block {
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}

.bug-detail__label {
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-text-muted);
}

.bug-detail__value {
  color: var(--color-text);
  word-break: break-word;
}

/* Multi-line reporter text (description / steps) preserves line breaks but
   renders as literal text (set via textContent in bug.js). */
.bug-detail__value--pre {
  white-space: pre-wrap;
  font-family: var(--font-body);
}

/* ---- Suggest a Feature (user submit form) -------------------------------
   The FR submit form is a sibling of the bug form and reuses its layout
   primitives (.bug-form__panel/__textarea/__error/__actions/__done are shared).
   These thin aliases give the FR view the same surface + spacing without
   forking the rules. No new colors — single accent + base tokens only. */

.feature-request {
  max-width: 720px;
}

.feature-request__head {
  margin-bottom: var(--space-lg);
}

.feature-form__panel {
  padding: var(--space-lg);
}

.feature-form .field {
  margin-bottom: var(--space-md);
}

.feature-form__textarea {
  resize: vertical;
  min-height: 5rem;
  font-family: var(--font-body);
  line-height: 1.5;
}

/* ---- Feedback inbox: kind chip (bug vs feature request) -----------------
   First-party label, word ALWAYS present (KDL 2026-06-27 §7.1 — never color-only). The
   accent vs muted tone is supportive only; the text carries the meaning. */

.feedback-kind {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.feedback-kind--feature {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.feedback-kind--bug {
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* In the detail status line the kind chip sits beside the status badge. */
.bug-detail__status-line .feedback-kind {
  margin-right: var(--space-sm);
}

/* ---- FR status dot tones (parity with the bug status badge) -------------
   under_review/planned read as "active" (accent); done as resolved (heal);
   declined as danger. The word is always present regardless of color. */
.bug-status--under_review .bug-status__dot,
.bug-status--planned .bug-status__dot {
  background: var(--color-accent);
}

.bug-status--done .bug-status__dot {
  background: var(--color-heal);
}

.bug-status--declined .bug-status__dot {
  background: var(--color-danger);
}

.bug-status--declined .bug-status__word {
  color: var(--color-text-muted);
}