/* vcard-maker only: the four groups chosen at the top (T75-01), the open group's sections with the rest under More details,
   and its output beside the form (sticky on a wide screen, after the form on a phone). */
.vc-top { display: grid; gap: var(--matrix-space-12); min-width: 0; }
.vc-groups { border: 0; margin: 0; padding: 0; min-width: 0; }
.vc-groups > legend { font-weight: 600; padding: 0; margin-bottom: var(--matrix-space-8); }
.vc-group-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--matrix-space-8); }
.vc-group-option { display: flex; align-items: center; gap: var(--matrix-space-8); padding-left: var(--matrix-space-12); border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); min-width: 0; }
.vc-group-option > input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--matrix-brand); }
.vc-group-option > input:focus-visible { outline: none; }
.vc-group-option > label { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; padding: 6px var(--matrix-space-12) 6px 0; cursor: pointer; line-height: 1.3; overflow-wrap: anywhere; }
.vc-group-option:has(> input:checked) { border-color: var(--matrix-brand); background: var(--matrix-selected); color: var(--matrix-selected-text); font-weight: 600; }
.vc-group-option:has(> input:focus-visible) { outline: 2px solid var(--matrix-focus); outline-offset: 2px; }
.vc-start { display: grid; gap: var(--matrix-space-8); min-width: 0; }
.vc-cols { display: grid; gap: var(--matrix-space-16); }
.vc-form, .vc-shown, .vc-folded { display: grid; gap: var(--matrix-space-16); min-width: 0; }
.vc-details { border: 1px dashed var(--matrix-control-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-12) var(--matrix-space-16); min-width: 0; }
.vc-details > .vc-hint { margin-bottom: var(--matrix-space-12); }
.vc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); gap: var(--matrix-space-12); align-items: start; }
.vc-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12em), 1fr)); }
.vc-grid--work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-grid--work > :first-child { grid-column: 1 / -1; } /* an organisation's name is long: its own line, the department and the title under it */
.vc-stack { display: grid; gap: var(--matrix-space-8); min-width: 0; container: vc-list / inline-size; }
.vc-field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.vc-field > label { font-weight: 600; }
.vc-field--inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--matrix-space-12); }
.matrix-ui .vc-field--inline > .vc-num { width: 7rem; max-width: 100%; }
.vc-field input:not([type="color"]), .vc-field select, .vc-field textarea { width: 100%; box-sizing: border-box; min-width: 0; }
.matrix-ui .vc-field textarea { resize: vertical; font-family: inherit; line-height: 1.45; }
.vc-row { display: grid; grid-template-columns: minmax(7em, 10em) minmax(0, 1fr) auto; gap: var(--matrix-space-8); align-items: center; }
.vc-row > * { min-width: 0; }
.vc-sub { margin: var(--matrix-space-8) 0 0; font-size: 0.9375rem; }
.vc-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--matrix-space-4) var(--matrix-space-8); }
.vc-list-head > .vc-sub { margin: 0; }
.vc-section > .vc-list-head:not(:first-of-type) { margin-top: var(--matrix-space-8); }
.vc-hint { margin: 0; font-size: var(--matrix-type-caption); overflow-wrap: break-word; }
.vc-check label { flex: 1 1 12em; min-width: 0; }
.vc-check-hint { padding-left: 32px; }
.vc-bar { display: flex; flex-wrap: wrap; gap: var(--matrix-space-8) var(--matrix-space-12); align-items: end; }
.vc-open-label { display: inline-flex; align-items: center; min-height: var(--matrix-control-min-height); box-sizing: border-box; cursor: pointer; }
#vc-open.visually-hidden, #vc-photo-file.visually-hidden { width: 1px; } /* tools.css widens every file input in the options to 100% */
#vc-open:focus-visible + .vc-open-label, #vc-photo-file:focus-visible + .vc-open-label { outline: 2px solid var(--matrix-focus); outline-offset: 2px; }
.vc-small { padding: 4px 12px; min-height: 32px; font-size: var(--matrix-type-caption); }
.vc-more > summary { font-weight: 600; cursor: pointer; }
.vc-more[open] > summary { margin-bottom: var(--matrix-space-8); }
.vc-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 1px solid var(--matrix-border); }
.vc-colour { width: 4.5em; height: 2.5em; padding: 2px; border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); cursor: pointer; }
.matrix-ui .vc-field > .vc-num { max-width: 10em; }
.vc-jump { justify-self: start; font-size: var(--matrix-type-caption); }
.vc-aside { display: grid; gap: var(--matrix-space-12); padding: var(--matrix-space-12); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-panel); background: var(--matrix-surface-subtle); min-width: 0; align-content: start; }
.vc-out { display: grid; gap: var(--matrix-space-12); min-width: 0; }
.vc-title { margin: 0; font-size: 1rem; }
.vc-title:focus { outline: none; }
.vc-card { padding: var(--matrix-space-12); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); border: 1px solid var(--matrix-border); min-width: 0; }
.vc-card-name { margin: 0; font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; }
.vc-card-role { margin: 2px 0 6px; font-size: var(--matrix-type-caption); color: var(--matrix-muted); overflow-wrap: anywhere; }
.vc-card-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--matrix-type-caption); overflow-wrap: anywhere; }
.vc-checks { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-8) var(--matrix-space-12); background: var(--matrix-surface); }
.vc-list { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: var(--matrix-type-caption); overflow-wrap: anywhere; }
.vc-list:empty { display: none; }
.vc-canvas-box { display: grid; place-items: center; }
.vc-canvas { display: block; width: min(100%, 220px); height: auto; image-rendering: pixelated; }
.vc-vcf { margin: 0; font-family: var(--matrix-font-mono); font-size: var(--matrix-type-caption); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14em; overflow: auto; padding: var(--matrix-space-8); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); border: 1px solid var(--matrix-border); }
.vc-sig-preview { padding: var(--matrix-space-12); border-radius: var(--matrix-radius-control); background: #ffffff; border: 1px solid var(--matrix-border); overflow-x: auto; color: #1d1d1f; }
.vc-sig-preview:empty { display: none; }
.vc-logo-placeholder { display: grid !important; place-items: center; min-height: 48px; border: 1px dashed #8e8e93 !important; font-size: 11px; color: #555555; text-align: center; overflow-wrap: anywhere; }
.vc-kit { padding-top: var(--matrix-space-12); border-top: 1px solid var(--matrix-border); }
@media (min-width: 900px) {
  .vc-jump { display: none; }
  .vc-cols { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .vc-aside { position: sticky; top: var(--matrix-space-12); max-height: calc(100vh - 24px); overflow: auto; }
}
.vc-remove-cross { display: none; font-size: 1.25rem; line-height: 1; }
/* a phone: the sections open out to the panel's width under a rule (no box inside a box), and a row of a list keeps its
   kind, its value and its cross on one line while the list is 17.5rem wide or more; narrower, the kind goes above */
@media (max-width: 480px) {
  .vc-section { border: 0; border-top: 1px solid var(--matrix-border); border-radius: 0; padding: var(--matrix-space-8) 0 0; }
  .vc-section > legend { padding-inline: 0 var(--matrix-space-8); }
  .vc-details { padding-inline: var(--matrix-space-12); }
  .vc-aside { padding: var(--matrix-space-12) 0 0; border: 0; border-top: 2px solid var(--matrix-border); border-radius: 0; background: none; }
  .vc-row { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
  .vc-list-head .vc-small { padding-inline: var(--matrix-space-8); }
  .vc-remove { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
  .vc-remove-word { display: none; }
  .vc-remove-cross { display: inline; }
}
@container vc-list (max-width: 17.49rem) { .vc-row { grid-template-columns: minmax(0, 1fr) auto; } .vc-row > select { grid-column: 1 / -1; } }