/* bug-report.css — the "Report a bug" window's own rules (CLAUDE/BUG-REPORTS.md).
   Its OWN file, not a base.css section, so a page shell that loads none of
   base.css can still open the window with its full context capture:

       <?= BugReporting::shellHeadHtml(Csp::nonceAttr()) ?>   (in <head>: collector + this file)
       <button type="button"<?= BugReporting::openAttributes() ?>>Report a bug</button>

   The framework layout links it on every page, right after base.css and
   table-scroll.css. Everything here is scoped to the window's own classes
   (plus the triage page's `.bug-detail pre`, which shares the details rule),
   so it restyles nothing else on a page that skips base.css. What the window
   takes from the page instead: the generic `.modal` / `.modal-backdrop` /
   `.modal-box` / `.modal-header` / `.modal-scroll` / `.modal-close` chrome,
   `.btn` / `.btn-sm`, and the framework Form styles. Every custom property
   below carries its fallback, so none depends on a base.css token. */

/* Wider than a plain .modal-box (the same width .modal-box--wide gives it
   on the framework layout), for a shell that has no --wide variant. */
.bug-report-modal-box { width: min(85vw, 1000px); max-width: calc(100vw - 32px); }

.bug-report-modal { z-index: var(--bspkfw-z-modal-nested, 110); }
.bug-report-intro { margin: 0 0 12px; color: var(--bspkfw-field-muted, #5f6774); }

.bug-shots-drop {
    border: 1px dashed var(--bspkfw-field-border, #d1d5db);
    border-radius: var(--bspkfw-field-radius, 6px);
    padding: 10px;
}
.bug-shots-drop.is-dragover {
    border-color: var(--bspkfw-field-accent, #2563eb);
    background: var(--bspkfw-field-accent-soft, #eff6ff);
}
.bug-shots-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.bug-shots-list:not(:empty) { margin-bottom: 10px; }
.bug-shots-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.bug-shots-item img {
    width: 140px;
    height: 96px;
    object-fit: contain;
    background: var(--bspkfw-field-surface, #f9fafb);
    border: 1px solid var(--bspkfw-field-border, #d1d5db);
    border-radius: 4px;
}
.bug-shots-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bug-shots-choose { cursor: pointer; }
.bug-shots-choose.is-disabled { opacity: .5; pointer-events: none; }
.bug-shots-help { margin: 8px 0 0; }
.bug-report-details { margin-top: 12px; }
.bug-report-details summary { cursor: pointer; color: var(--bspkfw-field-muted, #5f6774); }
.bug-report-details pre,
.bug-detail pre {
    max-height: 320px;
    overflow: auto;
    font-size: 12px;
    background: var(--bspkfw-field-surface, #f9fafb);
    border: 1px solid var(--bspkfw-field-border, #d1d5db);
    border-radius: 4px;
    padding: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}