/* The report dialog, shared by the landing page and the app (WB9).
   ------------------------------------------------------------------
   In `public/` and linked by both entry documents rather than imported into
   the React tree, for two reasons: the landing page loads no bundle at all,
   and the app's own source is mid-flight in another session — a shared file
   here needs no edit in src/ to reach both.

   Literals, not themed tokens, matching landing.css: the dialog appears over
   the fixed navy field on one page and the green field on the other, and it
   should read the same on both.

   The TRIGGER's styling is not here. It differs per page — a centred line at
   the foot of the landing field, a fading corner link inside the app — and
   each one is styled where it lives. */

.bug-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 20, 27, 0.66);
}

.bug-modal section {
  width: min(440px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #123445;
  border: 1px solid #23566d;
  border-radius: 16px;
  padding: 18px 20px 20px;
  text-align: left;
  font: 400 14px/1.5 ui-sans-serif, -apple-system, 'Segoe UI', Inter, system-ui, sans-serif;
  color: #eaf3f7;
}

.bug-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bug-modal h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #eaf3f7;
}

.bug-modal .bug-x {
  border: none;
  background: none;
  color: #7fa2b5;
  font-size: 24px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}
.bug-modal .bug-x:hover {
  color: #eaf3f7;
}

.bug-note {
  margin: 8px 0 14px;
  color: #a8c3d1;
  font-size: 13px;
}

.bug-modal label {
  display: block;
  margin-bottom: 12px;
  color: #eaf3f7;
  font-size: 12px;
  font-weight: 600;
}
.bug-modal label span {
  color: #a8c3d1;
  font-weight: 400;
}

.bug-modal textarea,
.bug-modal input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  background: #0d2836;
  color: #eaf3f7;
  border: 1px solid #23566d;
  border-radius: 10px;
  font: 400 14px/1.5 ui-sans-serif, -apple-system, 'Segoe UI', Inter, system-ui, sans-serif;
}
.bug-modal textarea:focus,
.bug-modal input:focus {
  outline: 2px solid var(--bud-500);
  outline-offset: 0;
}
.bug-modal textarea {
  resize: vertical;
  min-height: 100px;
}

/* Off-screen rather than display:none — a bot that skips hidden fields would
   walk straight past a honeypot it cannot see. */
.bug-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bug-error {
  margin: 0 0 10px;
  color: #ffb4a2;
  font-size: 13px;
}
.bug-error:empty {
  display: none;
}

.bug-modal .bug-form footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.bug-modal .bug-form footer button,
.bug-sent button {
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #a8c3d1;
  font: 600 13px/1 ui-sans-serif, -apple-system, 'Segoe UI', Inter, system-ui, sans-serif;
  cursor: pointer;
}

/* The send button is the primary door's treatment: bud green with the navy
   ink on it, which is this site's one filled control. */
.bug-modal .bug-form footer .bug-send,
.bug-sent button {
  background: var(--bud-500);
  color: #0d2836;
}
.bug-modal .bug-form footer .bug-send:disabled {
  opacity: 0.45;
  cursor: default;
}

.bug-sent b {
  display: block;
  margin: 14px 0 6px;
  color: #eaf3f7;
  font-size: 15px;
}
.bug-sent p {
  margin: 0 0 16px;
  color: #a8c3d1;
  font-size: 13px;
}