/* Customer task surfaces only. Load after the legacy Presença styles and
   customer-identity.css. Preview and public-card presentation remain separate. */
.meligai-customer-ui .presence-flow {
  margin-block: 1.5rem 2rem;
  min-width: 0;
}
.meligai-customer-ui .presence-flow__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Auth remains a narrow reading column even on wide screens. */
.auth-page.meligai-customer-ui .presence-flow__steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* The panel reuses the editor's existing preview, including its original
   palette. Do not substitute customer task colors inside the public-card preview. */
.meligai-customer-ui .presence-panel__aside {
  --presence-navy: #123e67;
  --presence-muted: #526274;
  --presence-line: #ccd5df;
}
.meligai-customer-ui .presence-flow__step {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  min-height: 44px;
  padding: .75rem;
  border: 1px solid var(--customer-line);
  border-radius: var(--customer-radius);
  background: var(--customer-paper);
  color: var(--customer-muted);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.meligai-customer-ui .presence-flow__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.65rem;
  height: 1.65rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.meligai-customer-ui .presence-flow__step[aria-current="step"] {
  border: 2px solid var(--customer-navy);
  background: #eaf1ff;
  color: var(--customer-navy);
  box-shadow: var(--customer-control-shadow);
}
.meligai-customer-ui .presence-flow__step[aria-current="step"] .presence-flow__number {
  border-color: var(--customer-blue);
  background: var(--customer-blue);
  color: #fff;
}

.meligai-customer-ui .presence-entry {
  min-width: 0;
  color: var(--customer-navy);
}
.meligai-customer-ui .presence-entry-summary {
  display: grid;
  gap: .65rem;
  min-width: 0;
  margin-block: 1.5rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 2px solid var(--customer-navy);
  border-radius: calc(var(--customer-radius) + 5px);
  background: var(--customer-paper);
  box-shadow: 4px 5px 0 var(--customer-navy);
  overflow-wrap: anywhere;
}
.meligai-customer-ui .presence-entry-summary :is(h2, h3) {
  margin: 0;
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.meligai-customer-ui .presence-entry-summary p {
  margin: 0;
  color: var(--customer-muted);
  line-height: 1.65;
}
.meligai-customer-ui .presence-entry-summary strong { color: var(--customer-navy); }
.meligai-customer-ui .presence-entry-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding-block: .65rem;
  color: var(--customer-navy);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.meligai-customer-ui .presence-entry-switch:hover { color: var(--customer-action); }

/* Map legacy variables only on task UI subtrees, not on ancestors of the
   card preview: the preview inherits its own legacy palette and content. */
.meligai-customer-ui :is(.presence-journey__hero, .presence-journey__editor,
  .presence-journey__intro, .presence-journey__recovery, .presence-journey__readonly,
  .presence-journey__confirm, .presence-journey__future, .presence-journey__steps) {
  --presence-ink: var(--customer-navy);
  --presence-muted: var(--customer-muted);
  --presence-line: var(--customer-line);
  --presence-surface: var(--customer-paper);
  --presence-navy: var(--customer-navy);
  --presence-teal: var(--customer-action);
  color: var(--customer-navy);
}
.meligai-customer-ui :is(.presence-panel__hero, .presence-panel__work,
  .presence-panel__steps, .presence-panel__notice, .presence-panel__qr) {
  --pp-ink: var(--customer-navy);
  --pp-muted: var(--customer-muted);
  --pp-line: var(--customer-line);
  --pp-navy: var(--customer-navy);
  --pp-teal: var(--customer-action);
  color: var(--customer-navy);
}
.meligai-customer-ui :is(.presence-journey, .presence-panel) { min-width: 0; }
.meligai-customer-ui :is(.presence-journey__hero, .presence-panel__hero) {
  min-width: 0;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--customer-navy);
}
.meligai-customer-ui :is(.presence-journey__hero h1, .presence-panel__hero h1) {
  font-family: Poppins, Inter, sans-serif;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.meligai-customer-ui :is(.presence-journey__hero p, .presence-panel__hero p) { line-height: 1.65; }
.meligai-customer-ui :is(.presence-journey__intro, .presence-journey__recovery,
  .presence-journey__readonly, .presence-journey__future, .presence-panel__notice) {
  border: 1px solid var(--customer-line);
  border-inline-start: 4px solid var(--customer-action);
  border-radius: var(--customer-radius);
  background: var(--customer-paper);
}
.meligai-customer-ui :is(.presence-journey__state, .presence-panel__badge) {
  max-width: 100%;
  border-radius: var(--customer-radius);
  white-space: normal;
  overflow-wrap: anywhere;
}
.meligai-customer-ui :is(.presence-button, .presence-panel__button) {
  min-height: 44px;
  max-width: 100%;
  border: 2px solid var(--customer-navy);
  border-radius: var(--customer-radius);
  box-shadow: var(--customer-control-shadow);
  font-family: Poppins, Inter, sans-serif;
  font-weight: 700;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.meligai-customer-ui :is(.presence-button--primary, .presence-panel__button--primary) {
  background: var(--customer-action);
  color: #fff;
}
.meligai-customer-ui :is(.presence-button--primary, .presence-panel__button--primary):hover:not(:disabled) {
  background: var(--customer-action-hover);
}
.meligai-customer-ui :is(.presence-button--secondary, .presence-panel__button--secondary) {
  background: #fff;
  color: var(--customer-navy);
}
.meligai-customer-ui :is(.presence-button--secondary, .presence-panel__button--secondary):hover:not(:disabled) {
  background: #eaf1ff;
}
.meligai-customer-ui .presence-panel__button--danger {
  background: var(--customer-error);
  color: #fff;
}
.meligai-customer-ui :is(.presence-button, .presence-panel__button):is(:disabled, [aria-disabled="true"]) {
  box-shadow: none;
  cursor: not-allowed;
  opacity: .7;
}
.meligai-customer-ui :is(.presence-journey__field, .presence-journey__assistant,
  .presence-panel__form) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  max-width: 100%;
  border-radius: var(--customer-radius);
  color: var(--customer-navy);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
.meligai-customer-ui :is(.presence-journey__check, .presence-panel__check) {
  min-height: 44px;
  padding-block: .45rem;
  line-height: 1.55;
}
.meligai-customer-ui :is(.presence-journey__check, .presence-panel__check) input {
  accent-color: var(--customer-blue);
}
.meligai-customer-ui :is(.presence-journey__assistant, .presence-panel__disclosure) summary {
  min-height: 44px;
  line-height: 1.5;
}
.meligai-customer-ui :is(.presence-entry-switch, .presence-button, .presence-panel__button):focus-visible,
.meligai-customer-ui :is(.presence-entry, .presence-journey__editor,
  .presence-journey__confirm, .presence-panel__work) :is(input, select, textarea, summary, a, button):focus-visible {
  outline: 3px solid var(--customer-blue);
  outline-offset: 3px;
}

@media (max-width: 46rem) {
  .meligai-customer-ui .presence-flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meligai-customer-ui .presence-flow__step { padding: .65rem; gap: .45rem; }
  .meligai-customer-ui :is(.presence-journey__hero, .presence-panel__hero) {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
  }
  .meligai-customer-ui :is(.presence-button, .presence-panel__button) { width: 100%; }
}
@media (forced-colors: active) {
  .meligai-customer-ui .presence-flow__step[aria-current="step"] {
    border-color: Highlight;
    outline: 1px solid Highlight;
    box-shadow: none;
  }
  .meligai-customer-ui :is(.presence-button, .presence-panel__button, .presence-entry-summary) {
    border-color: ButtonText;
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .meligai-customer-ui :is(.presence-flow, .presence-entry-summary,
    .presence-entry-switch, .presence-button, .presence-panel__button) {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }
}