/* =============================================================================
   The HAZOP artefact — hazop.css

   Written for the only screen of the phase with **two levels**: a node that groups and a deviation that is the item. Every
   selector here is either the page's own frame, the node's header — which is the piece both views draw —, the two views of
   the deviations, the scope section of this artefact, or the blocks of the three shared panels this screen mounts
   (`hazop-suggestions__*`, `hazop-investments__*` and the badge of a decision), which the panels name through their
   `Block` parameter and therefore expect a sheet to style.

   Nothing here re-states a rule `forms.css`, `collections.css`, `dialogs.css` or `definitions.css` already owns: the
   fields, the buttons, the alerts, the empty state, the loading indicator, the definition chip, the investigations panel
   and the investment panel are the shared pieces and keep their own look. This sheet adds what this artefact has and no
   other family does.

   One global sheet per family, in the cascade order `index.html` fixes, and no `.razor.css` anywhere: the same rule every
   other family follows.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   The page: the head and its two notes
   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`.
   ----------------------------------------------------------------------------- */

.hazop-page__title {
  margin: 0;
}

.hazop-page__note {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-default);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.hazop-page__main {
  min-width: 0;
}

.hazop-page__scope {
  min-width: 0;
}

/* The row `.hazop-page__list-actions` stood here: it was the secondary `Add node` of the study, and the owner took that
   act out on 2026-09-27 — «quitemos lo de agrega Hazop Node por abrir un formulario y solo hagámoslo vía add/edit
   deviation» — so the rule went with its last consumer. A rule with no consumer is a rule the next person maintains for
   nothing. */

.hazop-page__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-md) 0;
}

.hazop-page__summary {
  margin: 0 0 var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* -----------------------------------------------------------------------------
   The three figures of the two levels

   Three separate truths and never one ratio: `Nodes` counts headers, `Deviations` counts items and `Still to define`
   counts items too, which is what the phase gate counts. The dashboard's own panel counts nodes in `items` and deviations
   in `needsInvestigation`, so mixing the levels into an «N of M» would be a lie (`DEC-092`).
   ----------------------------------------------------------------------------- */

.hazop-page__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0 0 var(--space-sm);
  padding: 0;
  list-style: none;
}

