/* Change form: fieldsets, tabs, fields, switches, related widgets, dual lists, submit row. */
.cf { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); }
.cf__form { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); }
.cf__errors ul { margin: calc(var(--m-space) * 1) 0 0; padding-left: 1.2rem; }
.cf__tabs { margin-bottom: 0; }
.cf__main { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); border: 0; padding: 0; margin: 0; min-width: 0; min-inline-size: 0; max-width: 100%; }
.cf__panel--inline { min-width: 0; max-width: 100%; }
.cf__panel--inline .inline-group, .cf__panel--inline .module { min-width: 0; min-inline-size: 0; max-width: 100%; }
.cf--readonly .cf__main { opacity: .92; }
.cf--readonly .related-links, .cf--readonly .datepicker__toggle, .cf--readonly .combobox__icon, .cf--readonly .combobox__remove, .cf--readonly .chips__remove, .cf--readonly .duallist__pane button { display: none; }
.cf--vertical_tabs .cf__form { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: calc(var(--m-space) * 4); align-items: start; }
.cf--vertical_tabs .cf__errors, .cf--vertical_tabs .submit-row { grid-column: 1 / -1; }
.cf--vertical_tabs .cf__tabs { flex-direction: column; border: 0; gap: 2px; position: sticky; top: calc(var(--m-topbar-height) + 1rem); }
.cf--vertical_tabs .cf__tabs .tabs__item { border: 0; border-radius: var(--m-radius); }
.cf--vertical_tabs .cf__tabs .tabs__item--active { background: var(--m-primary-soft); }

.fieldset { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); }
.fieldset__title { padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); border-bottom: 1px solid var(--m-border); font-size: 1rem; }
.fieldset__summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.fieldset__summary::-webkit-details-marker { display: none; }
.fieldset__summary .fieldset__title { flex: 1; border: 0; }
.fieldset__chevron { margin-right: calc(var(--m-space) * 4); color: var(--m-fg-muted); font-size: var(--m-font-size-xs); transition: transform .2s; }
.fieldset__details[open] .fieldset__chevron { transform: rotate(180deg); }
.fieldset__details[open] .fieldset__summary { border-bottom: 1px solid var(--m-border); }
.fieldset__description { padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4) 0; margin: 0; color: var(--m-fg-muted); font-size: var(--m-font-size-sm); }
.fieldset__rows { padding: calc(var(--m-space) * 2) calc(var(--m-space) * 4) calc(var(--m-space) * 4); display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); }
div.form-row { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); }
div.form-row--multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: calc(var(--m-space) * 4); align-items: end; }  /* controls line up even when a field has no label (switches) */
.form-field { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1.5); min-width: 0; }
.form-field__label label { font-size: var(--m-font-size-sm); font-weight: 600; color: var(--m-fg-strong); }
.form-field__label label.required::after { content: " *"; color: var(--m-danger-ink); }
.form-field__control { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1); }
.form-field__control > input:not([type="checkbox"], [type="radio"], [type="file"]), .form-field__control > select, .form-field__control > textarea,
.form-field__related select, .form-field__control .datetime input { width: 100%; max-width: 40rem; }
.form-field__control select[multiple] { min-height: 8rem; }
/* Date and time inputs sit inside a wrapper (the calendar toggle), so the rule above does not reach them: cap the wrapper, and short, a date needs no 40rem */
.form-field__control > .datepicker { width: 100%; max-width: 14rem; }
.form-field__help { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
.form-field .errorlist { list-style: none; margin: 0; padding: 0; color: var(--m-danger-ink); font-size: var(--m-font-size-xs); }
.form-field--errors input, .form-field--errors select, .form-field--errors textarea { border-color: var(--m-danger); }
.form-field__readonly { padding: calc(var(--m-space) * 2) 0; color: var(--m-fg); overflow-wrap: anywhere; }
.form-field__readonly img { max-height: 12rem; border-radius: var(--m-radius); }
.form-field__related { display: flex; align-items: flex-start; gap: calc(var(--m-space) * 2); max-width: 40rem; }
.related-links__toggle { min-height: 2.5rem; width: 2.5rem; padding: 0; }
.related-widget-wrapper .grow { min-width: 0; }
.textarea, textarea.vLargeTextField { width: 100%; max-width: 40rem; }
.textarea--code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--m-font-size-sm); }
input.vTextField, input.vURLField, input.vIntegerField, input.vBigIntegerField, input.vUUIDField, input.vForeignKeyRawIdAdminField { width: 100%; max-width: 40rem; }

