/* ==========================================================================
   ProjectManagementPro.ClientWASM — expert judgement
   The screen of the expert-judgement artefact — Features/ExpertJudgement/** — and the record of the
   consultations the project relied on: who was asked, when, about what and what he recommended.

   It is a sheet of its own for the same reason its two neighbours have one: what this artefact draws where the
   others draw something else is **two definition drawers** — «Topic consulted» and «Recommendations»
   (`CONTRACT-ARTEFACT-CRUD.md` §8.2: «Tiene dos campos de definición, no uno») — a **mandatory date** that no
   other artefact of the family carries (`API-109`), and three fields fed by a catalogue of the whole tenant
   (`autocomplete/{field}`, `GAP-106`). 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/ExpertJudgement/ExpertJudgementPage.razor            (.expert-judgement-page, .expert-judgement-figure)
     * Features/ExpertJudgement/Components/ExpertJudgementList.razor (.expert-judgement-list, .expert-judgement-card)
     * Features/ExpertJudgement/Components/ExpertJudgementTable.razor (.expert-judgement-table)
     * Features/ExpertJudgement/Components/ExpertJudgementScope.razor (.expert-judgement-scope)
     * Features/ExpertJudgement/Components/ExpertJudgementEditorDialog.razor (.expert-judgement-editor,
       .expert-judgement-definition)
     * Features/ExpertJudgement/Components/DeleteExpertJudgementDialog.razor (.expert-judgement-delete)
     * Components/Suggestions/SuggestionsPanel.razor                 (.expert-judgement-suggestions)
     * Components/Investments/InvestmentsPanel.razor                 (.expert-judgement-investments)
   ========================================================================== */

/* ==========================================================================
   The page: the head, the figures of the artefact and the two columns
   ========================================================================== */

/* The anchor the page names as its own heading, through the `HeadingClass` it hands to the shared `PageHeader`.
   The head draws the heading; what this sheet owns of it is the margin the head's own title rule leaves, and
   the name the screen's automation addresses it by. 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`. */
.expert-judgement-page__title {
  margin: 0;
}

/* The write controls are absent because the server would refuse them, and this sentence says which of the two
   reasons it is: the phase, and the way out of it. */
.expert-judgement-page__note {
  margin: 0 0 var(--space-md);
  color: var(--color-text-muted);
}

/* A failed read is never an empty list: it is a failure, with a way to ask again — the same recovery the three
   shared panels of this screen draw. */
.expert-judgement-page__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.expert-judgement-page__main {
  min-width: 0;
}

.expert-judgement-page__scope {
  min-width: 0;
}

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

/* The line that says the project holds no judgement yet. Nothing is paged and nothing is hidden, so the count
   is never a «N of M» (`DEC-W20.3`) and the line states the whole truth. */
.expert-judgement-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 (`:82-87`): how many judgements the project
   has, how many experts and organisations are behind them, and how many still hold the phase open. */
.expert-judgement-page__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-sm);
  padding: 0;
  list-style: none;
}

.expert-judgement-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. */
.expert-judgement-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. */
.expert-judgement-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. The shared
   alert draws an outcome and has no warning variant, so this line is the screen's own. */
.expert-judgement-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);
}

/* ==========================================================================
   The card view — Features/ExpertJudgement/Components/ExpertJudgementList.razor
   ========================================================================== */

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

/* ==========================================================================
   The table view — Features/ExpertJudgement/Components/ExpertJudgementTable.razor
   ========================================================================== */
.expert-judgement-table__wrapper {
  overflow-x: auto;
}

/* The wrapper takes the caret when a dialog closes over a row that is gone, so it is a focusable region and it
   says so: the outline is the one every focusable surface of the product draws. */
.expert-judgement-table__wrapper:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.expert-judgement-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

.expert-judgement-table__caption {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: left;
}

.expert-judgement-table th,
.expert-judgement-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

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

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

/* The expert and, under his name, the organisation: the two lines the active screen draws in one cell. */
.expert-judgement-table__expert {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}


