/* Monolith shared UI primitives. Native HTML owns semantics; these classes own
   the cross-application visual and interaction contract. */

.m-ui-root {
  color: var(--m-ui-color-text);
  font: 400 var(--m-ui-type-body)/20px var(--m-ui-type-family);
}

.m-ui-type-meta { color: var(--m-ui-color-text-subtle); font-size: var(--m-ui-type-meta); line-height: 16px; }
.m-ui-type-body { color: var(--m-ui-color-text); font-size: var(--m-ui-type-body); line-height: 20px; }
.m-ui-type-section { color: var(--m-ui-color-text); font-size: var(--m-ui-type-section); line-height: 22px; font-weight: 600; }
.m-ui-type-title { color: var(--m-ui-color-text); font-size: var(--m-ui-type-title); line-height: 28px; font-weight: 600; }

.m-ui-identity {
  color: var(--m-ui-color-text);
  font: 600 var(--m-ui-type-identity)/22px var(--m-ui-type-family);
  white-space: nowrap;
}

.m-ui-lockup {
  color: var(--m-ui-color-action-hover);
  font-size: var(--m-ui-type-identity);
  font-weight: 700;
  letter-spacing: .11em;
}

.m-ui-button,
.m-ui-input,
.m-ui-select,
.m-ui-textarea {
  box-sizing: border-box;
  min-height: var(--m-ui-control-min-height);
  border: 1px solid var(--m-ui-color-border);
  border-radius: var(--m-ui-radius-control);
  font: 400 var(--m-ui-type-control)/20px var(--m-ui-type-family);
  transition: color var(--m-ui-motion-fast) ease, background var(--m-ui-motion-fast) ease, border-color var(--m-ui-motion-fast) ease;
}

.m-ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-ui-space-2);
  padding: var(--m-ui-control-padding-y) var(--m-ui-control-padding-x);
  color: var(--m-ui-color-text);
  background: var(--m-ui-state-rest);
  cursor: pointer;
  text-decoration: none;
}

.m-ui-button--large { min-height: var(--m-ui-control-large-height); }
.m-ui-button:hover,
.m-ui-button[data-m-ui-state="hover"] { color: var(--m-ui-color-link); border-color: var(--m-ui-color-accent); background: var(--m-ui-state-hover); }
.m-ui-button:active,
.m-ui-button[data-m-ui-state="active"] { color: var(--m-ui-color-text); background: var(--m-ui-state-active); }
.m-ui-button:focus-visible,
.m-ui-button[data-m-ui-state="focus-visible"] { outline: var(--m-ui-focus-width) solid var(--m-ui-color-link); outline-offset: var(--m-ui-focus-offset); }
.m-ui-button[aria-pressed="true"],
.m-ui-button[data-m-ui-state="selected"] { color: var(--m-ui-color-link); border-color: var(--m-ui-state-selected-border); background: var(--m-ui-color-selection); }
.m-ui-button:disabled,
.m-ui-button[aria-disabled="true"],
.m-ui-button[data-m-ui-state="disabled"] { color: var(--m-ui-color-text-disabled); border-color: var(--m-ui-color-border); background: var(--m-ui-color-surface); cursor: default; pointer-events: none; }
.m-ui-button[data-m-ui-state="error"] { color: var(--m-ui-color-danger-rest); border-color: var(--m-ui-color-danger); }
.m-ui-button--primary { color: var(--m-ui-color-on-action); border-color: var(--m-ui-color-action); background: var(--m-ui-color-action); }
.m-ui-button--primary:hover,
.m-ui-button--primary[data-m-ui-state="hover"] { color: var(--m-ui-color-on-action-hover); border-color: var(--m-ui-color-action-hover); background: var(--m-ui-color-action-hover); }
.m-ui-button--danger { color: var(--m-ui-color-danger-rest); }
.m-ui-button--danger:hover,
.m-ui-button--danger[data-m-ui-state="hover"] { color: var(--m-ui-color-on-danger); border-color: var(--m-ui-color-danger); background: var(--m-ui-color-danger); }
.m-ui-button[aria-busy="true"]::before,
.m-ui-button[data-m-ui-state="loading"]::before {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: m-ui-spin .7s linear infinite;
}

