.runtime-context-state,.runtime-workflow-state{padding:12px 14px;border:1px solid var(--line);background:var(--surface);color:var(--text);margin:0 0 12px;font-size:13px}
.context-state-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.context-state-heading small{display:block;color:var(--muted);margin-top:3px}.context-state-badges{display:flex;gap:6px;flex-wrap:wrap}.context-state-badges span{padding:3px 8px;border:1px solid var(--line);background:var(--secondary);border-radius:3px}.context-state-badges .state-active{border-left:3px solid #00a65a}.context-state-badges .state-inactive{border-left:3px solid #f39c12}.context-state-badges .state-complete{border-left:3px solid var(--accent)}.context-state-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.context-state-actions:empty{display:none}.context-state-actions button{min-height:34px;padding:6px 12px;border:1px solid var(--line);background:var(--secondary);color:var(--text)}.context-state-actions button.context-state-danger{background:#dd4b39;color:white;border-color:#dd4b39}.context-state-actions button:disabled{opacity:.55;cursor:default}.runtime-workflow-state{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;border-left:3px solid #f39c12}.runtime-workflow-state[data-ready=true]{border-left-color:#00a65a}.runtime-workflow-state span{color:var(--muted)}

/* Compact functional status; edit reservations remain a separate component. */
.runtime-context-state{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;min-height:48px;padding:6px 12px;margin:0;border-left:3px solid var(--accent,#3c8dbc);background:color-mix(in srgb,var(--accent,#3c8dbc) 9%,var(--surface,#fff))}
.runtime-context-state .context-state-heading{justify-content:flex-start;gap:12px 20px;min-width:0;flex:1;flex-wrap:wrap}
.context-state-copy{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0}
.context-state-copy strong{font-size:13px;font-weight:600;white-space:nowrap}
.context-state-heading .context-state-copy small{margin:0;font-size:12px;overflow-wrap:anywhere}
.runtime-context-state .context-state-badges{gap:12px}
.runtime-context-state .context-state-badges span{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;font-size:12px;color:var(--text)}
.context-state-badges .fa{font-size:14px;color:var(--muted)}
.context-state-badges .state-active .fa{color:var(--action-green,#00a65a)}
.context-state-badges .state-inactive .fa{color:var(--action-orange,#f39c12)}
.context-state-badges .state-complete .fa{color:var(--accent)}
.runtime-context-state .context-state-actions{margin:0 0 0 auto;gap:6px}
.context-state-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12px;border-radius:2px}
.context-state-actions button .fa{font-size:14px}
.runtime-context-state .context-state-actions button.context-state-danger{background:transparent;color:var(--action-red,#dd4b39);border-color:var(--line)}
.context-state-actions button:hover:not(:disabled){border-color:var(--accent);background:var(--secondary)}
.context-state-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:550px){.runtime-context-state{gap:8px}.runtime-context-state .context-state-heading{flex-basis:100%;gap:8px 16px}.runtime-context-state .context-state-actions{margin-left:0}}
@media(pointer:coarse){.runtime-context-state .context-state-actions button{min-height:44px}}

/* Locked is a functional warning, independent of the chosen brand accent. */
@layer sysimple-actions {
 html body .runtime-context-state.is-locked{
  --context-lock-accent:var(--adm-warning,#d58a08);
  background:color-mix(in srgb,var(--context-lock-accent) 20%,var(--adm-surface,var(--surface,#fff)))!important;
  border:1px solid var(--context-lock-accent)!important;
  border-inline-start:5px solid var(--context-lock-accent)!important;
  color:var(--adm-text,var(--text,#263238))!important;
 }
 html body .runtime-context-state.is-locked .context-state-copy strong{font-weight:700!important}
 html body .runtime-context-state.is-locked .context-state-lock{
  display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;
  color:var(--adm-text,var(--text,#263238));
  background:color-mix(in srgb,var(--context-lock-accent) 32%,var(--adm-surface,var(--surface,#fff)));
  border:1px solid var(--context-lock-accent);border-radius:3px;
 }
 html body .runtime-context-state.is-locked .context-state-lock svg{width:23px;height:23px}
 html body .runtime-context-state.is-locked .state-complete{font-weight:700}
 html body .runtime-context-state.is-locked .state-complete .fa{color:inherit}
}
@media(max-width:550px){.runtime-context-state.is-locked .context-state-heading{flex:1 1 calc(100% - 54px)}.runtime-context-state.is-locked .context-state-actions{flex-basis:100%}}
.runtime-record-masking:empty{display:none}
.runtime-record-masking .sys-local-mask-command{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 10px;border:1px solid var(--line,#ccd4dc);border-radius:3px;background:var(--secondary,#f5f7f9);color:var(--text,#263238);white-space:nowrap}
.runtime-record-masking .sys-local-mask-command[hidden]{display:none}
.runtime-record-masking .sys-local-mask-command:focus-visible{outline:2px solid var(--accent,#3c8dbc);outline-offset:2px}