/* it-80.3.3 — company-side Encompass settings.

   Field mapping is a form, laid out with flexbox (not a table): a header row + one flex
   row per custom field — the field name/type on the left, the role md-outlined-select on
   the right in a fixed column. Real vertical padding so rows aren't squished against the
   56px control. (The --space-* scale isn't defined as tokens in this app — only ever used
   with fallbacks — so this uses explicit rem values.) */
.enc-map {
  display: flex;
  flex-direction: column;
}

.enc-map__head,
.enc-map__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.enc-map__head {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}

.enc-map__row {
  padding: 1rem 0;
}

/* Left column grows; the role column is a fixed width shared by header + rows. */
.enc-map__field,
.enc-map__head-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.enc-map__name {
  font-weight: 500;
}

.enc-map__control,
.enc-map__head-role {
  flex: 0 0 20rem;
}
.enc-map__control md-outlined-select {
  width: 100%;
}
.enc-map__control .autocomplete,
.enc-map__control .autocomplete md-outlined-text-field,
.enc-map__field > .autocomplete,
.enc-map__field > .autocomplete md-outlined-text-field,
.field-input > .autocomplete,
.field-input > .autocomplete md-outlined-text-field {
  width: 100%;
}

/* Ordered-milestones editor (it-80.5.2) — reuses the field-mapping row rhythm: the
   milestone-name autocomplete grows (.enc-map__field), then a fixed order column + a remove
   button, with a centered "Add milestone" as the final row that grows the list by one. */
.enc-ms__order,
.enc-ms__head-order {
  flex: 0 0 8rem;
}
.enc-ms__order md-outlined-text-field {
  width: 100%;
}
.enc-ms__remove,
.enc-ms__head-remove {
  flex: 0 0 2.5rem;
  display: flex;
  justify-content: center;
}
.enc-ms__add-row {
  justify-content: center;
}

/* The Custom Object the mapping populates — the section anchor, made prominent. */
.enc-map-object {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.25rem;
}
.enc-map-object__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.enc-map-object__name {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--md-sys-color-on-surface);
}

/* it-80.12.1 — read-only mapping summary. The pairs render as the house .table so each
   row is actually separated; the previous flex list set "no dividers" on purpose and the
   result was that the meat (which object field gets which Encompass tag) blurred into the
   potatoes. The two ROLE DESIGNATIONS are no longer rows here at all — they are labelled
   settings above the table, mirroring what it-80.8 did to the editor's grid. */
.enc-maptable { margin-top: 0.25rem; }
.enc-maptable td { vertical-align: middle; }
/* The Encompass tag's human name is supporting text, not a peer of the tag itself. */
.enc-maptable__name {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.85rem;
}
/* Keep the target field and its tag tight and adjacent — the pair is the thing being read.
   The trailing human-name column absorbs the slack; without this the target drifts to the
   far left of a wide card and the eye has to travel to pair it with its tag. */
.enc-maptable th:not(:last-child), .enc-maptable td:not(:last-child) { width: 1%; white-space: nowrap; }

.enc-pill {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
/* .enc-chip--pseudo tags a pseudo-milestone in the order picker (base .chip carries no
 * colour of its own — chips.css owns shape/spacing). */
.enc-chip--pseudo {
  margin-left: auto;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
/* it-80.13 — what the value dictionary does to a field, on its picker row and its resting token:
   "values translated" (the map in the house .tip on hover) and "same as Fields.N". The same tonal
   chip as the pseudo marker above: a fact about the row, not a state (REVIEW 13-M2). */
.enc-chip--dict {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* Ordered milestones as a flow (Aldo 2026-09-23): a vertical line of numbered steps. The number is
   the workflow order the config gives the milestone, and every milestone that shares a number sits
   on the same step, so a tie reads as "same plane" instead of a repeated digit in a table column.
   Read-only summary of the company milestones card only; the order builder (Edit) is untouched.
   House pieces: the .chip shape for the names, the primary (dark purple, white digit) for the
   bubbles, outline-variant for the line; the list is indented under its heading. The bubble's ring
   in the card's surface colour makes the line read as passing behind it. */
.enc-flow { --enc-flow-bubble: 2.25rem; --enc-flow-gap: 0.75rem; list-style: none; margin: 0.25rem 0 0 1rem; padding: 0; position: relative; }
.enc-flow::before {
  content: "";
  position: absolute;
  top: calc(var(--enc-flow-gap) + var(--enc-flow-bubble) / 2);
  bottom: calc(var(--enc-flow-gap) + var(--enc-flow-bubble) / 2);
  left: calc(var(--enc-flow-bubble) / 2 - 1px);
  width: 2px;
  background: var(--md-sys-color-outline-variant);
}
.enc-flow__step { position: relative; display: flex; align-items: center; gap: 1rem; padding: var(--enc-flow-gap) 0; }
.enc-flow__num {
  flex: 0 0 var(--enc-flow-bubble);
  width: var(--enc-flow-bubble);
  height: var(--enc-flow-bubble);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--md-sys-color-surface);
}
.enc-flow__names { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.enc-flow__name {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
}

/* Encompass-field autocomplete item: human name + raw id + a format chip. */
.fieldopt {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fieldopt__name {
  font-weight: 500;
}
.fieldopt__id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  color: var(--md-sys-color-on-surface-variant);
}
.fieldopt__fmt {
  margin-left: auto;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

/* it-80.4c.1a — the From-rule key pickers. A shadow's key list is long and its entries carry two
   identifiers: the human name, and the field id that disambiguates the names that repeat. Side by side
   (the console's layout, where the lists are short) they compete for one row and a long name pushes the
   id out of alignment; stacked, the eye scans names down one edge and drops to the id only when two
   names look alike. A modifier on .fieldopt rather than a change to it — the console wants the row form. */
.fieldopt--stacked { flex-direction: column; align-items: flex-start; gap: 0; }

/* it-80.12.3 — a committed Encompass-field selection rests as a TOKEN, not as text in an
   input. Aldo: the selection should "feel more like a selection that includes the field id
   rather than looking like a freeform text". Sized to match the text field it replaces so
   the row does not jump when the picker closes. */
.fieldtoken {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
  background: var(--md-sys-color-surface);
  cursor: pointer;
}
.fieldtoken:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 4%, transparent); }
.fieldtoken:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 1px; }
.fieldtoken__body {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  /* One line: the name truncates rather than pushing the id or the format onto a second
     row, which made the token taller than the input it replaces and the rows uneven. */
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}
.fieldtoken__name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fieldtoken__id, .fieldtoken__fmt, .fieldtoken__warn { flex: 0 0 auto; white-space: nowrap; }
/* The id is the machine fact — monospace, tinted, same treatment it gets everywhere else
   in this section so one field id looks like itself on every page. */
.fieldtoken__id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.fieldtoken__fmt {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
/* A stored field the account no longer syncs: it still populates nothing, so say so here
   rather than letting it read as an ordinary selection. */
.fieldtoken--unknown { border-color: var(--md-sys-color-error); }
.fieldtoken--unknown .fieldtoken__id {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.fieldtoken__warn { font-size: 0.75rem; color: var(--md-sys-color-error); }
.fieldtoken__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--md-sys-color-on-surface-variant);
}
.fieldtoken__clear:hover { background: var(--md-sys-color-surface-container-high); }
.fieldtoken__clear .material-symbols-rounded { font-size: 18px; }