/* ==========================================================================
   ProjectManagementPro.ClientWASM — deliverables
   The screen of the deliverables artefact — Features/Deliverables/** — and the tree it is the first
   artefact of the slice to draw.

   It is a sheet of its own because the deliverable is a record with a shape no other family has: it
   hangs from another one of its own rows (`AC-114`), so the list is a tree, the card is indented by
   its depth and the table draws a folding control in its title cell. Everything else is the family's
   already approved furniture — a 1px hairline around a white surface, a 12px corner, the muted colour
   for a label — and every value below is a token of tokens.css: nothing here states a colour, a size
   or a distance of its own.

   The classes are the ones these components render:
     * Features/Deliverables/DeliverablePage.razor                 (.deliverable-page, .deliverable-figure)
     * Features/Deliverables/Components/DeliverableList.razor      (.deliverable-list, .deliverable-card)
     * Features/Deliverables/Components/DeliverableTable.razor     (.deliverable-table)
     * Features/Deliverables/Components/DeliverableSuggestions.razor (.deliverable-suggestions)
     * Features/Deliverables/Components/DeliverableInvestments.razor (.deliverable-investments)
     * Features/Deliverables/Components/DeliverableScope.razor     (.deliverable-scope)
     * Features/Deliverables/Components/DeliverableEditorDialog.razor (.deliverable-editor)
     * Features/Deliverables/Components/DeleteDeliverableDialog.razor (.deliverable-delete)
   ========================================================================== */

/* ==========================================================================
   The page: the head, the figures of the artefact and the 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`. Lo que esta hoja posee es lo que va dentro. */
.deliverable-page__main {
  min-width: 0;
}

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

/* The list actions above the list: the action that adds a deliverable, which `DEC-090` point 3 puts above the
   list and below the first section of the screen. */
.deliverable-page__list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.deliverable-page__summary {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
}

/* The four figures the active screen draws in its own row of badges: how many deliverables the project has, how
   many are roots, how many hang from another one, and how many still hold the phase open. */
.deliverable-page__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-sm);
  padding: 0;
  list-style: none;
}

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

/* The item the server holds as complete: drawn plainly. */
.deliverable-figure--settled {
  background: var(--color-surface-muted);
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}

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

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

.deliverable-page__note {
  margin: 0 0 var(--space-md);
  color: var(--color-text-muted);
}

.deliverable-page__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

/* ==========================================================================
   The tree: where a row is drawn and how deep it is
   ========================================================================== */

/* `AC-114` gives the artefact two levels — the server fixes the hierarchy level at 0 for a root and 1 for a
   child — so the indentation has two steps. A row whose parent is not in the list is drawn at the root, which
   `DeliverableRow.Depth` already says. */
.deliverable-row--root {
  margin-left: 0;
}

.deliverable-row--child {
  margin-left: var(--space-lg);
}

/* ==========================================================================
   The card view — Features/Deliverables/Components/DeliverableList.razor
   ========================================================================== */

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

/* The delete of a table row is the ghost variant the markup chooses, so the danger role is applied by the surface
   that knows what the action does. A card needs no rule: its delete wears `button--danger`, the variant of the
   destructive action, which is what the eight artefacts that painted every ghost button of their card red were
   missing (`DEC-045`). The tables keep this rule until their own delete wears that variant too, and it is why the
   investigations toggle of a collapsed row is still painted with it (`HANDOFF-UI.md` §5.9). */
/* ==========================================================================
   The table view — Features/Deliverables/Components/DeliverableTable.razor
   ========================================================================== */

/* The table is the view the artefact opens on, and it draws the tree: five columns, the reference, the
   deliverable with its folding control, the level, the definition state and the actions. */
.deliverable-table__wrapper {
  overflow-x: auto;
}

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

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

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

.deliverable-table thead th {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.deliverable-table__col-ref,
.deliverable-table__col-level,
.deliverable-table__col-state {
  white-space: nowrap;
}

.deliverable-table__col-ref {
  width: 90px;
}

.deliverable-table__col-level {
  width: 90px;
}

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

/* **The text of the row is the elastic column** and the three small ones have a declared width, which is the order the
   owner gave on 2026-09-27 for every table: the small data first, the text last and taking the room that is left. */
.deliverable-table__col-text {
  width: 100%;
}

/* **The actions column holds one line of controls and no more.** It declared 340 px — the same defect the criterion
   table had — and the owner's answer for this table was to keep the widest row's controls in one line and declare the
   room they need: the pair of icons (28 px each, 8 px apart) plus «Add sub-deliverable», which is the widest control a
   row of this table draws. */
.deliverable-table__col-actions {
  width: 220px;
}

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

/* The title cell of a row that can be folded: the control and the name share one line, and the description
   sits under it. The cell is also where the depth of the row is drawn (`.deliverable-row--child`). */
.deliverable-table__line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
}

