/* Shared three-area artefact workspace. Feature sheets style their content; this sheet owns only the frame. */
.artifact-workspace {
  /* The fallback of the pixel width, and only that: the frame always carries the real one inline
     (`--artifact-workspace-scope-width: {n}px`, `ArtifactWorkspace.WorkspaceStyle`). It follows `DefaultScopeWidth`. */
  --artifact-workspace-scope-width: 480px;
  /* **Sixty for the artefact and forty for the Scope Builder**, which is the split the owner ordered on 2026-09-27: the
     left column carries the AI Suggestion proposals at the top and the items of the artefact below, and the Scope
     Builder takes the remaining forty. It was **seventy/thirty** until then, by his own decision of 2026-09-25 — «son
     dos columnas, 1 izquierda 70% del espacio que disponemos ahí están las sugerencias y descartes de AI Suggestion y
     más abajo los items del artefacto, al lado derecho 30% para ScopeBuilder» — and that earlier share stays said here
     because it is the one the older notes and captures describe. The floor of 320px stays: the share may not squeeze
     the Scope Builder under the width its own content needs. The pixel width a person drags out of the separator is
     used only **once they have dragged it**, which is what the `--scope-resized` class below says: until then the column
     is a share of the width the frame really has (`DEC-061`).
     **Wide screens only.** This token is read by the `min-width: 1200px` block alone, so the middle band (768–1199px)
     keeps the single column and the stacked panels it had: the forty per cent is not a share that band ever splits. */
  --artifact-workspace-scope-column: minmax(320px, 40%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  min-width: 0;
  min-height: 0;
}

/* A width the person chose, and not the default split: from here on the column is the pixels the separator left. Without
   this class the frame ignores the pixel width, which is what makes forty per cent the shape of the screen rather than
   a number that only fits the window the preference was written in. */
.artifact-workspace--scope-resized {
  --artifact-workspace-scope-column: var(--artifact-workspace-scope-width);
}

.artifact-workspace__tabs {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 2;
  gap: var(--space-2xs);
  overflow-x: auto;
  padding: var(--space-2xs);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  overscroll-behavior-x: contain;
}

.artifact-workspace__tab,
.artifact-workspace__panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--control-height);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.artifact-workspace__panel-toggle {
  display: none;
}

.artifact-workspace__tab:hover,
.artifact-workspace__panel-toggle:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.artifact-workspace__tab[aria-selected="true"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-strong);
}

.artifact-workspace__tab:focus-visible,
.artifact-workspace__panel-toggle:focus-visible,
.artifact-workspace__separator:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.artifact-workspace__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0 var(--space-2xs);
  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;
}

.artifact-workspace__tab[aria-selected="true"] .artifact-workspace__count {
  background: var(--color-surface);
  color: var(--color-primary-strong);
}

.artifact-workspace__panel {
  display: none;
  min-width: 0;
  min-height: 0;
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

.artifact-workspace__panel--selected {
  display: flex;
  flex-direction: column;
}

.artifact-workspace__panel-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: 48px;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-surface);
  border-bottom: var(--border-default);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.artifact-workspace__panel-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* The one row of acts of the content area used to live here — `.artifact-workspace__content-actions`, drawn by the
   `ContentActions` fragment — and it is gone with the fragment. The owner moved the artefact's «Add …» button into the
   listing itself on 2026-09-27, so the row above the list — and the CSS that positions it — belongs to
   `ArtifactView` (`.artifact-view__toolbar`, `collections.css`), and the artefact's act is drawn there. */

.artifact-workspace__panel--suggestions .artifact-workspace__panel-heading {
  color: var(--color-primary-strong);
}

.artifact-workspace__panel--scope .artifact-workspace__panel-heading {
  color: var(--color-secondary-strong);
}

/* The body of any of the three areas, and the one place the size of their content is decided.
   The item text of a card, the cells of a table, the wording of an AI proposal and the sentences of the Scope Builder
   used to inherit the body size of the application (16px), which put the content of an artefact one step above the
   labels that describe it. The owner asked on 2026-09-24 for that content to come down one step — «reducirle 2px o un
   tamaño menos» — and this is the shared point the four views have in common: the collection (its cards and its table),
   the AI suggestions and the Scope Builder.
   What it does **not** change: the labels, counts, figures and tabs of those areas declare their own size (14px) and
   keep it, the titles of a card or of an empty state keep theirs (17 and 20px), and the dialogs are outside the
   workspace and are untouched. One step and not a literal, so the whole family moves together the day the scale does. */
.artifact-workspace__panel-body {
  min-width: 0;
  padding: var(--space-md);
  font-size: var(--font-size-sm);
}

