/* ==========================================================================
   Expectations — the sheet of the artefact whose key is `requirements`.

   One sheet for the whole family of this artefact, in the order the screen draws it: the page inside the shared workspace,
   section 1 (the proposals), the head of the list, the two views, the editor and its kind field, 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 (`expectation-suggestions`, `expectation-investments`). 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, `dialogs.css` owns the frame's
   tabs and summary, `forms.css` owns `field*`, `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.

   The cascade order is fixed in `index.html`, and this sheet comes last of the artefact families.
   ========================================================================== */

/* ---- The page inside the shared artefact workspace (ExpectationsPage.razor) ----
   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`. */

.expectation-page__title {
  margin: 0;
}

/* The sentence that explains why the write controls are absent, when the reason is the phase. */
.expectation-page__note {
  max-width: 90ch;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

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

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

/* The action that adds an expectation lives above the list and below the first section, which is the hole the artefact
   layout fixes for every artefact (`DEC-090` point 3). */
.expectation-page__list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* The way out of a failed read, said beside the failure. */
.expectation-page__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* The figures of the screen, counted over the rows already loaded: nothing is paged, so there is no «N of M». */
.expectation-page__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* The artefact with nothing outstanding is drawn plainly; every other reading is emphasised, because it is the one that
   keeps the phase gate closed. */
.expectation-figure--warning {
  background: var(--color-error-soft);
  border-color: var(--color-error-border);
  color: var(--color-error-strong);
}

.expectation-figure--settled {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* The truth the phase gate refuses the approval with, said where the person can act on it. */
.expectation-page__pending {
  max-width: 90ch;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-error-soft);
  border: var(--border-width) solid var(--color-error-border);
  border-radius: var(--radius-sm);
  color: var(--color-error-strong);
}

/* The summary line above the two states of the list, which the family draws for the artefact it is reading. */
.expectation-page__summary {
  margin: 0;
  color: var(--color-text-muted);
}

/* ---- Section 1: the proposals of the artefact (ExpectationSuggestions.razor) ---- */
/* The drawing below the block prefix is the shared panel's (`Components/Suggestions/SuggestionsPanel`); what is declared
   here is the block name this feature hands it, so the section is styled by the sheet of the artefact that draws it. */
.expectation-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);
}

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

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

.expectation-suggestions__actions,
.expectation-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, and this
   artefact cannot close it: the element is transparent to the layout, so its children keep the section's gap. */
.expectation-suggestions__body {
  display: contents;
}

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

.expectation-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 — `needs-investment` or `missing` — drawn and never compared: the constants live in
   Shared and the gate 6 list forbids reading them. */
.expectation-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);
}

.expectation-suggestions__text {
  margin: 0;
}

