/* Feedback modal — the in-app route from a tester to 42 Digital (Sep 2026).
 *
 * Borrows the #confirm-modal idiom wholesale (fixed overlay, centred card,
 * .open toggles display) rather than introducing a third modal shape. Colour
 * budget: none. The only accent is the primary button, which the button visual
 * code already assigns to teal — DESIGN.md §1, 80/20.
 */

#feedback-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  /* Above every surface the button is reachable from: the drill overlay
     (1100), the toast (1200) and the glossary drawer (2500) — the nav button
     works while any of them is open, so the dialog must not open behind one.
     Below the skip link (4000), which outranks everything by design. */
  z-index: 2600;
  display: none;
  align-items: center;
  justify-content: center;
}
#feedback-modal.open { display: flex; }

.fb-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  width: 560px;
  max-width: calc(100vw - var(--sp-6));
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  font-family: 'Figtree', sans-serif;
}

.fb-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--navy);
}

.fb-lede {
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: var(--lh-ui);
  margin-top: var(--sp-2);
}

.fb-field { margin-top: var(--sp-4); }

.fb-field label {
  display: block;
  margin-bottom: var(--sp-1);
}

#fb-message {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  padding: var(--sp-3);
  border: 1px solid var(--grey);
  border-radius: 5px;
  font-family: 'Figtree', sans-serif;
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: #333;
}
#fb-message:focus { border-color: var(--teal-ink); }

/* Where the note came from, and how much room is left: both facts the writer
   should not have to guess at. One line, micro type, no colour. */
.fb-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--ink-2);
}
.fb-meta .fb-count { font-family: 'DM Mono', monospace; font-weight: 500; }

/* The result of sending, IN the card. A toast behind an open modal reads as
   "the button does nothing" (QA, 12 Aug 2026) — so this never uses one. */
.fb-result {
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  padding: var(--sp-3);
  border-radius: 5px;
  background: var(--mist);
  border: 1px solid var(--line);
  color: #333;
}
.fb-result.fb-bad {
  border-color: var(--red);
  color: var(--red);
  background: #fff;
}

.fb-btns {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* The measurement disclosure. It sits under the buttons because it is a
   standing fact about the beta, not part of the task — but it is on the one
   surface where a tester is already thinking about what we collect
   (PRODUCT.md principle 3, honest surfaces). */
.fb-privacy {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-2xs);
  color: var(--ink-2);
  line-height: var(--lh-ui);
}