/* FEEDBACK — the "how can this be better" panel.
 *
 * TOKENS ONLY, no authored colour. Sizes carry !important because
 * instrument.css:343 sets `font-size: var(--t-sm) !important` on
 * `body *:not(svg):not(svg *)`, and an important declaration beats a normal one
 * at any specificity. That rule has already eaten one type scale in this app.
 */

.fb-ov {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /* A REAL BACKDROP, unlike the onboarding card. This one IS modal: it takes
     focus and the board behind it is not meant to be used while it is open, so
     it says so with a scrim instead of claiming aria-modal over a live page. */
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(2px);
}
.fb-box {
  width: min(520px, 100%);
  max-height: 90vh; overflow-y: auto;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 24px 20px;
}
.fb-h {
  margin: 0 0 8px;
  font-size: 19px !important; line-height: 1.3;
  font-weight: 600 !important; color: var(--ink);
  letter-spacing: -0.01em;
}
.fb-p {
  margin: 0 0 18px; max-width: 52ch;
  font-size: 13px !important; line-height: 1.6; color: var(--ink2);
}
.fb-l {
  display: block; margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink3) !important;
}
.fb-l i { font-style: normal; color: var(--ink3); text-transform: none; letter-spacing: 0; }
.fb-t, .fb-i {
  width: 100%; box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 6px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px !important; line-height: 1.5;
  padding: 10px 12px;
  margin-bottom: 16px;
  resize: vertical;
}
.fb-t:focus, .fb-i:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.fb-t::placeholder, .fb-i::placeholder { color: var(--ink3); }
/* The failure line. It states that nothing was saved, so a reader never closes
   the panel believing a note landed when it did not. */
.fb-e {
  margin: -8px 0 14px;
  font-size: 12px !important; line-height: 1.5;
  color: var(--neg) !important;
}
.fb-bar { display: flex; justify-content: flex-end; gap: 10px; }
.fb-go, .fb-x {
  cursor: pointer; border-radius: 999px;
  font-size: 13px !important; font-weight: 600 !important;
  padding: 9px 18px;
  border: 1px solid var(--line2);
  background: transparent; color: var(--ink2);
}
.fb-go { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.fb-go:hover { filter: brightness(1.08); }
.fb-go:disabled { opacity: .6; cursor: default; filter: none; }
.fb-x:hover { color: var(--ink); border-color: var(--ink3); }
.fb-go:focus-visible, .fb-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }