/* ==========================================================================
   Risks — the sheet of the artefact whose key is `risks`: the risk matrix.

   One sheet for the whole family of this artefact, in the order the screen draws it: section 1 (the proposals), the head,
   the figures, the published bands of the score, 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 (`risk-suggestions`, `risk-investments`, `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 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.

   **The colour of a band is not written in this sheet as a severity rule.** `BR-411` lives in the server and the server
   publishes the band and the colour of every row (`RiskDto.SeverityBand`/`SeverityColor`, `DEC-W31`, `ASK-W05`); what this
   sheet declares is how *this* design system paints one of the four names the server documents — `red`, `orange`, `yellow`,
   `green` — exactly as `known-risks.css` declares how it paints a level. The mapping from the name to the class is the
   feature's own table (`RiskSeverityPresentation`) and the cuts are nowhere in the client.
   ========================================================================== */

/* ---- Section 1: the proposals of the artefact (RiskSuggestions.razor) ---- */
/* A panel of proposals and of the refusals already filed. Same family as the constraints', the deliverables', the quality
   and the known-risks ones: a proposal is a record repeated n times, with the text and the references the server published. */
.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);
}

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

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

.risk-suggestions__actions,
.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. */
.risk-suggestions__body {
  display: contents;
}

.risk-suggestions__list,
.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. */
.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. */
.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. */
.risk-suggestions__text {
  margin: 0;
  overflow-wrap: anywhere;
}

/* The references the proposal cites. They are tags and not links: this artefact's AI module maps no coverage route, so
   there is nothing to navigate to. */
.risk-suggestions__refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.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. */
.risk-suggestions__dismissed-item {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-default);
}

.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. */
.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 (RiskDecisionStates) ---- */
.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;
}

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

.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 bands 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. */
.risk-page__title {
  margin: 0;
}

/* Why the write controls are absent, when the reason is the phase. */
.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);
}

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

.risk-page__main {
  display: flex;
  flex: 1 1 34rem;
  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. */
.risk-page__list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

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

/* The figures of the active screen's own row of badges, minus the combined «High or extreme» one: the bands below say the
   same thing with the words and the colours the server publishes. They are a list and not controls. */
.risk-page__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.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. */
.risk-figure--warning {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

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

/* The heading of one of the screen's own readings — the bands of the score — placed between the figures and the list. */
.risk-page__section-title {
  margin: 0;
  font-size: var(--font-size-md);
}

.risk-page__bands {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-width: 40rem;
}

/* The bands the server declares, **in one line**: the word, the lowest score it published for the band and how many rows
   carry it. The colour of the word is the colour name the server published, mapped by `RiskSeverityPresentation`.
   The owner asked for the row on 2026-09-27 — «eso sale vertical para que el sistema ocupe menos espacio es mejor que
   salga horizontal» — so the four bands sit side by side and wrap only when the window is too narrow for them. */
.risk-bands {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.risk-bands__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
}

/* The lowest score of the band, which is the server's own number and not a cut this screen computed. */
.risk-bands__range {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

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

/* The same truth the phase gate refuses the approval with, said where the person can act on it. */
.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 sentence that says what the listing takes and why no filter is drawn for it. */
.risk-page__filter-note {
  max-width: 100ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.risk-page__filter-note code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

.risk-page__scope {
  flex: 1 1 20rem;
  min-width: 0;
}

/* ---- The table: the view this artefact opens on (RiskTable.razor) ---- */
.risk-table__wrapper {
  overflow-x: auto;
}

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

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

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

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

/* The score and the band it falls in, both published by the server. */
.risk-table__severity {
  white-space: nowrap;
}

.risk-table__band {
  display: inline-block;
  margin-left: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* The risk is what the row is: its title, and under it what the person wrote about it. */
.risk-table__risk {
  min-width: 0;
  overflow-wrap: anywhere;
}


.risk-table__event,
.risk-table__plan {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.risk-table__levels,
.risk-table__strategy,
.risk-table__status {
  white-space: nowrap;
}

.risk-table__levels .risk-badge + .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. */
.risk-table__state {
  white-space: nowrap;
}

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

.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. */
.risk-table__investigations {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-muted);
}

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

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

.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 probabilities, impacts and strategies exist is the server's, and so is the band of a score; how this system paints
   one of the four colour names the server documents is its own, and the table that maps them lives beside the badge
   (`RiskSeverityPresentation`). A value nothing declares keeps the neutral badge. */

/* `red` — the highest band the server documents. */
.risk-badge--critical {
  background: var(--color-error-soft);
  border-color: var(--color-error-border);
  color: var(--color-error-strong);
}

/* `orange` — the second band. */
.risk-badge--high {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

/* `yellow` — the third band. It shares the accent family with the one above it and is told apart by the border, because the
   palette has one warning role and inventing a second colour here would be inventing a colour the product does not have. */
.risk-badge--medium {
  background: var(--color-accent-soft);
  border-color: var(--color-border-strong);
  color: var(--color-accent);
}

/* `green` — the lowest band. */
.risk-badge--low {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  color: var(--color-secondary-strong);
}

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

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

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

/* The one fact of the risk the form does not ask for: the score is the server's and is never previewed here. */
/* `.risk-editor__note` stood here and went with its last consumer: the legend that said the score is computed by the
   server and that the status is always `Identified`, taken out by the owner on 2026-09-27. The fact stays where it
   belongs — in `BR-400` and in the help panel of the dialog. */

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

.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;
}

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

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

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

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

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

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

/* ---- The confirmation of a deletion (DeleteRiskDialog.razor) ---- */
/* The cascade the deletion carries — the widest one of the ten artefacts (BR-409): said where the person reads what is about
   to go. */
.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 (RiskInvestments.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. */
.risk-investments {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

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

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

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

.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);
}

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

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

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

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

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

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

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

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

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

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

.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. */
.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. */
.risk-investments__computed {
  margin-left: var(--space-2xs);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

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

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

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

@media (max-width: 60rem) {
  .risk-page__scope {
    width: 100%;
  }
}