.metalex-operator { display: grid; gap: var(--space-md); min-width: 0; color: var(--color-text); }
.metalex-operator *, .metalex-operator *::before, .metalex-operator *::after { box-sizing: border-box; min-width: 0; }
.metalex-operator :is(h1, h2, h3, p, dl, dd, ul) { margin: 0; }
.metalex-operator :is(p, dd, strong, small) { overflow-wrap: anywhere; }
.mo-refresh { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); padding: 0; }
.mo-refresh .ui-icon { width: var(--space-md); height: var(--space-md); }
/* Event row follows the METALEX control pattern: pickers, then the icon refresh. */
.mo-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: var(--space-md); padding: var(--space-sm) var(--space-md); }
.mo-context:has(> label:only-of-type) { grid-template-columns: minmax(0, 1fr) auto; }
.mo-context .custom-select { width: 100%; }
.metalex-operator > .empty-state, .mo-panel-body > .empty-state { margin: 0; }
.mo-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); align-items: stretch; }
.mo-queue-only { grid-template-columns: minmax(0, 1fr); }
.mo-panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.card.mo-panel { padding: 0; }
.mo-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); border-bottom: 1px solid var(--color-border); }
.mo-panel-head > div { display: grid; gap: var(--space-xxs); }
.mo-panel-head h2 { font-size: var(--text-lg); }
.mo-muted, .mo-list small { color: var(--color-text-muted); font-size: var(--text-sm); }
.mo-panel-head .mo-muted { font-size: var(--text-xs); }
.mo-panel-icon { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-status-quoted-bg); color: var(--surface-card-accent); }
.mo-panel-icon .ui-icon { width: var(--space-md); height: var(--space-md); }
.mo-panel-body { display: grid; align-content: start; gap: var(--space-md); flex: 1; padding: var(--space-md); }
/* An empty panel fills the height of the taller neighbouring panel. */
.mo-panel-body:has(> .empty-state:only-child) { align-content: stretch; }
.mo-panel-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-sm); margin-top: auto; padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-border); }
.mo-review-footer { justify-content: space-between; }
.mo-review-footer p { flex: 1 1 260px; }
.metalex-operator label { display: grid; gap: var(--space-xs); min-width: 0; color: var(--color-text-subtle); font-size: var(--text-xs); font-weight: 600; }
.metalex-operator :is(input, select, textarea) { width: 100%; min-height: var(--control-height); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-sm); background: var(--surface-card-item); color: var(--color-text); font: inherit; font-size: var(--text-md); font-weight: 400; }
.metalex-operator textarea { resize: vertical; overflow-wrap: anywhere; }
.metalex-operator :is(input, select, textarea, button):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.mo-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; text-align: center; }
.mo-button:disabled { opacity: .55; cursor: not-allowed; }
.mo-tabs > button { overflow-wrap: anywhere; }
.mo-entry, .mo-entry form, .mo-confirm { display: grid; gap: var(--space-sm); }
.mo-entry { padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.mo-entry > button, .mo-entry form > button { justify-self: start; }
.mo-camera { display: grid; gap: var(--space-xs); }
.mo-camera video { width: 100%; max-height: 340px; border-radius: var(--radius-md); background: var(--color-surface-1); object-fit: cover; }
.mo-confirm { padding: var(--space-md); border: 1px solid var(--surface-card-accent); border-radius: var(--radius-md); background: var(--surface-card-item); }
.mo-confirm h3 { font-size: var(--text-md); }
.mo-confirm dl { display: grid; gap: var(--space-xs); }
.mo-confirm dl > div { display: grid; grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr); gap: var(--space-xs); }
.mo-confirm dt { color: var(--color-text-muted); }
.mo-confirm dd { font-weight: 600; }
/* Result of the last check-in: stays under the scan controls until the next scan (PR 296 UAT item 1). */
.mo-result { display: grid; gap: var(--space-xxs); }
.mo-result strong { color: var(--color-text); font-size: var(--text-md); }
.mo-session { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.mo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.mo-list { display: grid; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.mo-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); min-width: 0; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--surface-card-item-translucent); }
.mo-list li > div:first-child { display: grid; gap: var(--space-xxs); min-width: 0; }
.mo-list small { display: block; }
.mo-list form { display: grid; gap: var(--space-xs); min-width: min(100%, 280px); }
.mo-paper { justify-content: flex-start; }
.mo-dialog:not([open]) { display: none; }
.mo-dialog { width: min(700px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.mo-dialog .modal-head > div { display: grid; gap: var(--space-xxs); }
.mo-dialog-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: var(--space-md); padding: var(--space-lg); overflow: auto; }
.mo-dialog-body > .mo-message { grid-column: 1 / -1; }
@media (max-width: 820px) {
  .mo-layout { grid-template-columns: minmax(0, 1fr); }
  .mo-context, .mo-context:has(> label:only-of-type) { grid-template-columns: minmax(0, 1fr) auto; }
  .mo-context > label[for="moEvent"] { grid-column: 1; grid-row: 1; }
  .mo-context > .mo-refresh { grid-column: 2; grid-row: 1; }
  .mo-context > label[for="moBooth"] { grid-column: 1 / -1; }
  .mo-dialog-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-md); }
  .metalex-operator :is(input, select, textarea) { font-size: 16px; }
}
@media (max-width: 420px) {
  .mo-panel-head, .mo-panel-body, .mo-panel-footer { padding: var(--space-sm); }
  .mo-tabs button { font-size: var(--text-xs); }
  .mo-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .mo-dialog .modal-actions > button { flex: 1; }
}