/* Live mode (Phase 9): the Settings box and the instance editor. Colors come from the theme tokens in app.css. */
.live-settings .live-heading { margin: 1rem 0 0.4rem; font-size: 1rem; }
.live-row, .live-token { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.live-token { flex-direction: column; align-items: flex-start; }
.live-label { margin: 0; font-weight: 600; }
.live-state { color: var(--muted); font-size: 0.9rem; }
.live-ok { color: var(--text); }
.live-token label { font-size: 0.9rem; color: var(--muted); }
.live-token input.wide { width: min(100%, 32rem); }
.cfg-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.cfg-field { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.cfg-field input { width: 11rem; }
.cfg-field input.wide { width: 22rem; max-width: 100%; }
.cfg-field label { font-size: 0.85rem; color: var(--muted); }
.cfg-row-actions { display: flex; gap: 0.5rem; }
.cfg-editor .radio { display: block; margin: 0.25rem 0; }
.cfg-editor [data-cfg-add-instance], .cfg-editor [data-cfg-add-githost], .cfg-editor [data-cfg-save] { margin: 0.5rem 0.5rem 0 0; }

/* Last refresh (Phase 9.39): bulleted problems with what to do */
.problem-items { margin: 0.4rem 0 0.6rem; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.problem-item { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); background: var(--surface); }
.problem-error { border-left-color: var(--sev-error); }
.problem-warn { border-left-color: var(--sev-warn); }
.problem-info { border-left-color: var(--sev-info); }
.problem-head { display: flex; align-items: center; gap: 0.4rem; }
.problem-message, .problem-fix { margin: 0.2rem 0 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.problem-fix { color: var(--muted); }
.advanced-checks, .technical-details { margin: 0.4rem 0 0.6rem; }
.advanced-checks > summary, .technical-details > summary { cursor: pointer; }