/* **The list of an artefact — cards or table, whichever view is in force — scrolls inside its own area, at every
   width.** It is the region the owner asked for on 2026-09-25 (`DEC-062`) and the one he had to be able to move with the
   wheel inside it on 2026-09-27: while this only applied from 1200px wide, a narrower window left the page as the
   scroller, so the wheel over the list moved the screen and the list itself could only be moved by dragging the bar at
   the edge of the window. The cap is one token (`--artifact-scroll-max-height`), so the whole family moves together the
   day the height does, and `overscroll-behavior: contain` is what stops the wheel at the end of the list instead of
   handing it to the page.

   The two regions are still the only ones (`DEC-060` keeps the proposals of a run pushing the items down, and the
   Scope Builder has its own bar): what changed is that the list no longer waits for a wide window to have one. */
.artifact-scroll {
  max-height: var(--artifact-scroll-max-height);
  overflow-y: auto;
  /* **The wheel is never dead here.** It was `overscroll-behavior: contain`, which stops the scroll at the end of the
     list instead of handing it on — and with a list whose content fits under the cap there is nothing to move, so the
     wheel did nothing at all and the screen could only be moved from its own bar. The owner reported exactly that on
     2026-09-27, and handing the wheel on when the list has nothing left is what a person expects.
     It is the **window** that scrolls, as it always did: the frame of the application was left alone after the attempt
     to pin the bar broke the whole shell (see `HANDOFF-UI.md` §3.33). */
  overscroll-behavior: auto;
  /* Firefox's own two properties, and the `::-webkit-scrollbar` rules below for the engines that ignore them. Both
     read the same four tokens, so the two areas draw one bar and not two. */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* **La columna del Scope Builder crece con su contenido.** El tope compartido de arriba —el de la lista del
   artefacto— la dejaba parada a dos tercios de la ventana, y lo que la sección añade después (las tarjetas de un
   análisis y la lista de descartes) caía por debajo del pliegue de su propia caja: el dueño lo reportó el 2026-09-27
   («a medida que crece … se va acortando hacia abajo … ¿que crezca de forma progresiva?»). Su caja puede crecer hasta
   lo que la ventana da por debajo de lo que lleva encima, y **el tope de la lista del artefacto no se toca**:
   `--artifact-scroll-max-height` sigue siendo suyo. */
.artifact-workspace__panel--scope .artifact-scroll {
  max-height: var(--artifact-scope-max-height);
}
.artifact-scroll::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.artifact-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--radius-sm);
}

.artifact-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-sm);
}

.artifact-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.artifact-workspace__separator {
  display: none;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .artifact-workspace {
    min-height: 28rem;
  }

  .artifact-workspace__panel--selected {
    min-height: 0;
    max-height: calc(100dvh - 16rem);
  }

  .artifact-workspace__panel-body {
    overflow: auto;
  }
}

