/**
 * agentsclub V2 - /zglos-blad ("Zgłoś błąd" form)
 * Requires tokens.css + base.css + layout.css (.wrap, .panel, .btn).
 *
 * .bugform sets the field idiom for "write us something" forms in the app
 * (input shape, 12px radius, accent focus ring); settings.css follows it.
 */

.bug-wrap .head{padding:64px 0 8px}
.bug-wrap .head .lead{
  font-size:18px;line-height:1.55;color:var(--sub);
  max-width:60ch;margin-top:12px;text-wrap:pretty;
}

kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:var(--bg);border:1px solid var(--hair);border-bottom-width:2px;
  border-radius:6px;padding:1px 6px;color:var(--ink);
}

/* ---------- form ---------- */
.bugform{display:flex;flex-direction:column;gap:12px;max-width:660px}
.bugform label{font-size:13px;font-weight:600;color:var(--sub);margin-top:10px}
.bugform label:first-of-type{margin-top:0}
.bugform label .opt{font-weight:400}
.bugform textarea,.bugform .bug-email{
  font:inherit;font-size:var(--fs-body);color:var(--ink);
  background:var(--bg);border:1px solid var(--hair);border-radius:12px;
  padding:13px 16px;
  transition:border-color .15s ease-out,box-shadow .15s ease-out,background-color .2s ease-out;
}
.bugform textarea{min-height:150px;resize:vertical;line-height:1.55}
.bugform .bug-email{max-width:340px}
.bugform textarea:focus,.bugform .bug-email:focus{
  outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent);
}
.bugform .btn{align-self:flex-start;margin-top:14px}
.bugform .btn[disabled]{opacity:.6;cursor:default}

.bug-from{font-size:var(--fs-small);color:var(--sub)}
.bug-from code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--bg);border-radius:6px;padding:2px 7px;color:var(--ink);
}
.bug-hint{font-size:12px;color:var(--sub);margin-top:-6px;font-variant-numeric:tabular-nums}
.bug-hint.over{color:var(--acc);font-weight:600}

/* Honeypot - off-screen rather than display:none, which some bots skip. */
.bug-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- drop zone ---------- */
.bug-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:28px 20px;text-align:center;cursor:pointer;
  background:var(--bg);border:1.5px dashed var(--hair);border-radius:16px;
  transition:border-color .15s ease-out,background-color .15s ease-out;
}
.bug-drop svg{width:26px;height:26px;color:var(--sub);margin-bottom:2px}
.bug-drop-main{font-size:var(--fs-small);color:var(--ink)}
.bug-drop-sub{font-size:12px;color:var(--sub)}
.bug-drop-link{color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){.bug-drop:hover{border-color:var(--acc)}}
.bug-drop:focus-visible{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}
.bug-drop.dragover{
  border-color:var(--acc);border-style:solid;
  background:color-mix(in srgb,var(--acc) 7%,var(--bg));
}

/* ---------- thumbnails ---------- */
.bug-thumbs{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.bug-thumbs:empty{display:none}
.bug-thumb{
  position:relative;width:132px;
  background:var(--bg);border:1px solid var(--hair);border-radius:12px;
  padding:8px;
}
.bug-thumb img{
  display:block;width:100%;height:84px;object-fit:cover;
  border-radius:8px;background:var(--panel);
}
.bug-thumb .name{
  display:block;margin-top:6px;font-size:11px;color:var(--sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bug-thumb .rm{
  position:absolute;top:-8px;right:-8px;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--hair);border-radius:999px;
  font-size:15px;line-height:1;cursor:pointer;
  transition:background-color .15s ease-out,color .15s ease-out;
}
@media(hover:hover){.bug-thumb .rm:hover{background:var(--acc);color:#fff;border-color:var(--acc)}}

/* ---------- messages ---------- */
.field-msg{font-size:var(--fs-small);line-height:1.5;margin-top:4px}
.field-msg-error{color:var(--acc);font-weight:600}

.bug-sent{
  display:none;align-items:flex-start;gap:10px;flex-wrap:wrap;
  max-width:660px;font-size:var(--fs-body);
}
.bug-sent.show{display:flex}
.bug-sent b{color:var(--acc);font-weight:700}
.bug-sent span{flex:1 1 320px}
.bug-sent .btn{flex:none;margin-top:8px}
/* Same borrowed "secondary button" treatment as auth.css - .btn-ghost isn't
   in the V2 base sheet and auth.css isn't loaded on this page. */
.btn-ghost{background:var(--bg);color:var(--ink);border:1px solid var(--hair)}
@media(hover:hover){.btn-ghost:hover{background:color-mix(in srgb,var(--ink) 4%,var(--bg))}}

@media(max-width:720px){
  .bug-wrap .head{padding:44px 0 8px}
  .panel{padding:24px 20px}
  .bug-thumb{width:calc(50% - 6px)}
}

/* W powłoce aplikacji (#99): nagłówek jest nagłówkiem kolumny, więc zdanie
   wprowadzające stoi samo nad formularzem. */
.bug-app .bug-lead{color:var(--sub);max-width:60ch;margin:0 0 18px;line-height:1.55;text-wrap:pretty}