/* IncidentDetail page — migrated from IncidentDetail.razor.css; the shared .id-* kit lives in components.css. Scoped under .page-incident-detail. */
.page-incident-detail { display: flex; flex-direction: column; gap: 34px; }

.page-incident-detail .id-sq  { width: 11px; height: 11px; flex: none; }

/* Closure status: the same pill the Incidents queue draws, in the header chip row and in the Details
   panel. The pill is nowrap by design, so the narrow side column has to clamp it: an open-ended Jira
   resolution would otherwise widen the panel rather than be cut (§26). The whole value is on the title. */
.page-incident-detail .cls-pill {
    display: inline-block;   /* text-overflow needs a block box; .cls-pill's inline-flex ignores it */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-incident-detail .id-report { display: flex; flex-direction: column; gap: 20px; }

.page-incident-detail .id-report-block h3 {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
.page-incident-detail .id-report-block p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.page-incident-detail .id-select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: 500 13px var(--font-body);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color-scheme: dark;
}
.page-incident-detail .id-select:focus { outline: none; border-color: var(--accent-line); }