/* 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), .float-table for the
   collections (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;
}
/* Raw-JSON kinds (it-80.5.2): the config shown AS a tall, collapsible, syntax-highlighted
   code block — replaces the generic key/value summary + the separate Raw JSON details. */
.version-code { border: 1px solid var(--md-sys-color-outline-variant); border-radius: 8px; padding: 0.25rem 0.5rem; }
.version-code > 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-code > summary .material-symbols-rounded { font-size: 18px; }
.version-code[open] > summary { margin-bottom: 0.5rem; }
.version-code__pre { max-height: 32rem; } /* taller than the base doc box */
.version-code__pre code { font-family: inherit; }
/* JSON token colours (theme-aware). */
.version-view__doc .tok-key { color: var(--md-sys-color-primary); }
.version-view__doc .tok-str { color: var(--md-sys-color-tertiary); }
.version-view__doc .tok-num { color: var(--md-sys-color-secondary); }
.version-view__doc .tok-bool { color: var(--md-sys-color-error); font-weight: 600; }
.version-view__doc .tok-null { color: var(--md-sys-color-on-surface-variant); font-style: italic; }

/* 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 .hint { margin: 0 0 0.5rem; }
.version-example .hint 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; }
/* The Friendly ⟷ Raw toggle is the house .tabbar (pill-slide); just space it from the editor. */
.ft-mode__tabs { margin-bottom: 0.6rem; }

/* it-80.4a — the chip editor: a contenteditable JSON surface where reference tokens
   (field ids / tag ids / pseudo-milestone names) render as labeled pills. */
.ft-chip-editor,
.ft-chip-view {
  padding: 0.75rem 1rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ft-chip-editor { min-height: 220px; border-color: var(--md-sys-color-outline); overflow-y: auto; }
.ft-chip-editor:focus { outline: 2px solid var(--md-sys-color-primary); outline-offset: -1px; }
/* read-only chips (SHOW view): display-only — no click affordance */
.ft-chip-view .ft-chip { cursor: default; }
.ft-chip-view .ft-chip__caret { display: none; }
.ft-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.02rem 0.2rem 0.02rem 0.35rem;
  margin: 0 1px;
  border-radius: 9999px;
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  vertical-align: baseline;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  /* enums (relation / format / value) default to a neutral pill; references get a colour */
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
}
.ft-chip:hover { filter: brightness(0.96); }
.ft-chip__ico { font-size: 14px; }
.ft-chip__caret { font-size: 16px; opacity: 0.7; }
.ft-chip--field { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.ft-chip--tag { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.ft-chip--milestone { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.ft-mode__err { margin: 0.35rem 0 0; color: var(--md-sys-color-error); font-size: 0.85rem; }

/* The swap popover (click a chip): reuses the .mf-ac surface shell + a filter input. Grows to
   fit its widest option (no horizontal scroll), capped at a sane max where labels ellipsize. */
.ft-swap.mf-ac { width: max-content; min-width: 200px; max-width: min(90vw, 560px); padding: 0.35rem; z-index: 1200; }
.ft-swap__filter {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: inherit;
  font-size: 0.85rem;
}
.ft-swap__list { max-height: 260px; overflow-y: auto; overflow-x: hidden; }
/* Group the label + id to the left with a gap (not stretched apart) so the row width is just
   its content — that's what width:max-content sizes the popover to. */
.ft-swap .mf-ac__row { justify-content: flex-start; gap: 1.25rem; }
.ft-swap .mf-ac__row.is-current { background: var(--md-sys-color-secondary-container); }
.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%; }
.version-summary__table .float-table thead th { padding-top: 10px; padding-bottom: 10px; }
.version-summary__table .float-table tbody td { padding-top: 9px; padding-bottom: 9px; }
.version-summary__table .float-table tbody td:first-child { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; }
.version-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--md-sys-color-on-surface-variant);
}
.version-meta__line { line-height: 1.3; }
.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: center; gap: 0.35rem; }
.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; }
.los-catalog__table td:last-child { width: 12rem; }
.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; }