.widgets-page {
    min-height: calc(100vh - 16px);
    display: flow-root;
}

input, textarea, select, button {
    outline: none !important;
    box-shadow: none !important;
}

/* Keep scrolling and pinch zoom, but avoid double-tap zoom on form controls. */
input, textarea, select, button {
    touch-action: manipulation;
}

input:focus, textarea:focus, select:focus {
    outline: none !important;
    box-shadow: none !important;
}

img.intrinsic-image-size {
    object-fit: contain;
}

img, textarea, button {
    vertical-align: top;
}

#connection-terminated-overlay,
#client-error-overlay {
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(255, 255, 255, 0.78);
    color: #650000;
    font-family: Arial, sans-serif;
    font-size: clamp(32px, 6vw, 72px);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-shadow: 0 0 12px rgba(80, 0, 0, 0.45), 0 0 32px rgba(80, 0, 0, 0.35);
}

#client-error-overlay {
    color: #d00000;
    text-shadow: 0 0 12px rgba(208, 0, 0, 0.45),
        0 0 32px rgba(208, 0, 0, 0.35);
}

/* An editable combobox keeps its suggestion list outside clipping containers. */
.suggestion-list {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0;
    z-index: 2147483646;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.suggestion-list [role="option"] {
    padding: 10px 12px;
    min-height: 44px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.suggestion-list [role="option"]:hover,
.suggestion-list [aria-selected="true"] {
    background: rgba(128, 128, 128, 0.18);
}

/* Inline children share text wrapping and alignment within a TextFlow. */
.widgets-text-flow > * {
    vertical-align: var(--flow-alignment, baseline);
}

/* Keep selection controls beside wrapping captions, even in narrow columns. */
.widgets-labeled-choice-row > :first-child {
    flex: 0 0 auto;
}

.widgets-labeled-choice-row > :nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

input::placeholder {
    color: var(--widgets-placeholder-color, #475569);
    opacity: 1;
}

/* Decorative layers never contribute their intrinsic dimensions in this optional mode. */
.widgets-overlay-fit-first > :not(:first-child) {
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 0;
}

/* Document typography follows the reactive base font and stays inside narrow containers. */
.widgets-markdown {
    display: flow-root;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    line-height: 1.6;
    text-align: left;
    overflow-wrap: anywhere;
}

.widgets-markdown :is(p, ul, ol, blockquote, pre, hr) {
    margin: 0 0 1em;
}

.widgets-markdown :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.25em 0 0.5em;
    line-height: 1.25;
    font-weight: 700;
}

.widgets-markdown h1 { font-size: 2em; }
.widgets-markdown h2 { font-size: 1.6em; }
.widgets-markdown h3 { font-size: 1.3em; }
.widgets-markdown h4 { font-size: 1.15em; }
.widgets-markdown h5 { font-size: 1em; }
.widgets-markdown h6 { font-size: 0.9em; }

.widgets-markdown :is(ul, ol) { padding-left: 1.75em; }
.widgets-markdown li { margin: 0.25em 0; }
.widgets-markdown li > p { margin-bottom: 0.25em; }
.widgets-markdown li > :is(ul, ol) { margin-bottom: 0; }
.widgets-markdown blockquote {
    border-left: 0.2em solid currentColor;
    padding-left: 1em;
    margin-left: 0;
    margin-right: 0;
}
.widgets-markdown code {
    font-family: monospace;
    font-size: 0.9em;
    background: rgba(128, 128, 128, 0.12);
    padding: 0.1em 0.25em;
    border-radius: 0.2em;
}
.widgets-markdown pre {
    white-space: pre-wrap;
    padding: 0.75em;
    background: rgba(128, 128, 128, 0.12);
    border-radius: 0.25em;
}
.widgets-markdown pre > code { background: none; padding: 0; }
.widgets-markdown a { color: inherit; text-decoration: underline; }
.widgets-markdown a:focus-visible { outline: 0.125em solid currentColor; outline-offset: 0.15em; }
.widgets-markdown hr { border: 0; border-top: 1px solid currentColor; }
.widgets-markdown > :first-child { margin-top: 0; }
.widgets-markdown > :last-child, .widgets-markdown blockquote > :last-child { margin-bottom: 0; }