.button,
button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  gap: var(--space-2);
  padding: 0.625rem var(--space-4);
  text-align: center;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.button:hover,
button:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

.button.secondary,
.button--secondary,
button.button--secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-primary);
}

.button.secondary:hover,
.button--secondary:hover,
button.button--secondary:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-subtle);
  color: var(--color-primary);
}

.button--ghost,
button.button--ghost {
  background: transparent;
  color: var(--color-primary);
}

.button--danger,
button.button--danger {
  background: var(--color-danger);
}

.button--danger:hover,
button.button--danger:hover {
  background: #8d202a;
}

button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

.card {
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.card > :last-child {
  margin-bottom: 0;
}

.card--subtle {
  background: var(--color-surface-subtle);
  box-shadow: none;
}

.card--emphasized {
  border-color: #8eb6c7;
  box-shadow: var(--shadow-md);
}

.auth-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding-block: var(--space-6);
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

.auth-card #clerk-component {
  width: 100%;
}

.grid,
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
  margin-block: var(--space-6);
}

.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  padding: 0.3125rem var(--space-2);
  vertical-align: middle;
}

.badge--success { background: var(--color-success-subtle); border-color: #9ccdb7; color: var(--color-success); }
.badge--warning { background: var(--color-warning-subtle); border-color: #e7c36d; color: var(--color-warning); }
.badge--danger { background: var(--color-danger-subtle); border-color: #e3a9ae; color: var(--color-danger); }
.badge--info { background: var(--color-info-subtle); border-color: #9ccbd5; color: var(--color-info); }

.notice,
.success,
.warning,
.error {
  border: 1px solid;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.notice { background: var(--color-info-subtle); border-color: #9ccbd5; color: var(--color-info); }
.success { background: var(--color-success-subtle); border-color: #9ccdb7; color: var(--color-success); }
.warning { background: var(--color-warning-subtle); border-color: #e7c36d; color: var(--color-warning); }
.error { background: var(--color-danger-subtle); border-color: #e3a9ae; color: var(--color-danger); }

form {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

fieldset {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

legend {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  padding-inline: var(--space-1);
}

label {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: 0.6875rem 0.75rem;
}

input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.checks label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-medium);
}

.checks input {
  width: auto;
}

.inline-form {
  display: inline-grid;
  margin: 0 0 0 var(--space-2);
}

.muted,
.disclaimer {
  color: var(--color-text-muted);
}

.disclaimer,
.meta {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.opportunity {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.opportunity + .opportunity {
  margin-top: var(--space-3);
}

.opportunity h3 {
  margin-bottom: var(--space-2);
}

.email-form {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
}

.email-form label {
  grid-column: 1 / -1;
}

.empty-state {
  color: var(--color-text-secondary);
  text-align: center;
}

.page-header {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.page-header > * {
  margin-bottom: 0;
}

.eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-heading {
  margin-bottom: var(--space-8);
}

.page-heading__title-row,
.section-heading,
.opportunity-card__header,
.monitor-card__header,
.opportunity-card__actions,
.saved-item-card,
.history-card,
.action-card {
  display: flex;
  gap: var(--space-4);
}

.page-heading__title-row,
.section-heading,
.opportunity-card__header,
.monitor-card__header {
  align-items: flex-start;
  justify-content: space-between;
}

.page-heading h1,
.section-heading h2,
.opportunity-card h2,
.monitor-card h2,
.saved-item-card h2,
.history-card h2 {
  margin-bottom: var(--space-2);
}

.page-heading__title-row .badge {
  flex: 0 0 auto;
  margin-top: var(--space-1);
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.action-card {
  align-items: center;
  justify-content: space-between;
  border-color: #9ec4d1;
  background: var(--color-info-subtle);
}

.action-card > div {
  min-width: 0;
}

.action-card h2 {
  margin-bottom: var(--space-2);
}

.action-card .button {
  flex: 0 0 auto;
}

.section-heading {
  margin: var(--space-8) 0 var(--space-4);
}

.section-heading > div > * {
  margin-bottom: 0;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.metric-card {
  display: flex;
  min-height: 12.5rem;
  flex-direction: column;
  margin-bottom: 0;
}

.metric-card__label,
.metric-card__detail {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.metric-card__label {
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-semibold);
}

.metric-card__value {
  margin-bottom: var(--space-1);
  color: var(--color-primary);
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.04em;
  line-height: 1;
}

.metric-card__detail {
  margin-bottom: var(--space-4);
}

.metric-card .text-link {
  margin-top: auto;
}

.opportunity-list,
.monitor-list,
.saved-item-list,
.history-list {
  display: grid;
  gap: var(--space-4);
}

.opportunity-list > .card,
.monitor-list > .card,
.saved-item-list > .card,
.history-list > .card {
  margin-bottom: 0;
}

.opportunity-card__header h2 a,
.saved-item-card h2 a,
.history-card h2 a {
  color: inherit;
  text-decoration: none;
}

.opportunity-card__header h2 a:hover,
.saved-item-card h2 a:hover,
.history-card h2 a:hover {
  color: var(--color-info);
  text-decoration: underline;
}

.score-chip {
  display: grid;
  min-width: 4.5rem;
  border: 1px solid #9ccbd5;
  border-radius: var(--radius-md);
  background: var(--color-info-subtle);
  color: var(--color-info);
  padding: var(--space-2);
  text-align: center;
}

.score-chip strong {
  font-size: var(--font-size-xl);
  line-height: 1;
}

.score-chip span {
  margin-top: var(--space-1);
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.opportunity-card__organization,
.saved-item-card__meta,
.history-card__meta,
.monitor-card__description {
  color: var(--color-text-secondary);
}

.opportunity-metadata,
.monitor-metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.opportunity-metadata > div,
.monitor-metadata > div {
  min-width: 0;
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-3);
}

.opportunity-metadata dt,
.monitor-metadata dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.opportunity-metadata dd,
.monitor-metadata dd {
  margin: var(--space-1) 0 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.opportunity-card__reason,
.analysis-card {
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  padding: var(--space-4);
}

.opportunity-card__reason {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.opportunity-card__reason span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.opportunity-card__actions {
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.opportunity-card__actions .inline-form {
  margin: 0;
}

.monitor-card__header {
  margin-bottom: var(--space-3);
}

.monitor-card__header .badge {
  flex: 0 0 auto;
}

.monitor-card form {
  margin: var(--space-5) 0 0;
}

.saved-item-card,
.history-card {
  align-items: center;
  justify-content: space-between;
}

.saved-item-card > div:first-child,
.history-card > div {
  min-width: 0;
}

.saved-item-card__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}

.saved-item-card__actions .inline-form {
  margin: 0;
}

.limit-card,
.paywall-card {
  margin-top: var(--space-6);
}

.paywall-card {
  border-color: #9ccbd5;
  background: var(--color-info-subtle);
}

.back-link {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}

.opportunity-detail__description {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.opportunity-metadata--detail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analysis-card {
  margin-top: var(--space-5);
}

.analysis-card h2 {
  margin-bottom: var(--space-2);
}

@media (max-width: 640px) {
  .card {
    padding: var(--space-4);
  }

  .email-form {
    grid-template-columns: 1fr;
  }

  .inline-form {
    display: grid;
    margin: var(--space-3) 0 0;
  }

  .page-heading__title-row,
  .section-heading,
  .opportunity-card__header,
  .monitor-card__header,
  .saved-item-card,
  .history-card,
  .action-card {
    align-items: stretch;
    flex-direction: column;
  }

  .action-card .button,
  .saved-item-card__actions,
  .history-card > .button {
    width: 100%;
  }

  .section-heading {
    gap: var(--space-1);
  }

  .metric-grid,
  .opportunity-metadata,
  .monitor-metadata,
  .opportunity-metadata--detail {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: auto;
  }

  .saved-item-card__actions {
    display: grid;
  }

  .saved-item-card__actions .inline-form {
    margin: 0;
  }
}

/* Utilitário compartilhado: texto só para leitores de tela. Também definido
   em home.css (landing), replicado aqui para o shell autenticado. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Onboarding guiado + oferta Pro (ETAPA 06B).
   Sem JavaScript: painel no fluxo da página (não bloqueia, não captura).
   Com JavaScript (html.has-js): ui.js promove para diálogo modal. */
.onboarding-modal {
  margin-bottom: var(--space-6);
}

.onboarding-modal__dialog {
  position: relative;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.onboarding-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
}

.onboarding-modal__close:hover {
  background: transparent;
  color: var(--color-text-primary);
}

.onboarding-modal h2 {
  margin-bottom: var(--space-2);
}

/* O título recebe foco programático (ui.js) só para leitores de tela - não
   está na ordem de Tab. Suprimir o anel de foco visível evita o retângulo
   em volta do título, sem remover indicador de nenhum controle navegável. */
.onboarding-modal__dialog h2:focus {
  outline: none;
}

.onboarding-modal__blocks,
.onboarding-modal__benefits {
  margin: var(--space-4) 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.onboarding-modal__benefits {
  gap: var(--space-1);
}

.onboarding-modal__blocks h3 {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-base);
}

.onboarding-modal__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.onboarding-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.onboarding-modal__actions > form,
.onboarding-modal__actions > .button {
  flex: 1 1 12rem;
}

.onboarding-modal__actions > form .button {
  width: 100%;
}

.onboarding-modal__escape {
  display: none;
}

html.has-js .onboarding-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  display: grid;
  place-items: start center;
  padding: var(--space-4);
  overflow-y: auto;
  background: rgb(23 32 51 / 0.55);
}

html.has-js .onboarding-modal__dialog {
  width: 100%;
  max-width: 560px;
  margin: auto;
}

@media (max-width: 640px) {
  .onboarding-modal__dialog {
    padding: var(--space-5);
  }

  .onboarding-modal__actions {
    flex-direction: column;
  }

  .onboarding-modal__actions > form,
  .onboarding-modal__actions > .button {
    flex: 1 1 auto;
    width: 100%;
  }

  html.has-js .onboarding-modal {
    padding: 0;
  }

  html.has-js .onboarding-modal__dialog {
    max-width: none;
    min-height: 100%;
    border: 0;
    border-radius: 0;
  }
}