/* The references the row cites, as the server wrote them. */
.expectation-suggestions__refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.expectation-suggestions__ref {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

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

.expectation-suggestions__dismissed-item {
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

/* The figure the shared panel has no member for: how many proposals the coverage verification left out because the
   project's own expectations already cover them. */
.expectation-suggestions__covered {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* The badge of a stored decision, which the list of what was already refused draws. */
.expectation-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);
}

.expectation-decided-badge--discarded {
  background: var(--color-error-soft);
  border-color: var(--color-error-border);
  color: var(--color-error-strong);
}

.expectation-decided-badge--settled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

/* ---- The list: one card per expectation (ExpectationList.razor) ---- */

.expectation-list__item {
  display: flex;
}

/* **The readable reference is the title of the card**, on the owner's order of the 2026-09-27 review: the code the server
   published (`RequirementDto.Ref`, `SE-n`) heads the card **in bold** and the chips it used to share the header line with
   go one row below it, so the card reads in two levels — what the row is and what the server published about it. The face
   is the code face the two views of this artefact already give a reference (`collection-card__ref` in `collections.css`,
   `expectation-table__ref` here), at the size and the weight of a card title: `--font-size-lg` is the size the shared
   anatomy gives `collection-card__title`, and `--font-weight-semibold` is the only emphasis the design system declares. */
.expectation-card__title {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

/* The row of chips, under the title and above the text: the kinds of the expectation, the answer the person gave while it
   is still a doubt and the state the server published. The shared chips list keeps its own geometry
   (`collection-card__chips`) and this is the line that stacks it beside the two chips of the family. */
.expectation-card__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

/* One published word of the artefact: the name of a kind, or the source the expectation came from. It is the same badge
   for both, because both are a word the server published about this row. */

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

/* The stored answer, drawn beside the state it explains: a «Yes» that was resolved is `Defined` and still says so
   (`DEC-050`). */
.expectation-badge--doubt {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

/* ---- The list: one row per expectation (ExpectationTable.razor) ---- */
.expectation-table__wrapper {
  overflow-x: auto;
}

.expectation-table {
  width: 100%;
  border-collapse: collapse;
}

/* The cell that carries the definition of the expectation: the text, the stored answer and where it came from. */
.expectation-table__text {
  max-width: 48ch;
}

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

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

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

.expectation-table__row:hover td {
  background: var(--color-surface-muted);
}


.expectation-table__doubt {
  margin-top: var(--space-3xs);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

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

/* A relation that is empty is drawn as what it is, in the em dash the active screen draws. */
.expectation-table__none {
  color: var(--color-text-subtle);
}

.expectation-table__stakeholder {
  color: var(--color-text-muted);
}

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

/* The investigations of a row are drawn in a row of their own, spanning the whole table. */
.expectation-table__investigations {
  background: var(--color-surface-muted);
}

/* ---- The kind field of the editor (ExpectationKinds.razor) ---- */
/* The group of the field: it is a `field` too, so it inherits the label, the hint and the error of the design system.
   What it drew before the shared control — its own chips, its own list and its own form to grow the catalogue — is the
   control's now (`Components/Forms/CatalogueField`), and those rules went with the markup. */
.expectation-kinds {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.expectation-kinds__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* ---- The actor field of the editor (ExpectationActorField.razor) ---- */
/* Same shape as the kind field and for the same reason: the shared control draws the label, the box and the hint, and
   what this group adds is the room for the two acts of a person the project does not link yet. */
.expectation-actor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.expectation-actor__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* ---- The editor of one expectation (ExpectationEditorDialog.razor) ---- */
/* A field that needs the whole width of the form, which the frame's own grid does not give a field of its own. */
.expectation-editor__wide {
  grid-column: 1 / -1;
}

.expectation-editor__note {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

/* The one field of the dialog that is not a component of its own — the definition question — named so its control, its
   hint and its error can be reached and styled without touching a shared class. The actor of the expectation is a
   component now (`ExpectationActorField`) and carries its own group. */
.expectation-editor__answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* The reading of the definition, beside the question that produces it: the chip is the shared one and this is the
   sentence that tells the four readings apart. */
.expectation-definition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

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

.expectation-definition__notice {
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.expectation-definition__notice--info {
  background: var(--color-secondary-soft);
  border-color: var(--color-secondary-border);
  color: var(--color-secondary-strong);
}

.expectation-definition__notice--success {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

/* ---- The confirmation of a deletion (DeleteExpectationDialog.razor) ---- */
/* The largest cascade of the family, said before the act: the `204` does not say what it took with it. */
.expectation-delete__cascade {
  max-width: 90ch;
  margin: 0;
  color: var(--color-error-strong);
  font-size: var(--font-size-sm);
}

/* ---- Section 2 of the dialog: the investment rows (ExpectationInvestments.razor) ---- */
/* The drawing below the block prefix is the shared panel's (`Components/Investments/InvestmentsPanel`); what is declared
   here is the block name this feature hands it. */
.expectation-investments {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

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

.expectation-investments__title {
  margin: 0;
  font-size: var(--font-size-md);
}

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

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

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

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

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

.expectation-investments__category,
.expectation-investments__unit {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

.expectation-investments__description {
  max-width: 32ch;
}

/* The total is the server's `TotalCost`; a row that has not been written yet has none and says so. */
.expectation-investments__computed,
.expectation-investments__total {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

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

.expectation-investments__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

/* A field of the row's form that needs the whole width of the section. */
.expectation-investments__form-full {
  flex-basis: 100%;
}

.expectation-investments__form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* A row typed before the expectation existed: it is held in the browser and written after the artefact is saved
   (`DEC-043`), and the section says so instead of pretending it is already a row of the list. */
.expectation-investments__pending {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

.expectation-investments__note {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}