.readonly-choice-list { display: inline-flex; gap: .3em; max-width: 100%; }
.readonly-color-value { display: inline-block; padding: 0 .3em; border: 2px solid currentColor; border-radius: 4px; line-height: 1.3; }
.readonly-color-hash { font-weight: 900; font-size: 1.15em; }
.readonly-boolean-pill--open { background: var(--bg-color); border: 1px solid var(--text-color); color: var(--text-color); }

.form-group--readonly-inline > label {
    display: inline;
    margin-bottom: 0;
}

.form-group--readonly-inline > .form-control--inline-value,
#agentFormSection .form-control--inline-value {
    display: inline;
    width: auto;
    min-height: 0;
    vertical-align: baseline;
}

.form-group--readonly-inline > .form-control--inline-value .preview-pill,
.form-group--readonly-inline > .form-control--inline-value .readonly-boolean-pill,
#agentFormSection .form-control--inline-value .preview-pill {
    vertical-align: middle;
}

.form-control--display {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    min-height: 1.2rem;
    font: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: justify;
    text-justify: inter-word;
}

/* System-owned text is information, not a disabled form control. Keep even very
   long generated values on one ordinary text line while retaining the complete
   value in the DOM and data-raw-value for copying and refreshes. */
.form-control--system-text {
    display: inline-block;
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    text-align: left;
    text-justify: auto;
}

/* An inline value is aligned on the shared text baseline, but `overflow: hidden` above
   synthesises this box's baseline at its bottom margin edge, which would lift the whole
   value above its label. Aligning the one-line box by its bottom puts the text back on
   the label's baseline. */
.form-group--readonly-inline > .form-control--inline-value.form-control--system-text {
    display: inline-block;
    vertical-align: bottom;
}

.form-control--display:focus {
    outline: none;
    border: none;
    background: transparent;
    box-shadow: none;
}

.preview-pill {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--text-color);
    border-radius: 999px;
    font-size: 0.8rem;
}

#agentFormSection .preview-pill--empty {
    opacity: 0.5;
}

.readonly-boolean-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 999px;
    border: 1px solid var(--text-color);
    box-sizing: border-box;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.readonly-boolean-pill__symbol {
    position: relative;
    z-index: 1;
    font-weight: 700;
    line-height: 1;
}

.readonly-boolean-pill--true {
    background: green;
    color: #fff;
}

.readonly-boolean-pill--false {
    background: transparent;
    color: var(--text-color);
}

.readonly-boolean-pill--false::before {
    content: '';
    position: absolute;
    inset: 0;
    background: red;
    opacity: 0.2;
    border-radius: inherit;
    z-index: 0;
}

.readonly-textarea-preview {
    white-space: normal;
    cursor: default;
    user-select: none;
    line-height: inherit;
    text-align: justify;
    text-justify: inter-word;
}

.readonly-textarea-preview--expandable {
    cursor: pointer;
}

/* A collapsed preview shows at most the three preview lines plus its tail line. Only the
   browser can tell where a long unbroken value wraps, so the height is bounded here and
   the value is already the right size on the first paint, instead of being drawn at full
   height and shrunk once the renderer has measured the wrapped lines. */
.readonly-textarea-preview--collapsed {
    max-height: 6em;
    max-height: 4lh;
    overflow: hidden;
}

.readonly-textarea-preview--expanded {
    user-select: text;
}

.readonly-textarea-preview__line {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: inherit;
    cursor: inherit;
    text-align: justify;
    text-justify: inter-word;
    text-align-last: justify;
}

.readonly-textarea-preview__paragraph {
    white-space: normal;
    word-break: break-word;
    line-height: inherit;
    cursor: inherit;
    text-align: justify;
    text-justify: inter-word;
}

.readonly-textarea-preview__paragraph--flattened {
    text-align: left;
    text-justify: auto;
    text-align-last: auto;
}

.readonly-textarea-preview__paragraph--manual-breaks,
.readonly-textarea-preview__line--manual-break {
    text-align: left;
    text-justify: auto;
    text-align-last: auto;
}

.readonly-textarea-preview__line--flattened {
    text-align-last: auto;
}

.readonly-textarea-preview__line--hint {
    opacity: 0.7;
}

.readonly-textarea-preview__line--tail {
    text-align: left;
    text-align-last: auto;
    text-justify: auto;
}

.readonly-textarea-preview__tail-text {
    opacity: 0.5;
}

.readonly-textarea-preview__tail-text--full {
    opacity: 1;
}

.readonly-textarea-preview__dots {
    color: var(--primary-color);
    margin-left: 0.25em;
    cursor: pointer;
}