/* Switch (checkbox) */
.form-field__switch { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 2.5); cursor: pointer; padding: calc(var(--m-space) * 1) 0; }
.form-field__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.form-field__switch-track { position: relative; width: 2.6rem; height: 1.5rem; border-radius: var(--m-radius-pill); background: var(--m-border-strong); transition: background .15s; flex-shrink: 0; }
.form-field__switch-track::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.2rem; height: 1.2rem; border-radius: var(--m-radius-pill); background: #fff; /* the knob is a white surface in both modes */ box-shadow: var(--m-shadow); transition: transform .15s; }
.form-field__switch input:checked + .form-field__switch-track { background: var(--m-primary); }
.form-field__switch input:checked + .form-field__switch-track::after { transform: translateX(1.1rem); }
.form-field__switch input:focus-visible + .form-field__switch-track { box-shadow: var(--m-focus); }
.form-field__switch-label { font-size: var(--m-font-size-sm); font-weight: 600; color: var(--m-fg-strong); }

/* Date/time, file, JSON */
.datetime { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 1.5); }
.datetime__part input { min-width: 9rem; }
.file-input { display: flex; flex-direction: column; gap: calc(var(--m-space) * 2); max-width: 40rem; }
.file-input__current { display: flex; align-items: center; gap: calc(var(--m-space) * 3); padding: calc(var(--m-space) * 2); border: 1px solid var(--m-border); border-radius: var(--m-radius); background: var(--m-surface-2); }
.file-input__preview { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--m-radius); }
.file-input__icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--m-radius); background: var(--m-surface-3); color: var(--m-fg-muted); font-size: 1.4rem; }
.file-input__meta { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1); min-width: 0; }
.file-input__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-input__clear { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.5); }
/* Drop zone of a file input (partials/drop_zone.html): --inline (a row: the change form) and
   --block (a centred column: the bulk upload page). .file-input__drop and .upload-zone are the
   former names, kept as aliases. */
.drop-zone, .file-input__drop { display: flex; align-items: center; gap: calc(var(--m-space) * 2.5); padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); border: 1px dashed var(--m-border-strong); border-radius: var(--m-radius); color: var(--m-fg-muted); font-size: var(--m-font-size-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.drop-zone--block, .upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--m-space) * 1.4); padding: calc(var(--m-space) * 6) calc(var(--m-space) * 4); border: 2px dashed var(--m-border-strong); border-radius: var(--m-radius); background: var(--m-surface-2); color: var(--m-fg-muted); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop-zone--chosen, .file-input__drop--chosen { border-style: solid; border-color: var(--m-success); background: var(--m-success-soft); color: var(--m-fg-strong); }
.drop-zone--chosen .drop-zone__icon, .file-input__drop--chosen .file-input__drop-icon { color: var(--m-success-ink); }
.drop-zone:hover, .drop-zone--over, .file-input__drop:hover, .file-input__drop--over, .upload-zone:hover, .upload-zone--over { border-color: var(--m-primary); background: var(--m-primary-soft); color: var(--m-primary-ink); }
.drop-zone input, .file-input__drop input { position: absolute; opacity: 0; width: 0; height: 0; }
.drop-zone--block .drop-zone__icon, .upload-zone__icon { font-size: 2rem; }
.drop-zone--block .drop-zone__text, .upload-zone__text { font-weight: 600; color: var(--m-fg); }
.drop-zone--block .drop-zone__hint { font-size: var(--m-font-size-xs); }
.json-editor { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1.5); max-width: 40rem; }
.json-editor__bar { display: flex; align-items: center; gap: calc(var(--m-space) * 3); }

