/* ==========================================================================
   Scope — the sheet of the artefact whose key is `scope`, and the destination of the scope sections
   the other screens draw.

   One sheet for the whole screen, in the order it draws it: the page and its figures, the table of the
   approved scope and its drafts grouped by the family that produced each item, the proposals with their
   four states and their verdicts, the editor and the confirmation of a deletion.

   **Every class here is one this screen renders.** Nothing of a shared piece is re-declared:
   `definitions.css` owns the chip of the definition state (`definition-state*`), `dialogs.css` owns the
   dialog frame and the host (`dialog*`, `dialog-frame*`), `forms.css` owns the fields and the buttons
   (`field*`, `button*`), `feedback.css` owns the alert, the loading indicator and the empty state, and
   `layout.css` owns the page header. What is written here is the screen's own patterns and nothing else.

   The badge modifiers of the proposals (`scope-proposals__badge--open`, `--accepted`, `--discarded`,
   `--covered`, `--unknown`) are composed by the feature's own table and not written in the markup, so
   gate 8 does not see them; they are declared here all the same, because a state the row can be in and
   the sheet does not paint is a state the person cannot read.

   The cascade order is fixed in `index.html`.
   ========================================================================== */

/* ---- The page (ScopePage.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`. */

.scope-page__title {
  margin: 0;
}

/* The sentence that explains an absent write control when the reason is the phase. It is the screen's own
   because an alert draws an outcome and not a reason. */
