/* ==========================================================================
   Known risks — the sheet of the artefact whose key is `knownRisks`.

   One sheet for the whole family of this artefact, in the order the screen draws it: section 1 (the proposals), the head,
   the two views of the list, the editor, the definition section, the confirmation of a deletion, the investment rows and
   section 3 (the scope builder).

   **Every class here is one this feature renders**, or one of the shared panels composes from the block this feature hands
   it (`known-risk-suggestions`, `known-risk-investments`, `known-risk-scope`). Nothing of the shared pieces is re-declared:
   `definitions.css` owns the chip of the definition state, `dialogs.css` owns the dialog frame and the host,
   `collections.css` owns the investigations panel of the mechanism (`investigations*`) and `feedback.css` owns the alert,
   the loading indicator, the empty state and the notifications. The artefact template §0.8 and §0.9 fix both halves of
   that rule: a class of a shared piece is declared by the sheet of that piece, and a missing style is added here — the sheet
   that owns this artefact's patterns — and never in a new one.

   `known-risks.css` is this screen's own sheet, and not a section of `collections.css`, for the reason
   `acceptance-criteria.css` is: two families (Quality and Acceptance criteria) already draw the same card-and-table pattern
   the collections sheet owns, and this one adds a three-badge head, a figure row of its own and a filter, so it is written
   where a reader of this artefact finds it. The cascade order is fixed in `index.html`.
   ========================================================================== */

/* ---- Section 1: the proposals of the artefact (KnownRiskSuggestions.razor) ---- */
/* A panel of proposals and of the refusals already filed. Same family as the constraints', the deliverables' and the
   quality ones: a proposal is a record repeated n times, with the text and the references the server published. */
.known-risk-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

.known-risk-suggestions__title,
.known-risk-suggestions__subtitle {
  margin: 0;
}

.known-risk-suggestions__note {
  max-width: 90ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.known-risk-suggestions__actions,
.known-risk-suggestions__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* The body — the proposals and the refusals below them — is drawn inside one element by the shared section. This artefact
   cannot close it, so the element is transparent to the layout: its children are the flex items of the section and keep the
   gap between them. */
.known-risk-suggestions__body {
  display: contents;
}

.known-risk-suggestions__list,
.known-risk-suggestions__dismissed {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One proposal: the kind the server classified it as, its text, the references it cites and the two decisions. */
.known-risk-suggestions__item {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

/* The kind as the server published it. The accent role marks it as the classification of the row and not as one of its
   facts; the client never maps it to a vocabulary of its own, because the constants live in Shared and the gate 6 list
   forbids reading them. */
.known-risk-suggestions__kind {
  align-self: flex-start;
  margin: 0;
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-accent-soft);
  border: var(--border-width) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

/* A proposal is free text and can be long; it wraps rather than widening the panel. */
.known-risk-suggestions__text {
  margin: 0;
  overflow-wrap: anywhere;
}

/* The references the proposal cites. They are tags and not links: turning one into a navigation needs a
   reference-to-identifier resolution the server does not publish for this artefact (`GAP-CRUD-08`). */
.known-risk-suggestions__refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.known-risk-suggestions__ref {
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-primary-soft);
  border: var(--border-width) solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary-strong);
  font-size: var(--font-size-sm);
}

/* One refusal: what was refused, why, and the way back. */
.known-risk-suggestions__dismissed-item {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-default);
}

.known-risk-suggestions__dismissed-item:last-child {
  border-bottom: 0;
}

