/* it-80.3.4 config version card — the shared read-only-JSON + version-picker chrome for
   every los_module_configs surface (staff console LOS tabs + company /encompass pages).
   Extracted from console.css so neither surface pulls the other's stylesheet.

   A read-only JSON box; a flex metadata row BELOW it (status + created/activated); a
   dropdown views any version, Apply promotes it, Edit reveals the editor (paste-JSON
   textarea for raw kinds, the form builder for structured kinds). Flex throughout —
   no absolute/box-model tricks. */
.version-view { display: flex; flex-direction: column; gap: 1rem; }

/* Human-readable config summary (the default read-only view; raw JSON is collapsed at the
   foot of the card). Built from the house design system: .section-grid + .field for the
   scalar facts (label above value, like the contact/detail pages), the house .table for the
   collections (synced fields, mapping pairs, ordered milestones) so they stay scannable +
   scale to many rows, and .count-pill on each collection head. */
.version-summary { display: flex; flex-direction: column; gap: 1rem; }
.version-summary__coll { display: flex; flex-direction: column; gap: 0.35rem; }
.version-summary__coll-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.version-summary__empty { margin: 0.25rem 0.5rem; color: var(--md-sys-color-on-surface-variant); }
.version-summary code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }
/* Generic fallback (raw/console kinds): a nested label/value list for deeper structures. */
.version-summary__dl { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.version-summary__row { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: 0.75rem; align-items: baseline; }
.version-summary__row > dt { font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.version-summary__row > dd { margin: 0; }
.version-summary__list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; }

/* Raw JSON is secondary — collapsed at the foot of the card, for debugging. */
.version-json { border: 1px solid var(--md-sys-color-outline-variant); border-radius: 8px; padding: 0.25rem 0.5rem; }
.version-json > summary { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font-size: 0.8rem; color: var(--md-sys-color-on-surface-variant); user-select: none; }
.version-json > summary .material-symbols-rounded { font-size: 18px; }
.version-json[open] > summary { margin-bottom: 0.5rem; }
.version-json .version-view__doc { border: 0; padding: 0.5rem; }

.version-view__doc {
  margin: 0;
  padding: 1rem;
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  max-height: 22rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
}

/* Support-facing shape reference above the raw editor (synced-fields). */
/* Collapsible support-facing shape reference (collapsed by default so it never reads as the
   actual config). */
.version-example { border: 1px solid var(--md-sys-color-outline-variant); border-radius: 8px; padding: 0.25rem 0.5rem; margin-bottom: 0.75rem; }
.version-example > summary { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font-size: 0.8rem; color: var(--md-sys-color-on-surface-variant); user-select: none; }
.version-example > summary .material-symbols-rounded { font-size: 18px; }
.version-example[open] > summary { margin-bottom: 0.5rem; }
.version-example .muted { margin: 0 0 0.5rem; }
.version-example .muted code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }
/* it-80.4a — the example shape reference still uses the house .segmented-control (a <button>
   variant, so no stray form fields + no JS pill inside the collapsed details). */
.version-example .segmented-control { margin-bottom: 0.6rem; }
.version-example button.segmented-control__item {
  appearance: none;
  -webkit-appearance: none;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  font: inherit;
  color: inherit;
}
.version-example .segmented-control__item:last-child { border-right: 0; }
.version-example__doc {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--md-sys-color-surface-container-low);
  border: 1px dashed var(--md-sys-color-outline-variant);
  border-radius: 8px;
  overflow: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  color: var(--md-sys-color-on-surface-variant);
}
/* A uniform list-of-objects fragment (synced fields, people & roles) renders as a house
   .float-table instead of stacked dls — far easier to scan. */
.version-summary__table { width: 100%; }
/* Denser than the house default: a synced-fields list runs to dozens of rows. First column is
   the id (Fields.NNN), so it reads as code. */
.version-summary__table .table thead th { padding-top: 10px; padding-bottom: 10px; }
.version-summary__table .table tbody td { padding-top: 9px; padding-bottom: 9px; }
.version-summary__table .table tbody td:first-child { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; }
/* The version toolbar: controls row, then one muted provenance line for the selected version
   ("Created … by … · Activated … by …"), tight under it so the two read as one block. */
.version-toolbar { display: flex; flex-direction: column; gap: 0.4rem; }
.version-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  font-size: 0.8rem;
  color: var(--md-sys-color-on-surface-variant);
}
.version-meta__line { line-height: 1.3; }
.version-meta__line + .version-meta__line::before { content: "·"; margin-right: 0.5rem; }
.version-status { font-weight: 600; }
.version-status--active { color: var(--chart-ok); }
.version-status--inactive { color: var(--md-sys-color-error); }
.version-error { color: var(--md-sys-color-error); margin: 0.25rem 0 0; font-size: 0.85rem; }
/* Version browse group (dropdown + Apply) on the left; Edit pushed to the right so it
   reads as its own action, not part of the version selector. */