.hazop-figure {
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

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

.hazop-figure--warning {
  border-color: var(--color-accent-border);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

.hazop-page__incomplete {
  margin: 0 0 var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

/* -----------------------------------------------------------------------------
   The filter, and what it really narrows
   ----------------------------------------------------------------------------- */

/* **The filter takes the whole width of the column it sits in.** It carried `max-width: var(--layout-form-max)` — 440 px
   — which was the measure of the `select` it used to be, and with eleven chips that cap broke the row into two and three
   lines; the owner saw exactly that on 2026-09-27: «hoy aparece en dos filas pudiendo ocupar el ancho total de donde
   está». The three artefacts that filter draw the same piece with no cap of their own, which is why this one has none
   either. */
.hazop-page__filter {
  margin-bottom: var(--space-md);
}

/* The filter is the shared row of chips (`Components/Filters/FilterChips`), which the owner asked for on 2026-09-27 —
   «en el artefacto Hazop el filtrado de los items selecciona por listado.. hagamos que eso sea por botones con los
   mismos items del filtrado» — so what is left here is the room it takes and nothing of its own look: the three
   artefacts that filter already draw that same piece. */
.hazop-page__filter .filter-chips {
  margin: 0;
}

/* -----------------------------------------------------------------------------
   The header of one node — the piece both views draw
   ----------------------------------------------------------------------------- */

.hazop-node {
  margin: 0 0 var(--space-sm);
}

.hazop-node__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  justify-content: space-between;
}

.hazop-node__name {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.hazop-node__count {
  margin-left: var(--space-xs);
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.hazop-node__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.hazop-node__intent {
  margin: var(--space-2xs) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.hazop-node__intent-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* -----------------------------------------------------------------------------
   The card view of the study: the groups and their cards
   ----------------------------------------------------------------------------- */

.hazop-list {
  display: block;
  outline: none;
}

.hazop-list__group {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--border-default);
}

.hazop-list__group:last-child {
  border-bottom: none;
}

.hazop-list__empty {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.hazop-list__item {
  min-width: 0;
}

.hazop-card__guide-word {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

/* -----------------------------------------------------------------------------
   The table view of the study: one table per node, headed by the node's own header
   ----------------------------------------------------------------------------- */

.hazop-table__wrapper {
  display: block;
  outline: none;
}

.hazop-table__group {
  margin-bottom: var(--space-lg);
}

.hazop-table__group:last-child {
  margin-bottom: 0;
}

.hazop-table__empty {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.hazop-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  font-size: var(--font-size-sm);
}

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

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

.hazop-table th {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hazop-table__row:hover td {
  background: var(--color-primary-soft);
}

.hazop-table__group .hazop-table tbody tr:last-child td {
  border-bottom: none;
}

/* **The text of the row is the elastic column and it is the last one before the actions**, which is the owner's rule of
   2026-09-27 for every table: the small data first — the code, the pair and the state — and then the text, which takes
   the room that is left. The cell carries the safeguard, so the class is named for the column and not for the drawer it
   used to hold. */
.hazop-table__col-code {
  width: 90px;
}

.hazop-table__col-value {
  width: 140px;
}

.hazop-table__col-state {
  width: 150px;
}

.hazop-table__col-text {
  width: 100%;
}

.hazop-table__col-actions {
  width: 96px;
}

.hazop-table__value {
  white-space: nowrap;
}

.hazop-table__text {
  min-width: 240px;
}

/* `.hazop-table__deviation`, `.hazop-table__drawer` y `.hazop-table__drawer-label` stood here and went with the four
   labelled drawers the owner took out of the listing on 2026-09-27: the cell carries the safeguard and nothing else. */

.hazop-table__state {
  white-space: nowrap;
}

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

.hazop-table__investigations {
  padding: 0;
  background: var(--color-surface-muted);
}

/* -----------------------------------------------------------------------------
   The scope section of this artefact
   ----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   The two dialogs' own blocks

   The surface, the tabs, the summary, the panels and the action row belong to `Dialogs`; what is here is the note of an
   opening seeded by a proposal, the wide row of this form and the four readings of a deviation's definition state.
   ----------------------------------------------------------------------------- */

.hazop-editor__proposal {
  margin: 0 0 var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-default);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.hazop-editor__wide {
  grid-column: 1 / -1;
}

.hazop-editor__lists {
  grid-column: 1 / -1;
}

/* `.hazop-editor__note` stood here, and it went with its two last consumers: the legend of the node's position and the
   one that said the deviation is composed by the server. The owner took both out on 2026-09-27. */

.hazop-definition {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  margin-top: var(--space-sm);
}

.hazop-definition__badge {
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

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

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

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

.hazop-definition__notice {
  margin: var(--space-sm) 0 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.hazop-definition__notice--open {
  border: var(--border-width) solid var(--color-accent-border);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.hazop-definition__notice--settled {
  border: var(--border-width) solid var(--color-secondary-border);
  background: var(--color-secondary-soft);
  color: var(--color-text);
}

/* -----------------------------------------------------------------------------
   The two confirmations: the consequence the person has to read before confirming
   ----------------------------------------------------------------------------- */

.hazop-delete__cascade {
  margin: var(--space-sm) 0 0;
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

/* -----------------------------------------------------------------------------
   The three shared panels this screen mounts, named through their `Block` parameter
   ----------------------------------------------------------------------------- */

.hazop-suggestions__title {
  margin: 0;
  font-size: var(--font-size-lg);
}

.hazop-suggestions__subtitle,
.hazop-suggestions__note {
  margin: var(--space-2xs) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.hazop-suggestions__actions,
.hazop-suggestions__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin-top: var(--space-sm);
}

.hazop-suggestions__body {
  margin-top: var(--space-sm);
}

.hazop-suggestions__list,
.hazop-suggestions__dismissed {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hazop-suggestions__item,
.hazop-suggestions__dismissed-item:last-child {
  border-bottom: none;
}

.hazop-suggestions__kind {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hazop-suggestions__text {
  margin: var(--space-3xs) 0 0;
  color: var(--color-text);
}

.hazop-suggestions__refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
}

.hazop-suggestions__ref {
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

.hazop-suggestions__reason {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

.hazop-investments__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  justify-content: space-between;
}

.hazop-investments__title {
  margin: 0;
  font-size: var(--font-size-base);
}

.hazop-investments__note {
  margin: var(--space-2xs) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.hazop-investments__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

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

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

.hazop-investments__table-wrapper {
  overflow-x: auto;
  margin-top: var(--space-sm);
}

.hazop-investments__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

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

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

.hazop-investments__table th {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.hazop-investments__row:hover td {
  background: var(--color-primary-soft);
}

.hazop-investments__table tbody tr:last-child td {
  border-bottom: none;
}

.hazop-investments__category,
.hazop-investments__unit {
  white-space: nowrap;
  color: var(--color-text-muted);
}

.hazop-investments__total {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hazop-investments__pending {
  margin-left: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--border-width) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

.hazop-investments__description {
  min-width: 200px;
}

.hazop-investments__computed {
  display: block;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

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

.hazop-decided-badge {
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

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

.hazop-decided-badge--settled {
  border-color: var(--color-secondary-border);
  background: var(--color-secondary-soft);
  color: var(--color-secondary-strong);
}