/* CMS global form convention: segmented label and control inside one border.
 * Applied progressively by admin-fields.js to standard text/number/date,
 * password, select and textarea fields. Native accessibility is preserved.
 * Choice inputs, upload zones, rich editors and color pickers stay specialized.
 */
label.cms-inline-field {
    display: grid !important;
    grid-template-columns: minmax(5.75rem, 33%) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    align-items: stretch;
    min-width: 0;
    min-height: 44px;
    margin: .45rem 0 .65rem;
    padding: 0;
    border: 1px solid var(--cms-line, #d7dee7);
    border-radius: var(--cms-radius-control, 9px);
    background: var(--cms-surface, #fff);
    color: var(--cms-text, #172033);
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}
label.cms-inline-field:focus-within {
    border-color: var(--cms-accent, #455b70);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-accent, #455b70) 20%, transparent);
}
label.cms-inline-field > :is(.cms-field-head, .field-label, .cms-segment-label) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .16rem;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: .5rem .58rem;
    border-right: 1px solid var(--cms-line, #d7dee7);
    background: var(--cms-surface-soft, #f7f9fb);
    font-size: .79rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
}
label.cms-inline-field > :is(.cms-field-head, .field-label, .cms-segment-label) small,
label.cms-inline-field > :is(.cms-field-head, .field-label, .cms-segment-label) .cms-field-help {
    font-size: .68rem;
    line-height: 1.25;
    font-weight: 450;
    color: var(--cms-muted, #667085);
    text-align: left;
    white-space: normal;
}
label.cms-inline-field > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    display: block;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    height: auto;
    margin: 0;
    padding: .55rem .62rem;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    background: var(--cms-surface, #fff);
    color: var(--cms-text, #172033);
    font: inherit;
    font-size: .92rem;
    font-weight: 450;
}
label.cms-inline-field > textarea { min-height: 92px; resize: vertical; }
label.cms-inline-field > select { cursor: pointer; }
label.cms-inline-field > :is(input, select, textarea):focus-visible { outline: 0; box-shadow: none; }
label.cms-inline-field > :is(input, select, textarea):disabled {
    color: var(--cms-muted, #667085); opacity: .7; cursor: not-allowed;
}
label.cms-inline-field > :is(.field-error, .cms-field-help, .help) {
    grid-column: 1 / -1;
    padding: .32rem .6rem;
    border-top: 1px solid var(--cms-line, #d7dee7);
    margin: 0;
}
/* Native checkboxes and radios retain their readable label beside the choice. */
label:has(> input:is([type="checkbox"], [type="radio"])) { accent-color: var(--cms-accent, #455b70); }
@media (max-width: 450px) {
    label.cms-inline-field { grid-template-columns: minmax(5rem, 36%) minmax(0, 1fr); }
    label.cms-inline-field > :is(.cms-field-head, .field-label, .cms-segment-label) { font-size: .74rem; padding: .42rem; }
}
@media (prefers-reduced-motion: reduce) {
    label.cms-inline-field { transition: none; }
}