/* The reason the server stored, in the muted colour of a fact and not as a message: nobody failed. */
.known-risk-suggestions__reason {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---- The badge of a decision, which the feature words and classifies (KnownRiskDecisionStates) ---- */
.known-risk-decided-badge {
  padding: var(--space-3xs) var(--space-xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.known-risk-decided-badge--discarded {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

.known-risk-decided-badge--settled {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-strong);
}

/* ---- The page: its head, its note, its figures, its filter and its two columns ----
   El marco de la pagina —la leyenda y su contenido a 2 px— no se declara aqui: es el de los catorce artefactos y vive
   en `layout.css`. */

/* The anchor the screen's own page objects address the heading by. It carries no rule of its own — the head is drawn by
   `layout.css` whatever a screen passes here — and it is declared because the gate reads the class the markup draws. */
.known-risk-page__title {
  margin: 0;
}

/* Why the write controls are absent, when the reason is the phase. */
.known-risk-page__note {
  max-width: 90ch;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary-soft);
  border: var(--border-width) solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary-strong);
  font-size: var(--font-size-sm);
}

.known-risk-page__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.known-risk-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

/* `DEC-090` point 3: the action that adds an item lives above the list and below the first section. */
.known-risk-page__list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.known-risk-page__summary {
  margin: 0;
  color: var(--color-text-muted);
}

/* The three figures of the active screen's own row of badges. They are a list and not controls. */
.known-risk-page__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.known-risk-figure {
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-primary-soft);
  border: var(--border-width) solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary-strong);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* The reading that keeps the phase gate closed is the one that is emphasised; the settled one is drawn plainly. */
.known-risk-figure--warning {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

.known-risk-figure--settled {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  color: var(--color-secondary-strong);
}

/* The same truth the phase gate refuses the approval with, said where the person can act on it. */
.known-risk-page__incomplete {
  max-width: 90ch;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent-soft);
  border: var(--border-width) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

/* The filter: the shared row of chips and the sentence that says what it is. The row wraps by itself, so the container
   no longer caps its width — that cap was the width of the dropdown this screen used to draw (`DEC-067`, `DEC-071`) —
   and the sentence keeps the measure the other notes of a screen have. */
.known-risk-page__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* The sentence that says what the filter is: a control of this screen over the list that arrived whole. */
.known-risk-page__filter-note {
  max-width: 90ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.known-risk-page__scope {
  min-width: 0;
}

/* ---- The table: the alternate dense view (KnownRiskTable.razor) ---- */
.known-risk-table__wrapper {
  overflow-x: auto;
}

.known-risk-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
}

.known-risk-table__caption {
  padding: var(--space-xs) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: left;
}

.known-risk-table th,
.known-risk-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-default);
  text-align: left;
  vertical-align: top;
}

.known-risk-table thead th {
  background: var(--color-surface-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* **The text of the row is the elastic column and it is the last one before the actions**, which is the order the owner
   gave on 2026-09-27 for every table: the small data first — reference, the two published values and the state — and
   the text that takes the room that is left. */
.known-risk-table__col-text {
  width: 100%;
}

.known-risk-table__col-ref {
  width: 90px;
}

.known-risk-table__col-category {
  width: 150px;
}

.known-risk-table__col-levels {
  width: 150px;
}

.known-risk-table__col-state {
  width: 150px;
}

.known-risk-table__col-actions {
  width: 96px;
}

/* The text of the row: the description, which is the whole of what a known risk says. The title and the notes the cell
   used to draw above and below it were taken out of the product by the owner on 2026-09-27. */
.known-risk-table__risk {
  min-width: 0;
  overflow-wrap: anywhere;
}

.known-risk-table__description {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.known-risk-table__category,
.known-risk-table__levels {
  white-space: nowrap;
}

.known-risk-table__levels .known-risk-badge + .known-risk-badge {
  margin-left: var(--space-2xs);
}

/* The state of the definition, drawn by the shared chip of `definitions.css`: this cell only places it. */
.known-risk-table__state {
  white-space: nowrap;
}

.known-risk-table__actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--space-2xs);
}

.known-risk-table__row:hover {
  background: var(--color-surface-muted);
}

/* The row of the investigations panel: it is one record of the table and not a row of it, so it carries no hover. */
.known-risk-table__investigations {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-muted);
}