.deliverable-table__fold {
  padding: 0 var(--space-3xs);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

.deliverable-table__fold:hover {
  color: var(--color-primary-strong);
}

/* **The text of a card is body text**, and the type comes from the shared anatomy of a card
   (`collection-card__text`): the owner's order of the 2026-09-27 review — «el tipo de letra en las listas cards de los
   items deliverable debe ser igual a las cards expectations, y en general a todas las cards de todos los artefactos» —
   so this sheet only states what this family needs of it: the same wrap its own table's text carries. */
.deliverable-card__text {
  overflow-wrap: anywhere;
}

.deliverable-table__name {
  overflow-wrap: anywhere;
}

.deliverable-table__text {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* The title cell of a row: it holds the folding control, the name and the description, so it is the column that
   carries the tree. */
.deliverable-table__title {
  overflow-wrap: anywhere;
}

.deliverable-table__level {
  white-space: nowrap;
}

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

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

/* The row of investigations a table row opens in place. */
.deliverable-table__investigations {
  background: var(--color-surface-muted);
}

/* ==========================================================================
   Section 1 — the suggestions and the decisions
   Features/Deliverables/Components/DeliverableSuggestions.razor
   ========================================================================== */
.deliverable-suggestions {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

.deliverable-suggestions__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--font-size-lg);
}

.deliverable-suggestions__subtitle {
  margin: var(--space-md) 0 var(--space-2xs);
  font-size: var(--font-size-base);
}

.deliverable-suggestions__note {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.deliverable-suggestions__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

/* The body of the panel — the proposals and the refusals below them — is drawn inside one element by the shared
   section, so that the artefact that can close it hides it without taking anything out of the document.
   This artefact cannot close it, so the element is transparent to the layout: its children are laid out exactly as
   they were when the body had no wrapper at all. */
.deliverable-suggestions__body {
  display: contents;
}

.deliverable-suggestions__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

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

.deliverable-suggestions__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.deliverable-suggestions__item {
  padding: var(--space-sm);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

/* The kind is the server's own word — `suggestion` or `contradiction` — drawn as it arrived. */
.deliverable-suggestions__kind {
  margin: 0 0 var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.deliverable-suggestions__text {
  margin: 0;
  overflow-wrap: anywhere;
}

.deliverable-suggestions__refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.deliverable-suggestions__ref {
  padding: 0 var(--space-2xs);
  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);
}

.deliverable-suggestions__dismissed {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.deliverable-suggestions__dismissed-item {
  padding: var(--space-2xs) 0;
  border-bottom: var(--border-default);
}

/* The reason is the server's own value — who decided the refusal — shown as it arrives. */
.deliverable-suggestions__reason {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   Section 2 — the investment rows of the item the dialog has open
   Features/Deliverables/Components/DeliverableInvestments.razor
   ========================================================================== */

/* The section of the dialog that holds the purchases of one deliverable. It is drawn inside the tab the frame
   owns, so it carries no frame of its own. */
.deliverable-investments {
  display: block;
}
.deliverable-investments__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

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

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

.deliverable-investments__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

/* The description spans the row: it is the sentence of the purchase and it is drawn with the definition field. */
.deliverable-investments__form-full {
  grid-column: 1 / -1;
}

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

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

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

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

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

.deliverable-investments__table thead th {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

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

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

/* A row typed before the artefact exists belongs to no investment list yet, and the cell says so. */
.deliverable-investments__pending {
  display: block;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

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

.deliverable-investments__total {
  white-space: nowrap;
}

/* The total of a row that has not been written yet is the server's to compute, and the cell says that instead of
   multiplying two numbers in the browser. */
.deliverable-investments__computed {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

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

/* ==========================================================================
   Section 3 — the Scope Builder of the artefact
   Features/Deliverables/Components/DeliverableScope.razor

/* ==========================================================================
   The dialog of the artefact
   Features/Deliverables/Components/DeliverableEditorDialog.razor and DeleteDeliverableDialog.razor
   ========================================================================== */

/* The line that says where a new deliverable hangs from, and which facts of the item the form does not ask for.
   Both are the artefact's own and not a control: the hierarchy is the server's (`AC-114`). */
.deliverable-editor__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* The dialog's own reading of the definition state: the badge and the sentence that explains it. */
.deliverable-definition {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
}

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

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

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

.deliverable-definition__explanation {
  color: var(--color-text-muted);
}

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

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

.deliverable-definition__notice--settled {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  color: var(--color-text);
}

/* What goes with the item when it is deleted: the server cascades the investigations and the decisions, and the
   sub-deliverables are left behind. */
.deliverable-delete__cascade {
  margin: 0 0 var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent-soft);
  border: var(--border-width) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
}