@media (min-width: 1200px) {
  /* Every row of the frame is **as tall as what it holds**, and the frame no longer pins itself to the viewport. The
     owner, on 2026-09-25: «el contenido y ese componente usa un scroll… evitar el uso del scroll; si presionamos para
     consultar las sugerencias el contenido se debe poder ver todo empujando el contenido de los items del artefacto
     hacia abajo, sin usar scroll». Until then the proposals were a strip of `min(34%, 18rem)` with their own scrollbar
     inside it, which is what made a run unreadable on a laptop; what scrolls now is the page, and the frame only keeps
     its floor of 28rem (`DEC-061`). */
  .artifact-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 28rem;
  }

  .artifact-workspace--has-suggestions {
    grid-template-rows: auto auto;
  }

  .artifact-workspace--has-scope {
    grid-template-columns: minmax(0, 1fr) 12px var(--artifact-workspace-scope-column);
  }

  .artifact-workspace--has-scope.artifact-workspace--scope-collapsed {
    grid-template-columns: minmax(0, 1fr) 0 52px;
  }

  .artifact-workspace__tabs {
    display: none;
  }

  .artifact-workspace__panel-toggle {
    display: inline-flex;
  }

  .artifact-workspace__panel,
  .artifact-workspace__panel--selected {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .artifact-workspace__panel--suggestions {
    grid-column: 1;
    grid-row: 1;
  }

  .artifact-workspace__panel--content {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .artifact-workspace--has-suggestions .artifact-workspace__panel--content {
    grid-row: 2;
  }

  .artifact-workspace__panel--scope {
    grid-column: 3;
    grid-row: 1 / -1;
    /* The column no longer stretches to the tallest of the two rows: its body is capped (`--artifact-scroll-max-height`,
       `DEC-062`), so a stretched panel would draw its border far below the end of its own list. It is a card as tall as
       what it holds, or as tall as the cap it scrolls under. */
    align-self: start;
  }

  .artifact-workspace__panel-body {
    flex: 1 1 auto;
    /* A wide table still scrolls sideways inside its own panel, and **nothing scrolls up and down here**: with a row as
       tall as its content there is nothing to scroll, and the two properties that only made sense with a pinned height —
       the stable gutter and the contained overscroll — are gone with it (`DEC-061`). */
    overflow: auto;
  }

  /* **The two regions of an artefact that scroll inside their own area**, with the bar of the app (`--scrollbar-*`): the
     items of the artefact — cards or table, whichever view is in force — and the Scope Builder. The owner asked for both
     on 2026-09-25: «vamos a ponerle a Scopebuilder un scroll que tenga estilos así como la app y al listado de los items
     del artefacto también ponerle scroll con estilos de la app» (`DEC-062`).
     They are the only two: the proposals of a run still push the items down instead of scrolling (`DEC-060`), and what is
     left over is the page, which scrolls as a page.

     **The rule itself lives outside this breakpoint** — at the foot of the sheet — because capping the list only from
     1200px wide was read as «the list has no scroll»: the owner, on 2026-09-27, in a window narrower than that:
     «estoy en vista card o tabla que no tiene scroll y para que se mueva tengo que mover el ratón al borde derecho de la
     pantalla… pero si card o tabla tienen bien programado el scroll y ya estoy con el ratón dentro de ese componente se
     scrollean». The bar of the app is pinned at every width, so the list is the scroller at every width too. */
  .artifact-workspace__separator {
    display: flex;
    grid-column: 2;
    grid-row: 1 / -1;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    border-radius: var(--radius-sm);
    cursor: col-resize;
    touch-action: none;
  }

  .artifact-workspace__separator:hover,
  .artifact-workspace__separator:focus-visible {
    background: var(--color-primary-soft);
  }

  .artifact-workspace__separator-grip {
    width: 2px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-border-strong);
  }

  .artifact-workspace--suggestions-collapsed {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .artifact-workspace--suggestions-collapsed .artifact-workspace__panel--suggestions .artifact-workspace__panel-body,
  /* **A card is 25% of the content, or a third of it while the scope column is on screen.** With the column drawn the
   content keeps 60% of the width and four cards would be unreadable; hidden, the content takes the whole width and the
   four come back. */
.artifact-workspace--has-scope:not(.artifact-workspace--scope-collapsed) .collection-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.artifact-workspace--scope-collapsed .artifact-workspace__panel--scope .artifact-workspace__panel-body {
    display: none;
  }

  .artifact-workspace--suggestions-collapsed .artifact-workspace__panel--suggestions {
    border-radius: var(--radius-lg);
  }

  .artifact-workspace--suggestions-collapsed .artifact-workspace__panel--suggestions .artifact-workspace__panel-header {
    border-bottom: 0;
    border-radius: var(--radius-lg);
  }

  .artifact-workspace--scope-collapsed .artifact-workspace__separator {
    visibility: hidden;
  }

  .artifact-workspace--scope-collapsed .artifact-workspace__panel--scope .artifact-workspace__panel-header {
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-xs) var(--space-2xs);
    border-bottom: 0;
    border-radius: var(--radius-lg);
  }

  .artifact-workspace--scope-collapsed .artifact-workspace__panel--scope .artifact-workspace__panel-heading {
    flex-direction: column;
  }

  .artifact-workspace--scope-collapsed .artifact-workspace__scope-label,
  .artifact-workspace--scope-collapsed .artifact-workspace__panel--scope .artifact-workspace__count,
  .artifact-workspace--scope-collapsed .artifact-workspace__toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .artifact-workspace--scope-collapsed .artifact-workspace__panel-toggle {
    width: 40px;
    padding-inline: 0;
  }
}

@media (max-width: 767px) {
  .artifact-workspace {
    display: flex;
    flex-direction: column;
  }

  .artifact-workspace__tabs {
    margin-inline: calc(var(--layout-content-padding) * -1);
    padding-inline: var(--layout-content-padding);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .artifact-workspace__tab {
    min-height: 44px;
  }

  .artifact-workspace__panel {
    border-radius: var(--radius-lg);
  }

  .artifact-workspace__panel-header {
    min-height: 52px;
  }

  .artifact-workspace__panel-body {
    overflow: visible;
    padding: var(--space-sm);
  }
}

.artifact-workspace-resizing,
.artifact-workspace-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .artifact-workspace__tab,
  .artifact-workspace__panel-toggle,
  .artifact-workspace__separator {
    transition:
      color var(--duration-fast) var(--easing-standard),
      background-color var(--duration-fast) var(--easing-standard),
      border-color var(--duration-fast) var(--easing-standard);
  }
}