.m-ui-field { display: grid; gap: var(--m-ui-space-1); color: var(--m-ui-color-text-muted); font-size: var(--m-ui-type-meta); }
.m-ui-field__hint { color: var(--m-ui-color-text-subtle); font-size: var(--m-ui-type-meta); line-height: 16px; }
.m-ui-input,
.m-ui-select,
.m-ui-textarea {
  width: 100%;
  padding: var(--m-ui-control-padding-y) var(--m-ui-control-padding-x);
  color: var(--m-ui-color-text);
  background: var(--m-ui-color-control-well);
}
.m-ui-textarea { min-height: 88px; resize: vertical; }
.m-ui-input::placeholder,
.m-ui-textarea::placeholder { color: var(--m-ui-color-text-muted); opacity: 1; }
.m-ui-input:hover,
.m-ui-select:hover,
.m-ui-textarea:hover,
.m-ui-input[data-m-ui-state="hover"],
.m-ui-select[data-m-ui-state="hover"],
.m-ui-textarea[data-m-ui-state="hover"] { border-color: var(--m-ui-color-border-strong); }
.m-ui-input:focus-visible,
.m-ui-select:focus-visible,
.m-ui-textarea:focus-visible,
.m-ui-input[data-m-ui-state="focus-visible"],
.m-ui-select[data-m-ui-state="focus-visible"],
.m-ui-textarea[data-m-ui-state="focus-visible"] { outline: var(--m-ui-focus-width) solid var(--m-ui-color-link); outline-offset: var(--m-ui-focus-offset); border-color: var(--m-ui-color-accent); }
.m-ui-input:disabled,
.m-ui-select:disabled,
.m-ui-textarea:disabled { color: var(--m-ui-color-text-disabled); }
.m-ui-input[readonly],
.m-ui-input[data-m-ui-state="readonly"] {
  color: var(--m-ui-color-text-muted);
  background: var(--m-ui-color-surface);
  cursor: text;
}
.m-ui-input[aria-invalid="true"],
.m-ui-select[aria-invalid="true"],
.m-ui-textarea[aria-invalid="true"],
.m-ui-input[data-m-ui-state="error"],
.m-ui-select[data-m-ui-state="error"],
.m-ui-textarea[data-m-ui-state="error"] { border-color: var(--m-ui-color-danger); outline-color: var(--m-ui-color-danger); }

.m-ui-tabs,
.m-ui-navigation {
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--m-ui-color-border);
  border-radius: var(--m-ui-radius-control);
  background: var(--m-ui-color-subtle-fill);
}
.m-ui-tab,
.m-ui-navigation__item {
  min-height: var(--m-ui-control-min-height);
  padding: var(--m-ui-control-padding-y) var(--m-ui-control-padding-x);
  color: var(--m-ui-color-text-muted);
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 400 var(--m-ui-type-control)/20px var(--m-ui-type-family);
  white-space: nowrap;
}
.m-ui-tab,
a.m-ui-navigation__item,
button.m-ui-navigation__item { cursor: pointer; }
.m-ui-navigation__item { cursor: default; }
.m-ui-tab + .m-ui-tab,
.m-ui-navigation__item + .m-ui-navigation__item { border-left: 1px solid var(--m-ui-color-border); }
.m-ui-tab:hover,
.m-ui-tab[data-m-ui-state="hover"],
.m-ui-navigation__item:hover,
.m-ui-navigation__item[data-m-ui-state="hover"] { color: var(--m-ui-color-text); background: var(--m-ui-state-hover); }
.m-ui-tab:focus-visible,
.m-ui-tab[data-m-ui-state="focus-visible"],
.m-ui-navigation__item:focus-visible,
.m-ui-navigation__item[data-m-ui-state="focus-visible"] { position: relative; outline: var(--m-ui-focus-width) solid var(--m-ui-color-link); outline-offset: calc(-1 * var(--m-ui-focus-width)); z-index: 1; }
.m-ui-tab[aria-selected="true"],
.m-ui-navigation__item[aria-current],
.m-ui-tab[data-m-ui-state="selected"],
.m-ui-navigation__item[data-m-ui-state="selected"] { color: var(--m-ui-color-link); background: var(--m-ui-color-selection); font-weight: 600; }
.m-ui-tab:disabled,
.m-ui-tab[aria-disabled="true"],
.m-ui-tab[data-m-ui-state="disabled"],
.m-ui-navigation__item:disabled,
.m-ui-navigation__item[aria-disabled="true"],
.m-ui-navigation__item[data-m-ui-state="disabled"] { color: var(--m-ui-color-text-disabled); cursor: default; pointer-events: none; }
.m-ui-tabpanel[hidden] { display: none; }