/* Dual list (filter_horizontal) */
.duallist select, .duallist > .related-widget-wrapper > .related-links { display: none; }
.duallist__head-tools { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 2); }
.duallist__head .related-links__toggle { min-height: 1.75rem; width: 1.75rem; }
.duallist__panes { display: grid; grid-template-columns: 1fr; gap: calc(var(--m-space) * 3); max-width: 44rem; }
.duallist__pane { display: flex; flex-direction: column; gap: calc(var(--m-space) * 2); padding: calc(var(--m-space) * 2.5); border: 1px solid var(--m-border); border-radius: var(--m-radius); background: var(--m-surface-2); }
.duallist__head { display: flex; justify-content: space-between; font-size: var(--m-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--m-fg-muted); }
.duallist__list { list-style: none; height: 12rem; overflow: auto; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); padding: calc(var(--m-space) * 1); scrollbar-width: thin; }
.duallist__item { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--m-space) * 2); padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 2); border-radius: var(--m-radius-sm); font-size: var(--m-font-size-sm); cursor: pointer; }
.duallist__item i { font-size: var(--m-font-size-2xs); color: var(--m-fg-muted); opacity: 0; }
.duallist__item:hover { background: var(--m-primary-soft); color: var(--m-primary-ink); }
.duallist__item:hover i { opacity: 1; }
.duallist__item--chosen { justify-content: flex-start; }
@media (min-width: 40rem) { .duallist__panes { grid-template-columns: 1fr 1fr; } }

/* Related object modal */
.related-modal { max-width: min(64rem, 94vw); }
.related-modal .modal__box { display: flex; flex-direction: column; height: min(80dvh, 56rem); }
.related-modal__frame { flex: 1; width: 100%; border: 0; background: var(--m-bg); }
.related-modal--loading .related-modal__frame { opacity: .4; }
body.popup .page { padding: calc(var(--m-space) * 4); max-width: none; }
body.popup .page-footer { display: none; }

/* Submit row */
.submit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--m-space) * 2); }
.submit-row__main { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--m-space) * 2); margin-left: auto; }
.submit-row__main .button--primary { order: 1; }
/* Phones: icon-only secondary buttons and delete link */
.submit-row .deletelink > span, .submit-row__main .button:not(.button--primary) > span { display: none; }
@media (min-width: 48rem) { .submit-row .deletelink > span, .submit-row__main .button:not(.button--primary) > span { display: inline; } }

/* Prefix and suffix adornments (ModelAdmin.field_affixes) */
.form-field__affix { display: flex; align-items: stretch; max-width: 40rem; }
.form-field__affix > input { flex: 1; min-width: 0; max-width: none; }
.form-field__affix > input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.form-field__affix > input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.form-field__prefix, .form-field__suffix { display: inline-flex; align-items: center; padding: 0 calc(var(--m-space) * 3); border: 1px solid var(--m-border-strong); background: var(--m-surface-2); color: var(--m-fg-muted); font-size: var(--m-font-size-sm); white-space: nowrap; }
.form-field__prefix { border-right: 0; border-radius: var(--m-radius) 0 0 var(--m-radius); }
.form-field__suffix { border-left: 0; border-radius: 0 var(--m-radius) var(--m-radius) 0; }

/* Image input: preview thumbnail in the drop zone, camera button and capture modal */
.image-input__row { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 2); align-items: stretch; }
.image-input__drop { flex: 1 1 16rem; }
.image-input__preview { width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--m-radius); flex: 0 0 auto; }
.image-input__buttons { display: flex; flex-direction: column; gap: calc(var(--m-space) * 2); justify-content: center; }
.image-input__camera, .image-input__gallery { flex: 0 0 auto; }
.camera .modal__box { max-width: 40rem; }
.camera__body { padding: 0; background: #000; }  /* black stage behind the video, white text: a camera viewfinder in both modes */
.camera__video { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.camera__error { margin: 0; padding: calc(var(--m-space) * 4); color: #fff; }

/* Custom pages: one-form pages and wizards */
.page-form { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); max-width: 56rem; }
.page-form__card { overflow: visible; }
.page-form__fields { display: grid; gap: calc(var(--m-space) * 3); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.page-form__fields .form-field--checkbox { align-self: end; }
.page-form__intro { margin: 0 0 calc(var(--m-space) * 4); color: var(--m-fg-muted); line-height: 1.5; }
.page-form__bar { display: flex; align-items: center; gap: calc(var(--m-space) * 2); }
.page-form__spacer { flex: 1; }
.wizard__steps { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 2) calc(var(--m-space) * 6); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.wizard__step { display: flex; align-items: center; gap: calc(var(--m-space) * 2); color: var(--m-fg-muted); font-size: var(--m-font-size-sm); }
.wizard__number { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--m-radius-pill); border: 2px solid var(--m-border-strong); font-size: var(--m-font-size-xs); font-weight: 700; }
.wizard__step--current { color: var(--m-primary-ink); font-weight: 600; }
.wizard__step--current .wizard__number { border-color: var(--m-primary); background: var(--m-primary); color: var(--m-primary-contrast); }
.wizard__step--done { color: var(--m-fg); }
.wizard__step--done .wizard__number { border-color: var(--m-success); background: var(--m-success); color: var(--m-on-color); }
.wizard__summary { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); }
.wizard__summary-title { margin: 0 0 calc(var(--m-space) * 2); font-size: var(--m-font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--m-fg-muted); }
.wizard__summary-list { margin: 0; display: grid; gap: calc(var(--m-space) * 2); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.wizard__summary-list dt { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
.wizard__summary-list dd { margin: 0; font-weight: 500; color: var(--m-fg-strong); }

/* CodeInput: text plus a scan button */
.code-input { display: flex; gap: calc(var(--m-space) * 2); align-items: stretch; }
.code-input > input { flex: 1; min-width: 0; }

/* ArrayInput */
.array-input { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1.5); align-items: flex-start; }
.array-input__rows { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1.5); width: 100%; }
.array-input__row { display: flex; align-items: center; gap: calc(var(--m-space) * 1.5); }
.array-input__row > .input, .array-input__row > select { flex: 1; min-width: 0; }
.sort-arrows--always { display: inline-flex; }  /* the hidden default lives in the components layer */
/* JSON editor with tree view */
.json-editor--dual { display: flex; flex-direction: column; border: 1px solid var(--m-border-strong); border-radius: var(--m-radius); background: var(--m-surface); overflow: hidden; }
.json-editor--dual:focus-within { border-color: var(--m-primary); box-shadow: 0 0 0 3px var(--m-primary-soft); }
.json-node__rows { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1.5); }
/* Narrow screens: every JSON row is two lines (key and tools, then the value) so inputs keep
   their width and nothing overlaps; from 48rem the three columns line up. */
