/* debug-report.css — rail debug button + bug-report dialog
 *
 * Layout intent: the reporter's own description is the primary field; the
 * generated technical detail sits in a collapsed <details>. The dialog is
 * wider than the kanban default because the details block is Markdown.
 *
 * Tokens: --bg-surface / --border / --text-* / --radius / --font-mono, all from
 * css/core.css. (The previous revision referenced --bg-secondary and
 * --border-color, which are defined nowhere in the skin system, so those rules
 * silently fell back to transparent.)
 */

.debug-report-overlay .kanban-dialog {
    width: min(720px, calc(100vw - 32px));
    max-width: none;
    /* Cap the dialog itself so the action row stays reachable; the body scrolls.
       Generous, because the expanded report now grows to its full height rather
       than hiding inside its own scroller. */
    display: flex;
    flex-direction: column;
    max-height: min(92vh, 1000px);
    /* `.kanban-dialog` ships `overflow-y: auto`. Left on, the dialog and the
       body below are TWO competing scroll containers, and the expanded report
       ends up unreachable in whichever one loses. The body owns scrolling here
       (so the sticky action row stays put), so the dialog clips instead of
       scrolling — `hidden`, not `visible`, or the content escapes the dialog's
       rounded border once it exceeds max-height. */
    overflow: hidden;
}

.debug-report-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Only the body scrolls, so the sticky action row below never drifts out of
       reach of the notes field on a short viewport. */
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    padding-right: 2px;
}

.debug-report-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.debug-report-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.debug-report-label-primary {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.debug-report-hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
}

.debug-report-notes,
.debug-report-prompt,
.debug-report-select {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    padding: 8px;
    font-size: 13px;
    font-family: inherit;
}

.debug-report-notes {
    resize: vertical;
    line-height: 1.5;
}

.debug-report-notes:focus-visible,
.debug-report-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

/* Severity + type sit side by side, stacking on a narrow dialog. */
.debug-report-triage {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.debug-report-field-inline {
    flex: 1 1 200px;
    min-width: 0;
}

.debug-report-snapshot-wrap {
    margin-top: 6px;
    /* Keep the evidence visible but subordinate to the form above it. */
    max-height: 220px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
}

.debug-report-snapshot {
    display: block;
    max-width: 100%;
    height: auto;
}

.debug-report-details {
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    /* No padding here: the header button owns its own, so its hover fill spans
       the full panel width. Body padding is applied on the body itself. */
    padding: 0;
    /* Plain token, not a color-mix(): computed `color(srgb …)` values are what
       the vendored html2canvas chokes on during snapshot capture (see the shim
       in index.js). No need to add another case for a cosmetic tint. */
    background: var(--bg-surface);
    /* NO `overflow: hidden` here. It was added to clip the header's hover fill to
       the rounded corners, but it also clipped the expanded report — which made
       the section unscrollable once opened. The header clips itself instead (see
       its own border-radius below), so the panel must stay unclipped. */
    /* A flex item must be allowed to shrink below its content, or the expanded
       report forces the body taller than its scroll container and the overflow
       becomes unreachable. */
    flex: 0 0 auto;
    min-height: 0;
}

/* Header row: a real button, so it is keyboard- and screen-reader-operable
   without relying on the unstylable native <summary> marker. */
.debug-report-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    /* The panel has no padding of its own, so the row fills it edge to edge and
       the hover fill reads as one target. No negative margins — those overflowed
       the panel by the padding on every side. */
    margin: 0;
    padding: 9px 11px;
    background: none;
    border: none;
    /* Rounds its own top corners: the panel cannot clip it, because clipping
       there would also clip the expanded report below. */
    border-radius: var(--radius, 6px) var(--radius, 6px) 0 0;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    /* Buttons don't inherit these, and a global rule elsewhere could otherwise
       leave the row underlined or struck through. */
    text-decoration: none;
    appearance: none;
}

/* Collapsed, the header IS the whole panel, so it rounds all four corners. */
.debug-report-details:not(.is-open) .debug-report-summary {
    border-radius: var(--radius, 6px);
}

.debug-report-summary:hover {
    background: var(--bg-hover);
}

.debug-report-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.debug-report-chevron {
    flex: none;
    color: var(--text-muted);
    transition: transform 120ms ease;
    /* SVG elements default to a transform-origin of the SVG viewport's origin,
       not the box centre, so a bare rotate() would swing the glyph out of place. */
    transform-origin: 50% 50%;
}

.debug-report-details.is-open .debug-report-chevron {
    transform: rotate(90deg);
}

.debug-report-summary-label {
    font-weight: 600;
    flex: none;
}

/* Plain-language inventory of what the section holds, so the collapsed row is
   informative rather than an opaque "expand me". */
.debug-report-summary-preview {
    color: var(--text-muted);
    font-size: 11px;
    /* One line: a long inventory must not reflow the header. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* The dash is a real character in the DOM (see debug-dialog.js), not a
   ::before — a pseudo-element silently disappears if the rule is ever
   overridden, which reads as two labels run together. */

.debug-report-details-body {
    /* Own padding, since the panel has none; the divider then spans the full
       width like a real section break. */
    padding: 10px 11px 11px;
    border-top: 1px solid var(--border);
}

.debug-report-prompt {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    line-height: 1.45;
    /* `pre` (the previous value) forced a horizontal scrollbar and made the
       reporter scroll sideways to read their own report. Wrap instead, and never
       let the block scroll the dialog body sideways. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    /* Grows to its content (rows are set from the line count) so the dialog body
       is the ONE scroll surface — a scroller inside a scroller is what made this
       tiring to read. */
    overflow-y: hidden;
    overflow-x: hidden;
    resize: none;
}

/* ── Rendered (default) view ──────────────────────── */

.debug-report-rendered {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-primary);
    /* No max-height and no overflow: it grows, and the dialog body scrolls. */
    overflow-wrap: anywhere;
}

.debug-report-rendered > *:first-child {
    margin-top: 0;
}

.debug-report-rendered > *:last-child {
    margin-bottom: 0;
}

/* The prompt's own H1 duplicates the summary row — the section is already
   labelled, so let the H2 section heads carry the structure. */
.debug-report-rendered h1 {
    font-size: 14px;
    margin: 0 0 4px;
}

.debug-report-rendered h2 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin: 14px 0 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border);
}

.debug-report-rendered p {
    margin: 6px 0;
}

.debug-report-rendered ul {
    margin: 6px 0;
    padding-left: 18px;
}

.debug-report-rendered li {
    margin: 2px 0;
}

.debug-report-rendered code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 4px;
}

.debug-report-rendered blockquote {
    margin: 8px 0;
    padding: 6px 10px;
    border-left: 3px solid var(--border);
    color: var(--text-muted);
    font-size: 11.5px;
}

.debug-report-source-toggle {
    /* A quiet text affordance — the formatted view is the one that matters to
       most readers. */
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    color: var(--link, var(--accent));
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
}

.debug-report-source-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Keep the actions pinned below the scrolling body. */
.debug-report-overlay .dialog-actions {
    flex: none;
    position: sticky;
    bottom: 0;
    background: var(--bg-panel, var(--bg-primary));
    padding-top: 12px;
}