/* "Report a problem" on the contact page. Launchkit's report flow ships no
   styles, so its plain elements are dressed here by their ids, in the colours
   and touch sizes of legal.css. `scripts/build_reporter.mjs` publishes this
   file as /report.css. The control stays hidden until the flow has mounted;
   nothing here gives it a display value, so its `hidden` attribute holds. */
#report-problem,
#launchkit-report-receipts button,
#launchkit-report-dialog button {
  font: inherit;
  color: #76e4ee;
  background: none;
  border: 1px solid #39425c;
  border-radius: 6px;
  min-height: 44px;
  padding: .4rem 1rem;
  cursor: pointer;
}
#report-problem:hover,
#launchkit-report-receipts button:hover,
#launchkit-report-dialog button:hover { color: white; border-color: #76e4ee; }
#report-problem:focus-visible,
#launchkit-report-receipts button:focus-visible,
#launchkit-report-dialog :focus-visible { outline: 2px solid #76e4ee; outline-offset: 3px; }
#launchkit-report-status:empty { display: none; }
#launchkit-report-status { color: #b2bdd2; }
/* A receipt row is the flow's state text followed by its buttons, all inline in
   one <p>. As a wrapping flex row with a full-width break ordered between them,
   the text keeps its own line and the buttons sit together beneath it, never
   against the receipt id. */
#launchkit-report-receipts p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .5rem;
  overflow-wrap: anywhere;
}
#launchkit-report-receipts p::after { content: ""; flex-basis: 100%; order: 1; }
#launchkit-report-receipts button { order: 2; margin: .5rem 0 0; }

#launchkit-report-dialog {
  width: min(calc(100% - 2rem), 64ch);
  max-height: calc(100% - 2rem);
  overflow: auto;
  padding: 1.5rem;
  color: #e8edf7;
  background: #0b0e1b;
  border: 1px solid #39425c;
  border-radius: 8px;
}
#launchkit-report-dialog::backdrop { background: rgb(0 0 0 / .72); }
#launchkit-report-dialog h2 { margin: 0 0 .75rem; }
#launchkit-report-dialog p { margin: 0 0 .75rem; }
#launchkit-report-dialog label { display: block; margin: 1rem 0 .35rem; font-weight: 600; }
#launchkit-report-note,
#launchkit-report-contact {
  display: block;
  width: 100%;
  font: inherit;
  color: #e8edf7;
  background: #131a33;
  border: 1px solid #39425c;
  border-radius: 6px;
  padding: .6rem .75rem;
}
#launchkit-report-note { min-height: 5rem; resize: vertical; }
#launchkit-report-preview {
  max-height: 12rem;
  overflow: auto;
  margin: .75rem 0 1rem;
  padding: .75rem;
  font-size: .85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #131a33;
  border: 1px solid #39425c;
  border-radius: 6px;
}
#launchkit-report-dialog button { margin: 0 .5rem .5rem 0; }
#launchkit-report-dialog #launchkit-report-send { color: #0b0e1b; background: #76e4ee; border-color: #76e4ee; font-weight: 700; }
#launchkit-report-dialog button:disabled { opacity: .45; cursor: default; }