.known-risk-table__investigations:hover {
  background: var(--color-surface-muted);
}

/* ---- The cards: the other view of the same records (KnownRiskList.razor) ---- */

.known-risk-list__item {
  display: flex;
  min-width: 0;
}

/* ---- The badge of a published value: this design system's colour over a value the server publishes ---- */
/* Which categories, probabilities and impacts exist is the server's; how this system paints one is its own, and the table
   that maps them lives beside the badge (`KnownRiskLevels`). A value nothing declares keeps the neutral badge. */

.known-risk-badge--primary {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-strong);
}

.known-risk-badge--error {
  background: var(--color-error-soft);
  border-color: var(--color-error-border);
  color: var(--color-error-strong);
}

.known-risk-badge--warning {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

.known-risk-badge--success {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  color: var(--color-secondary-strong);
}

.known-risk-badge--neutral {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* ---- The editor of one known risk (KnownRiskEditorDialog.razor) ---- */
/* The three published lists share one line each and one way to ask again for all three, because one read answers them. */
.known-risk-editor__lists {
  grid-column: 1 / -1;
}

/* The two free texts of the artefact take the whole row of the dialog's own grid. */
.known-risk-editor__wide {
  grid-column: 1 / -1;
}

/* `.known-risk-editor__note` stood here, with the legend of the position in the list that the owner took out on
   2026-09-27. */

/* ---- The definition section of the dialog: its reading, its explanation and its one notice ---- */
.known-risk-definition {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
}

.known-risk-definition__badge {
  padding: var(--space-3xs) var(--space-xs);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.known-risk-definition__badge--warning {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

.known-risk-definition__badge--settled {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  color: var(--color-secondary-strong);
}

.known-risk-definition__explanation {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.known-risk-definition__notice {
  margin: 0;
  font-size: var(--font-size-sm);
}

.known-risk-definition__notice--open {
  color: var(--color-accent);
}

.known-risk-definition__notice--settled {
  color: var(--color-secondary-strong);
}

/* ---- The confirmation of a deletion (DeleteKnownRiskDialog.razor) ---- */
/* The cascade the deletion carries: said where the person reads what is about to go. */
.known-risk-delete__cascade {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---- Section 2 of the dialog: the investment rows of one risk (KnownRiskInvestments.razor) ---- */
/* The table is the artefact's own class family and not the list's: it is drawn inside a dialog, one item's rows at a time,
   and it carries its own pending mark. */
.known-risk-investments {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.known-risk-investments__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.known-risk-investments__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.known-risk-investments__note {
  max-width: 90ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.known-risk-investments__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

.known-risk-investments__form-full {
  grid-column: 1 / -1;
}

.known-risk-investments__form-actions {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs);
}

.known-risk-investments__table-wrapper {
  overflow-x: auto;
}

.known-risk-investments__table {
  width: 100%;
  border-collapse: collapse;
}

.known-risk-investments__caption {
  padding: var(--space-xs) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: left;
}

.known-risk-investments__table th,
.known-risk-investments__table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-default);
  text-align: left;
  vertical-align: top;
}

.known-risk-investments__table th {
  background: var(--color-surface-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.known-risk-investments__row:hover {
  background: var(--color-surface-muted);
}

.known-risk-investments__table tbody tr:last-child td {
  border-bottom: 0;
}

.known-risk-investments__category,
.known-risk-investments__unit {
  white-space: nowrap;
}

.known-risk-investments__total {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* A row that exists only in the form: it has not been written, so it has no identifier and no total. */
.known-risk-investments__pending {
  margin-left: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-accent-soft);
  border: var(--border-width) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* The line that says the total is the server's and not a multiplication done in the browser. */
.known-risk-investments__computed {
  margin-left: var(--space-2xs);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

.known-risk-investments__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2xs);
}

.known-risk-investments__actions .button + .button {
  margin-left: 0;
}

.known-risk-investments__description {
  overflow-wrap: anywhere;
}

}