html,
body {
height: 100%;
width: 100%;
/* App feel: kill double-tap-to-zoom (and its 300ms delay), and stop
scroll-chaining / pull-to-refresh / rubber-band bounce. Pinch-zoom is
already disabled via the viewport meta. */
touch-action: manipulation;
overscroll-behavior: none;
}
app-shell {
display: block;
height: 100%;
width: 100%;
}
/* ---------------------------------------------------------------------------
* Admin dialog forms.
*
* is appended to and its form is set via innerHTML, so the
* form lives in the DOCUMENT light DOM — the views' shadow-scoped CSS can't
* reach it. All dialog-form layout therefore lives here, at document level.
* Two shapes:
* - two-column property forms: .mode-form, .prov-form
* - single-column editor forms that flex-fill a tall modal: .prompt-form,
* .skill-form (used with ; see Dialog.css :host([fill]))
* ------------------------------------------------------------------------- */
/* shared: stacked label (text above its control), hints, errors */
.mode-form label,
.prov-form label,
.prompt-form label,
.skill-form label {
display: grid;
gap: 4px;
font-size: 13px;
color: var(--color-text-muted);
}
.mode-form .hint,
.prov-form .hint,
.prompt-form .hint,
.skill-form .hint {
margin: 0;
font-size: 12px;
line-height: 1.5;
color: var(--color-text-muted);
}
.prompt-form .hint code,
.skill-form .hint code {
font-family: var(--font-mono, ui-monospace, monospace);
background: var(--color-surface-3, #2a2a2a);
padding: 0.1em 0.35em;
border-radius: 4px;
}
.mode-form .form-error,
.prov-form .form-error,
.prompt-form .form-error,
.skill-form .form-error {
min-height: 16px;
font-size: 13px;
color: var(--color-error, #d83a3a);
}
/* two-column property forms (modes / providers) */
.mode-form,
.prov-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3, 12px);
}
.mode-form .full,
.prov-form .full,
.mode-form .hint,
.prov-form .hint,
.mode-form .form-error,
.prov-form .form-error {
grid-column: 1 / -1;
}
/* modes: numeric-param toggle rows */
.mode-form .num-head { display: flex; align-items: center; gap: 8px; }
.mode-form .num-label { font-size: 13px; color: var(--color-text-muted); }
.mode-form .num-field.excluded .num-label { text-decoration: line-through; opacity: 0.55; }
.mode-form .num-field.excluded ui-input { opacity: 0.55; }
/* single-column editor forms (prompts / skills) — flex-fill the tall modal so
the textarea consumes whatever vertical space the other fields don't. */
.prompt-form,
.skill-form {
display: flex;
flex-direction: column;
gap: var(--space-3, 12px);
flex: 1 1 auto;
min-height: 0;
}
/* the field wrapping the big textarea grows to fill leftover height; its grid
gives the label text an auto row and the textarea a 1fr row. */
.prompt-form label.grow,
.skill-form label.grow {
flex: 1 1 auto;
min-height: 0;
grid-template-rows: auto 1fr;
}
.prompt-form textarea,
.skill-form textarea {
width: 100%;
height: 100%;
min-height: 140px;
box-sizing: border-box;
resize: none;
padding: 12px 14px;
font: 400 13px/1.5 var(--font-mono, ui-monospace, monospace);
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md, 8px);
}
.prompt-form textarea:focus,
.skill-form textarea:focus {
outline: none;
border-color: var(--color-accent, #f4a78a);
}