.m-ui-progress-steps {
  display: inline-flex;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  border: 1px solid var(--m-ui-color-border);
  border-radius: var(--m-ui-radius-control);
  background: var(--m-ui-color-subtle-fill);
}
.m-ui-progress-step {
  display: inline-flex;
  align-items: center;
  min-height: var(--m-ui-control-min-height);
  padding: var(--m-ui-control-padding-y) var(--m-ui-control-padding-x);
  color: var(--m-ui-color-text-muted);
  font: 400 var(--m-ui-type-control)/20px var(--m-ui-type-family);
  white-space: nowrap;
}
.m-ui-progress-step + .m-ui-progress-step { border-left: 1px solid var(--m-ui-color-border); }
.m-ui-progress-step[data-m-ui-state="complete"] { color: var(--m-ui-color-accent); }
.m-ui-progress-step[aria-current="step"],
.m-ui-progress-step[data-m-ui-state="current"] {
  color: var(--m-ui-color-link);
  background: var(--m-ui-color-selection);
  font-weight: 600;
}
.m-ui-progress-step[data-m-ui-state="upcoming"] { color: var(--m-ui-color-text-subtle); }

.m-ui-panel {
  box-sizing: border-box;
  padding: var(--m-ui-space-4);
  color: var(--m-ui-color-text);
  border: 1px solid var(--m-ui-color-border);
  border-radius: var(--m-ui-radius-surface);
  background: var(--m-ui-color-surface);
}
.m-ui-panel--raised {
  background: var(--m-ui-color-surface-raised);
  box-shadow: var(--m-ui-elevation-raised);
}
.m-ui-panel__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--m-ui-space-3); margin-bottom: var(--m-ui-space-3); }
.m-ui-panel__header > :first-child { margin: 0; font-size: var(--m-ui-type-section); line-height: 22px; }

.m-ui-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  color: var(--m-ui-color-text);
  border: 1px solid var(--m-ui-color-border-strong);
  border-radius: var(--m-ui-radius-surface);
  background: var(--m-ui-color-surface);
  font: 400 var(--m-ui-type-body)/20px var(--m-ui-type-family);
}
.m-ui-dialog::backdrop { background: var(--m-ui-color-overlay); }
.m-ui-dialog__header,
.m-ui-dialog__body,
.m-ui-dialog__footer { padding: var(--m-ui-space-4); }
.m-ui-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--m-ui-space-3); border-bottom: 1px solid var(--m-ui-color-border); }
.m-ui-dialog__header h2 { margin: 0; font-size: var(--m-ui-type-section); line-height: 22px; }
.m-ui-dialog__body { color: var(--m-ui-color-text-muted); }
.m-ui-dialog__footer { display: flex; justify-content: flex-end; gap: var(--m-ui-space-2); border-top: 1px solid var(--m-ui-color-border); }

.m-ui-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 8px;
  color: var(--m-ui-color-text-muted);
  border: 1px solid var(--m-ui-color-border);
  border-radius: var(--m-ui-radius-control);
  background: var(--m-ui-color-status-fill);
  font-size: var(--m-ui-type-meta);
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.m-ui-status:empty { display: none; }
.m-ui-status::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; opacity: .75; }
.m-ui-status[data-m-ui-state="running"],
.m-ui-status[data-m-ui-state="success"],
.m-ui-status[data-m-ui-state="selected"] { color: var(--m-ui-color-accent); background: var(--m-ui-color-selection); }
.m-ui-status[data-m-ui-state="loading"]::before { animation: m-ui-pulse 1s ease-in-out infinite; }
.m-ui-status[data-m-ui-state="warning"] { color: var(--m-ui-color-danger-rest); }
.m-ui-status[data-m-ui-state="danger"],
.m-ui-status[data-m-ui-state="error"] { color: var(--m-ui-color-danger); background: var(--m-ui-color-danger-fill); }

.m-ui-surface-panel { position: relative; z-index: 1; }

@keyframes m-ui-spin { to { transform: rotate(360deg); } }
@keyframes m-ui-pulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .m-ui-button,
  .m-ui-input,
  .m-ui-select,
  .m-ui-textarea,
  .m-ui-tab,
  .m-ui-navigation__item { transition-duration: .001ms !important; }
  .m-ui-button[aria-busy="true"]::before,
  .m-ui-button[data-m-ui-state="loading"]::before,
  .m-ui-status[data-m-ui-state="loading"]::before { animation: none; }
}