/* Modern light. Settings, Demo controls, Control Rooms management. */
.settings-card, .settings-field { min-width: 0; }
.settings-role { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius); }
.settings-role legend { padding: 0 5px; color: var(--ink); font-weight: 600; }
.settings-role .workflow-prompt { margin: 0; overflow-wrap: anywhere; }
.settings-field input, .settings-field select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.demo-view { min-height: 520px; padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); box-shadow: var(--shadow-sm); }.demo-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; }.demo-panel { padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); box-shadow: var(--shadow-sm); }.demo-panel h3 { margin-bottom: 14px; }.primary-activity { display: flex; gap: 13px; align-items: center; min-height: 88px; padding: 15px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); }.primary-activity.working { border-color: var(--accent); background: var(--accent-wash); }.primary-activity strong { display: block; margin-bottom: 5px; }.primary-activity p, .agent-status-list p { margin: 0; color: var(--ink-3); font-size: .78rem; line-height: 1.45; }.activity-spinner { width: 24px; height: 24px; flex: 0 0 auto; border: 3px solid var(--rule-strong); border-radius: 50%; }/* At rest the ring is plain; the dark arc appears only while an agent works, so an idle
   ring never reads as a stalled spinner. */
.primary-activity.working .activity-spinner { border-top-color: var(--accent); animation: activity-spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .primary-activity.working .activity-spinner { animation: none; border-color: var(--accent); } }.agent-status-list { display: grid; gap: 10px; margin-top: 14px; }.agent-status-list article { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); }.agent-status-list strong { display: block; margin-bottom: 3px; font-size: .85rem; }.agent-status-list .activity-dot { margin-top: 4px; }.demo-override-actions { display: grid; gap: 10px; margin-top: 18px; }.demo-selection-note { margin: 14px 0 0; color: var(--ink-3); font-size: .76rem; line-height: 1.45; } @keyframes activity-spin { to { transform: rotate(360deg); } } @keyframes activity-blink { to { opacity: .25; } }
.settings-view { min-height: 420px; padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); box-shadow: var(--shadow-sm); }.settings-tabs { display: inline-flex; gap: 2px; margin: 18px 0; padding: 3px; border-radius: var(--radius-pill); background: var(--paper-sunk); }.settings-tab { padding: 6px 14px; color: var(--ink-2); border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; box-shadow: none; font-size: .8rem; }.settings-tab:hover { background: var(--paper-raised); }.settings-tab.active { color: var(--accent-ink); border-color: var(--rule); background: var(--paper-raised); box-shadow: var(--shadow-sm); }.settings-card { display: grid; gap: 14px; max-width: 440px; }.settings-field { display: grid; gap: 5px; color: var(--ink-2); font-size: .8rem; font-weight: 600; }.settings-field select { width: 100%; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 9px; background: var(--paper-raised); color: var(--ink); font: inherit; }.settings-field select:disabled { opacity: .6; cursor: not-allowed; }#settings-feedback { min-height: 1em; color: var(--ink-3); }.settings-read-only { margin: 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-sunk); color: var(--ink-2); font-size: .8rem; }/* Read-only settings (public demo): every control reads as unavailable, overriding the accent styles that ids give the save buttons. */.settings-locked input, .settings-locked select, .settings-locked button, .settings-locked input:hover, .settings-locked select:hover, .settings-locked button:hover { border-color: var(--rule) !important; background: var(--paper-sunk) !important; color: var(--ink-3) !important; box-shadow: none !important; opacity: 1; cursor: not-allowed; }.settings-locked input::placeholder { color: var(--ink-3); }.settings-view .demo-view { min-height: 0; padding: 0; border: 0; background: transparent; }.demo-continuity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }.demo-continuity { min-height: 0; }.demo-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }.demo-fact-grid div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }.demo-fact-grid span, .demo-record-list span { color: var(--ink-3); font-size: .7rem; }.demo-record-list { display: grid; gap: 7px; margin: 0; padding-left: 18px; }.demo-record-list li { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font-size: .76rem; }
.room-management-list { display: grid; gap: 12px; margin-top: 18px; }.room-management-card { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); box-shadow: var(--shadow-sm); }.room-management-card > span { color: var(--ink-3); font-size: .76rem; }.room-management-card form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }.room-management-card label { display: grid; flex: 1 1 250px; gap: 4px; color: var(--ink-2); font-size: .78rem; font-weight: 600; }.room-management-card input { padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink); font: inherit; }.room-rename-feedback { width: 100%; margin: 0; color: var(--ok-ink); font-size: .74rem; }

/* A balanced configuration workspace, with the shared credential clearly scoped. */
.settings-card { max-width: 1080px; gap: 20px; }
.settings-connection { display: grid; gap: 14px; max-width: 680px; padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.settings-connection .panel-title { margin: 0; }
.settings-connection h3 { margin: 4px 0 0; font-size: 1rem; }
.settings-connection .workflow-prompt { margin: 0; max-width: 68ch; }
.settings-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.settings-role-grid fieldset { display: grid; min-width: 0; gap: 14px; margin: 0; padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius); }
.settings-role-grid legend { padding: 0 6px; font-size: .94rem; font-weight: 600; }
.settings-role-grid button { width: fit-content; }
@media (max-width: 700px) { .settings-role-grid { grid-template-columns: 1fr; } .settings-connection, .settings-role-grid fieldset { padding: 16px; } .settings-connection .panel-title { flex-wrap: wrap; } }