.scope-page__note {
  max-width: 90ch;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-secondary-soft);
  border: var(--border-width) solid var(--color-secondary-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* The action that adds an item lives above the list and below nothing else: the artefact has no first
   section, so the list is what it sits above (DEC-090 point 3). */
.scope-page__list-actions,
.scope-page__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* The figures of the artefact in one line, which is the row of badges the active screen draws. */
.scope-page__summary {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---- The table of the scope and its drafts (ScopeTable.razor) ---- */
.scope-table__region {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.scope-cards__region {
  outline: none;
}

.scope-cards__group + .scope-cards__group {
  margin-top: var(--space-lg);
}

.scope-cards__grid {
  /* The row of four is the shared pattern of the Cards view: .collection-cards. The heading above it
     carries no margin of its own, so this is the whole of the space between a heading and its cards. */
  margin-top: var(--space-sm);
}

@media (max-width: 767px) {
  .scope-card__actions .button {
    flex: 1;
  }
}

.scope-table__region:focus {
  outline: none;
}

.scope-table__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.scope-table__group-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--font-size-md);
}

.scope-table__group-count {
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* A wide table scrolls inside its own box rather than widening the page. */
.scope-table__wrapper {
  overflow-x: auto;
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

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

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

.scope-table thead th {
  padding: var(--space-xs) var(--space-md);
  background: var(--color-surface-muted);
  border-bottom: var(--border-default);
  color: var(--color-text-muted);
  text-align: left;
}

.scope-table__position-head {
  width: 4ch;
}

.scope-table tbody td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
}

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

.scope-table__position {
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
}

/* The kind of the item, in the word the server published for the row. */
.scope-table__kind {
  font-family: var(--font-family-mono);
}

/* An inclusion is free text and can be long; it wraps rather than widening the table. */
.scope-table__text {
  min-width: 32ch;
  overflow-wrap: anywhere;
}

/* The reading the review memory left behind (BR-120): a note beside the text and not a second field. */
.scope-table__reviewed {
  margin-top: var(--space-2xs);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

.scope-table__origin {
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
}

/* The two families whose origin carries no sequence say so instead of showing a dash that reads like a
   missing value. */
.scope-table__no-origin {
  color: var(--color-text-subtle);
  font-family: var(--font-family-base);
  font-style: italic;
}

.scope-table__badge {
  display: inline-block;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* The approved scope is what the phase gate counts; a draft is what an approval leaves alone (BR-119). */
.scope-table__badge--approved {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.scope-table__badge--draft {
  background: var(--color-secondary-soft);
  border-color: var(--color-secondary-border);
  color: var(--color-secondary-strong);
}

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

/* ---- The proposals (ScopeProposals.razor) ---- */
.scope-proposals {
  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);
}

.scope-proposals__title {
  margin: 0;
}

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

.scope-proposals__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* What a completed command answered. It is news of an act and not an error, so it is not an alert. */
.scope-proposals__note {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-success-soft);
  border: var(--border-width) solid var(--color-success-border);
  border-radius: var(--radius-sm);
  color: var(--color-success);
  font-size: var(--font-size-sm);
}

.scope-proposals__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.scope-proposals__wrapper {
  overflow-x: auto;
}

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

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

.scope-proposals__table thead th {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface-muted);
  border-bottom: var(--border-default);
  color: var(--color-text-muted);
  text-align: left;
}

.scope-proposals__table tbody td {
  padding: var(--space-sm);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
}

/* A proposal is a sentence and can be long. */
.scope-proposals__text {
  min-width: 32ch;
  overflow-wrap: anywhere;
}

.scope-proposals__badge {
  display: inline-block;
  padding: var(--space-3xs) var(--space-xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* The four states of a proposal, in the words the server stores them: the only one this screen offers to
   decide is the one nobody has decided on, and the other three are history. */
.scope-proposals__badge--open {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

.scope-proposals__badge--accepted {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.scope-proposals__badge--discarded {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.scope-proposals__badge--covered {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-strong);
}

/* A state the store holds and this vocabulary does not name is drawn as it arrived, plainly. */
.scope-proposals__badge--unknown {
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
}

.scope-proposals__origin,
.scope-proposals__reason,
.scope-proposals__date {
  color: var(--color-text-muted);
}

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

/* The verdict of an analysis, drawn under the proposal it is about: the four answers the server reads, with
   the wording it sent and nothing interpreted here. */
.scope-proposals__verdict {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  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);
}

.scope-proposals__verdict-word {
  color: var(--color-primary-strong);
}

.scope-proposals__verdict-text {
  overflow-wrap: anywhere;
}

.scope-proposals__verdict-compared {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* What the analysis warned about, and why a second attempt produced nothing. */
.scope-proposals__warning {
  padding: var(--space-2xs) var(--space-xs);
  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 editor (ScopeEditorDialog.razor) ---- */
/* The kind of an existing item, which the editing endpoint does not take: it is drawn as a fact and not as a
   control, because a control that cannot be saved is a lie about what the endpoint accepts. */
.scope-editor__fixed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.scope-editor__fixed-label,
.scope-editor__fixed-value,
.scope-editor__fixed-hint {
  font-size: var(--font-size-sm);
}

.scope-editor__fixed-label {
  color: var(--color-text-muted);
}

.scope-editor__fixed-value {
  font-family: var(--font-family-mono);
}

.scope-editor__fixed-hint {
  color: var(--color-text-subtle);
}

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

.scope-editor__definition {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.scope-editor__definition-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---- The confirmation of a deletion (DeleteScopeItemDialog.razor) ---- */
.scope-delete__origin {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* The row of one scope item: the marker the table owns, so a rule that targets a row and not a cell has a
   class to target. It carries no declaration of its own beyond the row's own separation. */
.scope-table__row + .scope-table__row {
  border-top: var(--border-width) solid var(--color-border);
}

/* The two cells whose content is a word of the server and a chip of the shared piece: they hold their
   control at its own width instead of stretching it across the column. */
.scope-table__approval,
.scope-table__definition {
  white-space: nowrap;
}

/* The row of one proposal, and the cell of its state. The row is the target of the rule that separates the
   verdict drawn beneath a proposal from the proposal itself. */
.scope-proposals__row {
  border-top: var(--border-width) solid var(--color-border);
}

.scope-proposals__state {
  white-space: nowrap;
}

/* The verdict of a proposal is drawn in a row of its own, under the proposal it is about, and it is that
   row — not the cell — that carries the separation from the next proposal. */
.scope-proposals__verdict-row {
  background: var(--color-surface-muted);
}

/* ---- The origins of an inclusion that relates (REC-93) --------------- */
/* An inclusion can be born of several items of several artefacts at once: the walk relates what is related, and this
   is where that shows. The list is drawn only when there is more than the one the readable reference names, so a
   single-origin inclusion —which is most of them today— draws exactly what it drew. */

.scope-table__origins {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
}

.scope-table__origin-line {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.scope-table__origin-artifact {
  color: var(--color-text-subtle);
}