/* ============================================================================
   Shared "Report an issue" feedback widget — used by both atlases.
   Trigger button + modal. Styled to match the dark atlas theme tokens
   (--ink, --parch, --gold, --parch-line, …) defined inline in each atlas.
   ========================================================================== */

/* ---- Trigger button (injected into the sidebar footer) ---- */
.fb-trigger{
  flex:none; width:34px; height:34px; border-radius:9px;
  background:var(--ink-2); border:1px solid var(--parch-line);
  color:var(--parch); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.15s;
}
.fb-trigger:hover{ background:var(--ink-3); border-color:var(--parch-dim); color:var(--gold-soft); }
.fb-trigger svg{ width:17px; height:17px; }
.fb-trigger:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---- Overlay ---- */
.fb-overlay{
  position:fixed; inset:0; z-index:4000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(8,12,20,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.fb-overlay.on{ opacity:1; visibility:visible; }

/* ---- Modal card ---- */
.fb-modal{
  width:min(460px, 100%); max-height:calc(100vh - 40px);
  display:flex; flex-direction:column; overflow:hidden;
  background:rgba(20,29,43,.98); color:var(--parch);
  border:1px solid var(--parch-line); border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  transform:translateY(8px) scale(.98); transition:transform .2s ease;
  font-family:var(--sans);
}
.fb-overlay.on .fb-modal{ transform:none; }

.fb-head{
  flex:none; display:flex; align-items:flex-start; gap:12px;
  padding:18px 18px 12px; border-bottom:1px solid var(--parch-line);
}
.fb-head .fb-mark{
  flex:none; width:34px; height:34px; border-radius:9px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(212,160,23,.14); color:var(--gold); border:1px solid rgba(212,160,23,.3);
}
.fb-head .fb-mark svg{ width:18px; height:18px; }
.fb-head h2{ margin:0; font-family:var(--serif); font-weight:500; font-size:18px; line-height:1.2; color:var(--parch); }
.fb-head p{ margin:3px 0 0; font-size:12.5px; line-height:1.45; color:var(--parch-dim); }
.fb-x{
  margin-left:auto; flex:none; width:30px; height:30px; border-radius:8px;
  background:transparent; border:1px solid transparent; color:var(--parch-dim);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.fb-x:hover{ background:var(--ink-3); color:var(--parch); }
.fb-x svg{ width:16px; height:16px; }

.fb-body{ overflow:auto; padding:16px 18px; }

.fb-field{ margin-bottom:14px; }
.fb-field:last-child{ margin-bottom:0; }
.fb-field label{
  display:block; margin-bottom:6px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--parch-dim);
}
.fb-field label .req{ color:var(--gold); }

.fb-input{
  width:100%; font-family:var(--sans); font-size:14px; color:var(--parch);
  background:var(--ink); border:1px solid var(--parch-line); border-radius:9px;
  padding:9px 11px; transition:border-color .15s, box-shadow .15s;
}
.fb-input::placeholder{ color:var(--parch-dim); opacity:.7; }
.fb-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(212,160,23,.18); }
select.fb-input{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ada391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:34px;
}
textarea.fb-input{ resize:vertical; min-height:96px; line-height:1.5; }

.fb-hint{ margin:5px 0 0; font-size:11px; color:var(--parch-dim); }
.fb-hint.err{ color:#e5847a; }

.fb-context{
  margin-top:2px; font-size:11px; line-height:1.4; color:var(--parch-dim);
  background:var(--ink); border:1px dashed var(--parch-line); border-radius:8px;
  padding:8px 10px;
}
.fb-context b{ color:var(--parch); font-weight:600; }

.fb-foot{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:14px 18px; border-top:1px solid var(--parch-line);
}
.fb-foot .fb-status{ font-size:12px; color:var(--parch-dim); margin-right:auto; }
.fb-foot .fb-status.err{ color:#e5847a; }

.fb-btn{
  font-family:var(--sans); font-size:13px; font-weight:600;
  padding:9px 16px; border-radius:9px; cursor:pointer; border:1px solid transparent;
  transition:.15s;
}
.fb-btn.ghost{ background:transparent; border-color:var(--parch-line); color:var(--parch-dim); }
.fb-btn.ghost:hover{ color:var(--parch); border-color:var(--parch-dim); }
.fb-btn.primary{ background:var(--gold); color:var(--ink); }
.fb-btn.primary:hover{ background:var(--gold-soft); }
.fb-btn:disabled{ opacity:.5; cursor:default; }
.fb-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---- Success state ---- */
.fb-done{ padding:30px 24px; text-align:center; }
.fb-done .fb-tick{
  width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(46,139,87,.16); color:var(--p3); border:1px solid rgba(46,139,87,.4);
}
.fb-done .fb-tick svg{ width:26px; height:26px; }
.fb-done h2{ margin:0 0 6px; font-family:var(--serif); font-weight:500; font-size:19px; color:var(--parch); }
.fb-done p{ margin:0 auto; max-width:30ch; font-size:13px; line-height:1.5; color:var(--parch-dim); }

/* ---- Small screens ---- */
@media (max-width:520px){
  .fb-overlay{ padding:0; align-items:flex-end; }
  .fb-modal{ width:100%; max-height:92vh; border-radius:16px 16px 0 0; }
}

@media (prefers-reduced-motion:reduce){
  .fb-overlay, .fb-modal{ transition:none; }
}