.json-node__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "key tools" "value value"; align-items: center; gap: calc(var(--m-space) * 1) calc(var(--m-space) * 2); }
.json-node__row > :nth-child(1) { grid-area: key; }
.json-node__row > :nth-child(2) { grid-area: value; min-width: 0; }
.json-node__row > :nth-child(3) { grid-area: tools; }
.json-node__row--item > .json-node__key--index::before { content: "#"; }
.json-node__key { padding-top: 0; font-weight: 600; color: var(--m-fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.json-node__key--extra { color: var(--m-fg-muted); font-weight: 500; }
.json-node__key--index { color: var(--m-fg-muted); }
.json-node--object > .json-node__rows, .json-node--array > .json-node__rows { padding-left: calc(var(--m-space) * 2); border-left: 2px solid var(--m-border); }
.json-node__row > .json-node--object, .json-node__row > .json-node--array { padding: calc(var(--m-space) * 2); border: 1px solid var(--m-border); border-radius: var(--m-radius); background: var(--m-surface-2); }
.json-node__row > .json-node--object > .json-node__rows, .json-node__row > .json-node--array > .json-node__rows { padding-left: 0; border-left: 0; }
.json-node__scalar { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 1.5); align-items: center; }
.json-node__scalar .input { flex: 1 1 8rem; min-width: 0; width: 100%; }
.input--sm { min-height: 2rem; padding: calc(var(--m-space) * 1) calc(var(--m-space) * 2); font-size: var(--m-font-size-sm); }
.json-node__type { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); border: 1px solid var(--m-border); border-radius: var(--m-radius); background: var(--m-surface-2); padding: .2rem .35rem; }
.json-node__null { color: var(--m-fg-muted); font-style: italic; }
.json-node__adder { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 1.5); align-items: center; margin-top: calc(var(--m-space) * 2); }
.json-node__adder > .input { flex: 1 1 100%; }
.json-node__tools { display: flex; gap: 2px; padding-top: 0; }
.json-node__tools .icon-button, .json-node__remove { width: 1.75rem; height: 1.75rem; color: var(--m-fg-muted); }
.json-node__tools .icon-button:hover, .json-node__remove:hover { color: var(--m-danger-ink); }
/* Markdown and JSON editors: one bordered box; small tabs on the left of the header, tools on
   the right; the body is the code view, the preview or the visual editor. */