.version-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; }
.version-browse { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.version-browse md-outlined-select { max-width: 22rem; }
/* First-version affordance (no versions yet) — the lone Add button. */
.version-add { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
/* it-80.4a.1 — the synced-fields baseline guard: a warning chip naming the platform-read
   fields the current doc lacks + the one-click repair. Wraps on narrow cards. */
.version-baseline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.version-baseline .chip { display: inline-flex; align-items: flex-start; gap: 0.35rem; white-space: normal; } /* names a dozen ids on a fresh account: must wrap, not clip at the card edge */
.version-baseline .material-symbols-rounded { font-size: 1.1rem; }
/* Milestone catalog (it-80.5.2; restyled it-80.5.2 polish), on the staff-console LosAccount page.
   The names render in the house .table (full width, dividers, hover — the same component as the
   bound-companies table two tabs over) instead of a 28rem-capped divider list that left 60% of
   the card empty. In version-card.css because the console loads it (not the company-only
   encompass.css). Heading = title + count badge; meta = icon + relative synced time. */
.los-catalog__heading { display: flex; align-items: center; gap: 0.625rem; }
.los-catalog__table { margin-top: 0.25rem; }
/* Two-column catalogs split 50/50 (Aldo, 2026-09-23): the live TEBE catalog showed the id column is
   GUIDs for custom milestones, not the single digits the 12rem column was sized for, and they wrapped
   mid-id. Fixed layout sizes columns from the header row alone (equal, no widths set), so the
   last-child rule above does not apply here. The three-column catalogs keep the narrow last column. */
.los-catalog__table--halves { table-layout: fixed; }
/* Value dictionary (it-80.13; reshaped 2026-09-23, Aldo): one <tbody> per field, one <tr> per spelling,
   the field cell rowspanned — ONE table, so the sends / arrow / stores columns align across every
   field (nested per-field tables aligned only within a field). The group is the unit the house table
   treats as a row: it hovers as one and is divided from the next group by one line; the lines inside
   a group are a hair apart. Sends and arrow shrink to their content (the 1% + nowrap idiom) so the
   stored label takes the rest of the width instead of the arrow drifting right. */
.los-catalog__table--grouped th:first-child { width: 30%; }
.table.los-catalog__table--grouped tbody tr:hover { background: transparent; } /* outranks tables.css's row hover whatever the load order */
.los-catalog__table--grouped tbody:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 4%, transparent); }
.los-catalog__table--grouped tbody td { border-bottom: 0; padding-top: 0.125rem; padding-bottom: 0.125rem; }
.los-catalog__table--grouped tbody tr:first-child td { padding-top: 0.75rem; }
.los-catalog__table--grouped tbody tr:last-child td { padding-bottom: 0.75rem; }
.los-catalog__table--grouped tbody td[rowspan] { padding-bottom: 0.75rem; } /* the spanning field cell: same inset top and bottom, so its centred content sits centred */
.los-catalog__table--grouped tbody + tbody tr:first-child td { border-top: 1px solid var(--md-sys-color-outline-variant); }
.los-catalog__table--grouped .los-pairs__sends, .los-catalog__table--grouped .los-pairs__arrow { width: 1%; white-space: nowrap; }
.los-catalog__table--grouped .los-pairs__sends { padding-right: 0.5rem; }
.los-catalog__table--grouped .los-pairs__arrow { padding-left: 0; padding-right: 0.5rem; color: var(--md-sys-color-on-surface-variant); }
.los-catalog__table--grouped .los-pairs__stores { padding-left: 0; }
.los-catalog__meta { display: flex; align-items: center; gap: 0.35rem; margin: 1rem 0 0; font-size: 0.8125rem; }
.los-catalog__meta .material-symbols-rounded { font-size: 1.1rem; }
/* Empty state: centered glyph + line, sized to content (no fixed height, no scroll). */
.los-catalog__empty { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 1.25rem 0 0.5rem; }
.los-catalog__empty .material-symbols-rounded { font-size: 2rem; color: var(--md-sys-color-on-surface-variant); }
.los-catalog__empty p { margin: 0; }
/* A standalone editor field (e.g. the "Version name" input) — its own row, spaced from the
   control above and the Save row below. */
.version-field { margin-top: 1rem; }
.version-field md-outlined-text-field { width: 100%; max-width: 22rem; }
/* The Edit form's Save/Cancel row (shared by console + company; console.css's own
   .console-form-actions isn't loaded on company pages). */
.version-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }

/* it-80.8 — the two role designations, above the pair grid. Side by side so they read as one
 * "which column means what" step, stacking on a narrow viewport. */
.enc-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}