.expert-judgement-table__organisation {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

/* The field of expertise, the date and the two drawers. The date is a date and never an instant, so it never
   wraps and it carries no time. */
.expert-judgement-table__area,
.expert-judgement-table__date {
  color: var(--color-text-muted);
}

.expert-judgement-table__date {
  white-space: nowrap;
}

.expert-judgement-table__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.expert-judgement-table__topic {
  white-space: pre-line;
}

.expert-judgement-table__recommendations {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  white-space: pre-line;
}


/* The cell of the definition state: it holds the shared chip and never a word of its own — the chip prints the
   state the server published (`DEC-W62`). The rule exists so that the cell is a named thing of this table. */
.expert-judgement-table__state {
  white-space: nowrap;
}

/* The actions of a row, in the order every artefact of the family draws them: the investigations first, which a
   reader may open, and then the two that write. */
.expert-judgement-table__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
}

/* The row the investigations panel is drawn in: it spans the whole table and carries no row of its own. */
.expert-judgement-table__investigations {
  padding: 0;
  background: var(--color-surface-muted);
}

/* ==========================================================================
   Section 3 — Features/ExpertJudgement/Components/ExpertJudgementScope.razor

/* What the analysis compared an item with, and what it warns about: two readings, drawn apart from what it
   proposes. */

/* ==========================================================================
   Section 1 — the shared suggestion panel, in this artefact's block
   (Components/Suggestions/SuggestionsPanel.razor with `Block="expert-judgement-suggestions"`)
   ========================================================================== */
.expert-judgement-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

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

.expert-judgement-suggestions__subtitle,
.expert-judgement-suggestions__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

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

.expert-judgement-suggestions__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

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

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

.expert-judgement-suggestions__kind {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

.expert-judgement-suggestions__text {
  min-width: 0;
  white-space: pre-line;
}

.expert-judgement-suggestions__refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}

.expert-judgement-suggestions__ref {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
}

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

/* The badge of a decided suggestion, in this artefact's block. The word is the state the server published and
   the colour is the client's vocabulary — what the design system paints is not a business value. */
.expert-judgement-decided-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);
}

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

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

/* ==========================================================================
   Section 2 — the shared investment panel, in this artefact's block
   (Components/Investments/InvestmentsPanel.razor with `Block="expert-judgement-investments"`)
   ========================================================================== */
.expert-judgement-investments {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

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

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

.expert-judgement-investments__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.expert-judgement-investments__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-xs);
  align-items: end;
}

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

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

.expert-judgement-investments__table-wrapper {
  overflow-x: auto;
}

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

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

.expert-judgement-investments__table th,
.expert-judgement-investments__table td {
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

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

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

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

.expert-judgement-investments__category,
.expert-judgement-investments__unit {
  color: var(--color-text-muted);
}

/* The total is the server's own (`BR-304`) and is never multiplied here. */
.expert-judgement-investments__total {
  font-weight: var(--font-weight-semibold);
}

/* A row typed before the artefact existed belongs to no investment list yet, and it says so. */
.expert-judgement-investments__pending {
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

.expert-judgement-investments__description {
  min-width: 0;
}

.expert-judgement-investments__computed {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

.expert-judgement-investments__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* ==========================================================================
   The editor — Features/ExpertJudgement/Components/ExpertJudgementEditorDialog.razor
   ========================================================================== */

/* `DEC-090` point 1, said where the person reads it: what is on screen is the consultation the AI proposed and
   the rest of the record is completed by hand. */
.expert-judgement-editor__proposal {
  margin: 0 0 var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-primary-soft);
  border: var(--border-width) solid var(--color-primary-border);
  border-radius: var(--radius-sm);
}

/* The one fact of the form that is not a field: the position in the list is the server's. */
.expert-judgement-editor__note {
  margin: var(--space-xs) 0 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

/* The catalogue of the three free-text fields could not be read. It is not a field of the form and it does not
   block the save — the three columns are free text and the server resolves none of them against a list — so it
   is drawn as what it is: a failure with a way to ask again, over three fields that still work. */
.expert-judgement-editor__catalogue {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  grid-column: 1 / -1;
}

/* The badge of the state and the sentence that explains which of its three readings applies. The reading is
   decided by the answer the server **stored** and not by the state alone (`DEC-050`). */
.expert-judgement-definition {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

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

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

.expert-judgement-definition__badge--settled {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

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

.expert-judgement-definition__notice {
  margin: var(--space-xs) 0 0;
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

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

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

/* ==========================================================================
   The confirmation — Features/ExpertJudgement/Components/DeleteExpertJudgementDialog.razor
   ========================================================================== */

/* The cascade the server applies, said before the deletion is confirmed: `BR-117` removes the item's
   investigations with it and the decisions filed about it. */
.expert-judgement-delete__cascade {
  margin: 0 0 var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}