.md-editor { display: flex; flex-direction: column; border: 1px solid var(--m-border-strong); border-radius: var(--m-radius); background: var(--m-surface); overflow: hidden; }
.md-editor:focus-within { border-color: var(--m-primary); box-shadow: 0 0 0 3px var(--m-primary-soft); }
.md-editor--full { position: fixed; inset: 0; z-index: var(--m-z-overlay); border-radius: 0; --md-height: calc(100dvh - 3rem); }
.md-editor__bar { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: calc(var(--m-space) * 2); border-bottom: 1px solid var(--m-border); background: var(--m-surface-2); }
.md-editor__tabs { display: flex; }
.md-editor__tab { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.6); padding: calc(var(--m-space) * 2.2) calc(var(--m-space) * 3.6); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--m-fg-muted); font: inherit; font-size: var(--m-font-size-sm); cursor: pointer; }
.md-editor__tab:hover { color: var(--m-fg-strong); }
.md-editor__tab--active { color: var(--m-primary-ink); border-bottom-color: var(--m-primary); }
.md-editor__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: calc(var(--m-space) * 1) calc(var(--m-space) * 2); }
.md-editor__tool { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1); min-width: 1.9rem; height: 1.9rem; padding: 0 calc(var(--m-space) * 1.6); border: 0; border-radius: var(--m-radius); background: none; color: var(--m-fg); font: inherit; font-size: var(--m-font-size-sm); cursor: pointer; }
.md-editor__tool:hover { background: var(--m-surface-3); color: var(--m-fg-strong); }
.md-editor__tool .fa-caret-down { font-size: var(--m-font-size-2xs); color: var(--m-fg-muted); }
.md-editor__sep { width: 1px; height: 1.2rem; margin: 0 calc(var(--m-space) * 1); background: var(--m-border); }
.md-editor__body { display: flex; flex-direction: column; min-height: var(--md-height, 16rem); }
.md-editor__code { position: relative; display: flex; flex: 1; min-height: var(--md-height, 16rem); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--m-font-size-sm); line-height: 1.55; }
.md-editor__gutter { flex: 0 0 auto; min-width: 2.75rem; padding: calc(var(--m-space) * 2); text-align: right; color: var(--m-fg-muted); background: var(--m-surface-2); border-right: 1px solid var(--m-border); overflow: hidden; user-select: none; display: flex; flex-direction: column; }
.md-editor__gutter span { display: block; }
.md-editor__line { display: block; }
.md-editor__stack { position: relative; flex: 1; min-width: 0; }
.md-editor__highlight, .md-editor__code textarea { margin: 0; padding: calc(var(--m-space) * 2) calc(var(--m-space) * 3); font: inherit; line-height: inherit; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; tab-size: 2; }
.md-editor__highlight { position: absolute; inset: 0; overflow: hidden; color: var(--m-fg); pointer-events: none; }
.md-editor__code textarea { position: relative; display: block; width: 100%; height: 100%; min-height: var(--md-height, 16rem); border: 0; border-radius: 0; box-shadow: none; background: transparent; color: transparent; caret-color: var(--m-fg-strong); resize: vertical; outline: none; }
.md-editor__code textarea::selection { background: var(--m-primary-soft); }
.md-t-heading { color: var(--m-primary-ink); font-weight: 700; }
.md-t-bold { font-weight: 700; color: var(--m-fg-strong); }
.md-t-italic { font-style: italic; }
.md-t-code, .md-t-codeblock, .md-t-fence { color: var(--m-info-ink); }
.md-t-link, .md-t-img { color: var(--m-success-ink); }
.md-t-quote { color: var(--m-fg-muted); }
.md-t-bullet, .md-t-pipe, .md-t-hr { color: var(--m-warning-ink); font-weight: 700; }
.md-t-attr { color: var(--m-danger-ink); }
.md-editor__preview, .md-editor__visual { flex: 1; min-height: var(--md-height, 16rem); padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); color: var(--m-fg); line-height: 1.6; overflow: auto; outline: none; }
.md-editor__menu { display: inline-flex; }
.md-editor__popover { display: flex; flex-direction: column; gap: calc(var(--m-space) * 2); width: 18rem; max-width: calc(100vw - 2rem); padding: calc(var(--m-space) * 3); font-family: inherit; }
.md-editor__field { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1); font-size: var(--m-font-size-sm); color: var(--m-fg-muted); }
.md-editor__field .input { width: 100%; }
.md-editor__popover-actions { display: flex; justify-content: flex-end; gap: calc(var(--m-space) * 2); }
/* Image library: preview in the change form, upload zone, bulk upload page */
.image-preview { max-width: 100%; max-height: 20rem; border-radius: var(--m-radius); border: 1px solid var(--m-border); background: var(--m-surface-2); }
.upload-zone--compact { flex-direction: row; padding: calc(var(--m-space) * 2) calc(var(--m-space) * 3); flex: 1; }
.image-picker__upload { flex: 1; }
.image-upload { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); padding: calc(var(--m-space) * 4); }
.image-upload__folder { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1); max-width: 20rem; }
.image-upload__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--m-space) * 2); }
.image-upload__item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: calc(var(--m-space) * 3); align-items: center; padding: calc(var(--m-space) * 2); border: 1px solid var(--m-border); border-radius: var(--m-radius); background: var(--m-surface); }
.image-upload__item--done { opacity: .6; }
.image-upload__item--error { border-color: var(--m-danger); }
.image-upload__thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--m-radius); background: var(--m-surface-2); }
.image-upload__fields { display: flex; flex-direction: column; gap: calc(var(--m-space) * 1.4); }
.image-upload__error { font-size: var(--m-font-size-xs); color: var(--m-danger-ink); }
.image-upload__status { display: flex; align-items: center; gap: calc(var(--m-space) * 2); font-size: var(--m-font-size-sm); color: var(--m-fg-muted); }
.image-upload__actions { display: flex; justify-content: flex-end; gap: calc(var(--m-space) * 2); }
/* Where an image is used (change form) and the foreign-key picker */
.image-usage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--m-space) * 1.4); }
.image-usage__link { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.6); color: var(--m-fg); text-decoration: none; }
.image-usage__link:hover { color: var(--m-primary-ink); }
.image-usage__link--plain { pointer-events: none; }
.image-usage__kind { font-size: var(--m-font-size-xs); padding: calc(var(--m-space) * .4) calc(var(--m-space) * 1.8); border-radius: var(--m-radius-pill); background: var(--m-surface-3); color: var(--m-fg-muted); }
.image-picker-field__box { display: flex; align-items: center; gap: calc(var(--m-space) * 3); padding: calc(var(--m-space) * 2); border: 1px solid var(--m-border-strong); border-radius: var(--m-radius); background: var(--m-surface); max-width: 32rem; }
.image-picker-field__box--empty { border-style: dashed; }
.image-picker-field__thumb { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; flex: 0 0 auto; border-radius: var(--m-radius); background: var(--m-surface-2); color: var(--m-fg-muted); overflow: hidden; }
.image-picker-field__thumb img { width: 100%; height: 100%; object-fit: cover; }
.image-picker-field__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-picker-field__actions { display: flex; gap: calc(var(--m-space) * 1); flex-wrap: wrap; }
.prose table { width: auto; border-collapse: collapse; margin: calc(var(--m-space) * 2) 0; font-size: var(--m-font-size-sm); }
.prose th, .prose td { border: 1px solid var(--m-border); padding: .35rem .7rem; text-align: left; }
.prose th { background: var(--m-surface-2); }
/* JSON editor inside the same box */
.json-editor--dual .json-editor__tree { flex: 1; padding: calc(var(--m-space) * 2); border: 0; border-radius: 0; background: var(--m-surface); font-size: var(--m-font-size-sm); }
.json-editor--dual textarea { flex: 1; min-height: var(--md-height, 14rem); width: 100%; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--m-font-size-sm); resize: vertical; }
.json-node__add { display: flex; width: 100%; justify-content: center; margin-top: calc(var(--m-space) * 1); border: 1px dashed var(--m-border-strong); color: var(--m-fg-muted); }
.json-node__add:hover { border-color: var(--m-primary); color: var(--m-primary-ink); background: var(--m-primary-soft); }
.json-editor__status { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); padding-right: calc(var(--m-space) * 2); }
.json-editor__status--error { color: var(--m-danger-ink); }
.json-editor--dual .md-editor__body { min-height: 0; }
@media (min-width: 48rem) {
  .json-node__row { grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) auto; grid-template-areas: none; align-items: start; gap: calc(var(--m-space) * 2); }
  .json-node__row--item { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .json-node__row > .json-node--object .json-node__row, .json-node__row > .json-node--array .json-node__row { grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) auto; }
  .json-node__row > .json-node--array .json-node__row--item { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
  .json-node__row > :nth-child(1), .json-node__row > :nth-child(2), .json-node__row > :nth-child(3) { grid-area: auto; }
  .json-node__row--item > .json-node__key--index::before { content: none; }
  .json-node__key { padding-top: .45rem; }
  .json-node__tools { padding-top: .2rem; }
  .json-node__scalar { flex-wrap: nowrap; }
  .json-node__scalar .input { flex: 1; min-width: 6rem; }
  .json-node--object > .json-node__rows, .json-node--array > .json-node__rows { padding-left: calc(var(--m-space) * 3); }
  .json-node__row > .json-node--object, .json-node__row > .json-node--array { padding: calc(var(--m-space) * 2) calc(var(--m-space) * 2.5); }
  .json-node__row > .json-node--object > .json-node__rows, .json-node__row > .json-node--array > .json-node__rows { padding-left: 0; }
  .json-node__adder > .input { flex: 0 1 auto; }
  .json-editor--dual .json-editor__tree { padding: calc(var(--m-space) * 3); }
}
.prose h1, .prose h2, .prose h3 { margin: 1em 0 .5em; line-height: 1.25; color: var(--m-fg-strong); }
.prose h1 { font-size: var(--m-font-size-2xl); } .prose h2 { font-size: var(--m-font-size-xl); } .prose h3 { font-size: var(--m-font-size-lg); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre { margin: 0 0 .75em; }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose blockquote { padding-left: 1rem; border-left: 3px solid var(--m-border-strong); color: var(--m-fg-muted); }
.prose code { padding: .1rem .3rem; border-radius: var(--m-radius-sm); background: var(--m-surface-3); font-size: .9em; }
.prose pre { padding: calc(var(--m-space) * 3); border-radius: var(--m-radius); background: var(--m-surface-3); overflow: auto; }
.prose a { color: var(--m-primary-ink); }
.prose hr { border: 0; border-top: 1px solid var(--m-border); margin: 1em 0; }

/* Chips: invalid entry (pattern or max) */
.chips__entry--invalid { color: var(--m-danger-ink); text-decoration: underline wavy var(--m-danger); }
/* Placeholder editor: {{key}} badges inside an editable box, "{" menu */
.ph { position: relative; }
.ph__editor { min-height: 2.5rem; padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 2); border: 1px solid var(--m-border-strong); border-radius: var(--m-radius); background: var(--m-surface); color: var(--m-fg); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; cursor: text; outline: none; }
.ph__editor:focus { border-color: var(--m-primary); box-shadow: var(--m-focus); }
.errors .ph__editor, .form-field--errors .ph__editor { border-color: var(--m-danger); }
.ph--multiline .ph__editor { min-height: 7rem; }
.ph__editor:empty::before { content: attr(data-placeholder); color: var(--m-fg-muted); }
.ph__chip { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .1rem; padding: 0 .5rem; border-radius: var(--m-radius-pill); background: var(--m-primary-soft); color: var(--m-primary-ink); font-size: .85em; font-weight: 600; line-height: 1.5; vertical-align: baseline; user-select: all; white-space: nowrap; }
.ph__chip .fa-code { font-size: .7em; opacity: .7; }
.ph__menu { position: absolute; z-index: var(--m-z-popover); min-width: 12rem; max-height: 14rem; overflow: auto; }
.ph__option { display: block; width: 100%; text-align: left; }
.ph__option--active { background: var(--m-surface-3); }
.ph__empty { display: block; padding: .5rem .75rem; font-size: var(--m-font-size-sm); color: var(--m-fg-muted); }
.cf--readonly .ph__editor { pointer-events: none; }
/* Touch screens: 16px in the code editors, so iOS does not zoom on focus */
@media (hover: none) and (pointer: coarse) {
  .md-editor__code, .json-editor--dual textarea { font-size: 16px; }
}

/* Field tools (ModelAdmin.field_tools): buttons after the control */
.form-field__control--tools { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: calc(var(--m-space) * 2); }
.form-field__control--tools > input:not([type="checkbox"], [type="radio"], [type="file"]), .form-field__control--tools > textarea, .form-field__control--tools > .datepicker { flex: 1 1 12rem; }
.form-field__tools { display: inline-flex; flex-wrap: wrap; gap: calc(var(--m-space) * 1.5); }
.field-tool--busy { opacity: .6; pointer-events: none; }
.field-tool--recording { color: var(--m-danger-ink); border-color: var(--m-danger); animation: field-tool-pulse 1.2s ease-in-out infinite; }
@keyframes field-tool-pulse { 50% { opacity: .55; } }