/* In-app feedback widget — RULES.md §11. Palette follows styles.css and
   creative-direction.css; nothing here restyles the explorer itself. */

/* Every element toggled with the `hidden` attribute needs this beside its
   `display` rule: an id selector outranks the UA stylesheet's
   `[hidden]{display:none}`, and MISTAKES.md M-001 is the invisible overlay
   that swallowed every click when this was forgotten. */
#feedbackDialog[hidden],#feedbackResult[hidden]{display:none!important}

/* Bottom-left and bottom-right are both taken on this page: #terrainBadge and
   #sceneTools sit bottom-left, #panel occupies the right 414px. The button goes
   in the free bottom strip just left of the panel. z-index 25 is above the
   header (20) and below #planViewer (30), so the full-screen plan viewer covers
   it like the modal it is — Ctrl+Shift+F still opens the dialog from there. */
#feedbackBtn{position:fixed;z-index:25;bottom:18px;right:426px;
  display:inline-flex;align-items:center;gap:7px;border:0;border-radius:999px;
  padding:10px 15px;background:#18302ce6;color:#e2bd77;
  font:600 11px/1 Inter,system-ui;letter-spacing:.04em;cursor:pointer;
  box-shadow:0 6px 20px rgba(20,41,37,.28);backdrop-filter:blur(6px)}
#feedbackBtn:hover{background:#18302c}
#feedbackBtn:focus-visible{outline:2px solid #e2bd77;outline-offset:2px}
#feedbackBtn span{font-size:13px}

#feedbackDialog{position:fixed;z-index:60;inset:0;display:grid;place-items:center;
  padding:20px;background:rgba(20,41,37,.42);backdrop-filter:blur(3px)}
#feedbackDialog.dragging #feedbackForm{border-color:var(--gold,#c99843);
  box-shadow:0 0 0 3px rgba(201,152,67,.35),0 24px 70px rgba(20,41,37,.35)}

#feedbackForm{width:min(520px,100%);max-height:min(88vh,760px);overflow:auto;
  padding:22px;background:var(--glass,rgba(248,245,237,.97));
  border:1px solid #ffffff88;border-radius:20px;
  box-shadow:0 24px 70px rgba(20,41,37,.35);color:var(--ink,#19302d)}
#feedbackForm h2{margin:0 0 6px;font:22px/1.15 Georgia,serif}
#feedbackForm label{display:block;margin:14px 0 5px;font-size:11px;color:#687875}
#feedbackForm textarea,#feedbackForm select,#feedbackForm input[type=email]{
  width:100%;padding:9px;border:1px solid var(--line,rgba(25,48,45,.16));
  border-radius:8px;background:#fff;color:var(--ink,#19302d);font:inherit;font-size:13px}
#feedbackForm textarea{resize:vertical;min-height:88px;line-height:1.45}
#feedbackForm textarea:focus-visible,#feedbackForm select:focus-visible,
#feedbackForm input:focus-visible{outline:2px solid var(--pine,#173d36);outline-offset:1px}
.fb-hint{margin:0;font-size:11px;color:#7d8b87;line-height:1.45}
.fb-optional{color:#9aa39c}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fb-row label{margin-top:14px}

.fb-attach{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 6px}
.fb-attach button,.fb-file{border:1px solid var(--line,rgba(25,48,45,.16));
  border-radius:999px;padding:8px 13px;background:#fff;color:var(--ink,#19302d);
  font:600 11px/1 Inter,system-ui;cursor:pointer}
.fb-attach button:hover,.fb-file:hover{border-color:var(--pine,#173d36)}
.fb-file{margin:0;display:inline-flex}
.fb-file input{display:none}
.fb-count{font:600 10px/1 Inter,system-ui;letter-spacing:.08em;color:#9aa39c}

.fb-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.fb-thumbs figure{position:relative;margin:0}
.fb-thumbs img{height:62px;width:auto;border-radius:8px;border:1px solid var(--line,rgba(25,48,45,.16));display:block}
.fb-thumbs button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;
  border:0;border-radius:50%;background:#18302c;color:#fff;font-size:12px;line-height:1;cursor:pointer}

.fb-result{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.45;
  background:#fff;border-left:3px solid var(--pine,#173d36)}
.fb-result.ok{border-left-color:#2f7d4f;background:rgba(47,125,79,.1)}
.fb-result.warn{border-left-color:var(--gold,#c99843);background:rgba(201,152,67,.14)}
.fb-result.error{border-left-color:#c43e1d;background:rgba(196,62,29,.1)}
.fb-result a{color:#c43e1d;font-weight:600}

.fb-actions{display:flex;gap:9px;margin-top:18px}
.fb-actions button{flex:1;border:0;border-radius:12px;padding:12px;
  background:var(--pine,#173d36);color:#fff;font-weight:750;cursor:pointer}
.fb-actions .secondary{border:1px solid var(--line,rgba(25,48,45,.16));background:#fff;color:var(--ink,#19302d)}
.fb-actions button[disabled]{opacity:.55;cursor:progress}

@media (max-width:720px){
  /* The panel is a bottom sheet on mobile and #sceneTools moves to the top
     left, so the button moves to the top right, clear of both. */
  #feedbackBtn{right:12px;bottom:auto;top:124px;
    padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top))}
  #feedbackForm{padding:18px;max-height:92vh}
  .fb-row{grid-template-columns:1fr}
}

@media print{#feedbackRoot{display:none!important}}
@media (prefers-reduced-motion:reduce){#feedbackBtn,#feedbackForm{transition:none}}