/* ---- The Scope Builder of every artefact (Components/Scope/ScopeBuilderSection.razor) ---- */
.scope-builder {
  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-builder__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.scope-builder__title {
  margin: 0;
  font-size: var(--font-size-lg);
}

.scope-builder__badge {
  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);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.scope-builder__subtitle {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-md);
}

.scope-builder__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

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

/* The text of one expectation of the section: what it says, which is also its derived title. */
.scope-builder__text {
  margin: 0;
}

/* The lists of the section, in the order it draws them: the approved inclusions this artefact contributed — the list
   under «From these expectations», which is the owner's order of the 2026-09-27 review — the expectations that still ask
   for an act, the notes of the acts, and the two collections of the history (the acceptances and the refusals), which
   are the decisions and never the scope list repeated. */
.scope-builder__contributions,
.scope-builder__items,
.scope-builder__notes,
.scope-builder__discarded,
.scope-builder__decisions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One row of any of those lists: the inclusion of the scope with the reference the server stamped on it, an expectation
   with its state, or a decision of the history. */
.scope-builder__contribution,
.scope-builder__item,
.scope-builder__decision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

/* The reference the server stamped on an inclusion when the command wrote it (`SE-n`), drawn as it arrived. */
.scope-builder__ref {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

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

/* A row that cannot be analysed says why instead of offering a button that would do nothing. */
.scope-builder__state {
  margin-left: auto;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

/* The proposals of the Scope Builder, **one stacked row per analysis**. It was a table and a sentence does not fit a
   column: the owner reported a verdict he could not read against what it claimed. Every line of a row therefore takes
   the whole width available and the buttons close the row, which is where they have always been. */
.scope-builder__proposals {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.scope-builder__caption {
  margin: 0;
  padding-bottom: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.scope-builder__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

/* Each line is a paragraph of the row and not of the document: the margins the base stylesheet gives a paragraph are
   removed here, so the only spacing between the lines is the row's own gap. */
.scope-builder__row > p {
  margin: 0;
}

.scope-builder__row:hover {
  background: var(--color-surface-muted);
}

/* The proof of a judgement: the reference of the approved inclusion the analysis cites and the criterion it says that
   inclusion already meets. It is drawn apart from the verdict because it is what the verdict is checked against. */
.scope-builder__proof {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.scope-builder__proof-line {
  margin: 0;
}

.scope-builder__warning {
  margin-top: var(--space-3xs);
  color: var(--color-error-strong);
  font-size: var(--font-size-sm);
}

/* **The phrase of a proposal, editable in the card itself.** It goes into the shared field that carries the inline
   translation (`Components/Definitions/DefinitionField`, its own look belongs to `forms.css`) and is drawn as a line of
   the row: the wording on screen is the one the acceptance writes, which is the act the original application drew at
   `ScopeBuilderDock.tsx:736-772`. The two buttons of the decision close the row below it, in the actions line every card
   of the section has. The block that draws it is the Scope Builder's own and is shared by every artefact that draws the
   section: `.scope-builder__wording`, in `artifact-workspace.css`, together with the rule that keeps the whole phrase
   visible instead of scrolled. */

.scope-builder__context {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

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

/* **The phrase of a Scope Builder proposal is never cut off, and never scrolled.** The box the analysis recommends is
   longer than the three rows the shared field is given, so the rest of it would live inside the box and would have to be
   scrolled — the owner reported it with the application in front of him: «el cajón de texto no lo alcanza a mostrar todo
   … de alguna forma mostrar todo ese texto para no estar scrolleando». The field therefore sizes itself to its own text,
   which is what the original application did (`pmi-client/src/shared/components/AutoGrowTextarea.tsx`: «crece
   automáticamente con el contenido (sin scroll interno)»).
   **It belongs to the Scope Builder and not to the artefact that draws it**, because the nine artefact screens share one
   look, one size and one organisation and only their information, their lists and their methods differ. Its floor is the
   one the shared field already declares (`min-height`), so a short phrase keeps the height it has today.
   The rule sits behind `@supports` on purpose — a browser that does not know `field-sizing` keeps the field exactly as it
   is today, with its three rows and its scrollbar, instead of losing the handle that reaches the rest of the text. */
.scope-builder__wording {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

@supports (field-sizing: content) {
  .scope-builder__wording .definition-field__input {
    field-sizing: content;
    resize: none;
  }
}

/* Scope Builder history is shared by Scope panels but does not own any domain actions or records. */

/* The pending badge of the content tab: how many items of the artefact still owe their definition, counted by the
   server. It sits next to the count of items and wears the accent colour, because it is the one number of the two
   that asks for work. It is drawn only while the artefact is read inside the walk. */
.artifact-workspace__pending {
  min-width: 1.25rem;
  margin-left: var(--space-2xs);
  padding: 0 var(--space-3xs);
  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-xs);
  line-height: var(--line-height-snug);
}