/* Project Hoof — /report/ page. Bug-report ticket form. Reuses the parchment
   shell + field styles from /requests/requests.css; this file only adds the
   section grid, screenshot dropzone and a couple of layout tweaks. */

.report-main {
  position: relative; z-index: 2;
  padding: 88px 24px 64px;
  max-width: 1180px; margin: 0 auto;
}

/* Section picker — 4 across, collapses to 2 on narrow screens. */
.rep-section-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .rep-section-grid { grid-template-columns: repeat(2, 1fr); } }

/* Screenshot dropzone.
   NB: .rep-shot-drop/.rep-shot-preview set an explicit `display`, which would
   otherwise win over the UA `[hidden] { display:none }` rule — so re-assert it
   for the hidden state, else the × button shows with no image attached. */
.rep-shot-drop[hidden], .rep-shot-preview[hidden] { display: none; }
.rep-shot { margin: 4px 0 20px; }
.rep-shot-drop {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: rgba(255,250,235,.45);
  border: 1px dashed rgba(90,60,20,.45);
  border-radius: 10px;
  color: #5b4622;
  cursor: pointer;
  transition: all .15s;
}
.rep-shot-drop:hover {
  border-color: #8a5d1a;
  background: rgba(255,253,242,.8);
}
.rep-shot-drop svg { flex: 0 0 auto; color: #8a5d1a; }
.rep-shot-hint {
  font-family: 'IM Fell English SC', serif;
  font-size: .92rem; letter-spacing: .06em;
}

.rep-shot-preview {
  position: relative;
  display: inline-block;
  margin-top: 4px;
  max-width: 100%;
}
.rep-shot-preview img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  border-radius: 10px;
  border: 1px solid rgba(90,60,20,.4);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.rep-shot-remove {
  position: absolute; top: -10px; right: -10px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #2a1f0d; color: #f2cc6a;
  border: 1px solid #8a5d1a;
  font-size: 1.2rem; line-height: 1;
  cursor: pointer;
}
.rep-shot-remove:hover { background: #45301a; }

/* Disabled submit while the request is in flight. */
.btn-parchment[disabled] { opacity: .6; cursor: progress; }