/* RouteSeam components — requires routeseam-tokens.css loaded first. */

/* Buttons — 32px default height, 6px radius, weight 500 */
.rm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px;
  border-radius: var(--rm-radius-control);
  font: 500 13px/20px var(--rm-font-sans);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--rm-fast) var(--rm-ease), border-color var(--rm-fast) var(--rm-ease);
}
.rm-btn--primary { background: var(--rm-mint); color: var(--rm-on-accent); }
.rm-btn--primary:hover { background: var(--rm-mint-hover); }
.rm-btn--primary:active { background: var(--rm-mint-active); }
.rm-btn--secondary { background: var(--rm-bg-elevated); color: var(--rm-text); border-color: var(--rm-border); }
.rm-btn--secondary:hover { border-color: var(--rm-border-strong); background: var(--rm-bg-hover); }
.rm-btn--ghost { background: transparent; color: var(--rm-text-secondary); }
.rm-btn--ghost:hover { color: var(--rm-text); background: var(--rm-bg-hover); }
.rm-btn--danger { background: transparent; color: var(--rm-red); border-color: var(--rm-red-subtle-border); }
.rm-btn--danger:hover { background: var(--rm-red-subtle-bg); }
.rm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.rm-btn--hero { box-shadow: var(--rm-glow); } /* empty-state CTA + Active moment ONLY */

/* Inputs — 36px, elevated bg, hairline border, mint focus */
.rm-input, .rm-select {
  height: 36px; width: 100%; padding: 0 12px;
  background: var(--rm-bg-elevated); color: var(--rm-text);
  border: 1px solid var(--rm-border); border-radius: var(--rm-radius-control);
  font: 400 14px/22px var(--rm-font-sans);
  transition: border-color var(--rm-fast) var(--rm-ease);
}
.rm-input:hover { border-color: var(--rm-border-hover); }
.rm-input:focus { border-color: var(--rm-mint); outline: none; }
.rm-input--mono { font-family: var(--rm-font-mono); } /* hostnames, destinations, slugs */
.rm-input--error { border-color: var(--rm-red); }
.rm-field-label { font: 500 13px/20px var(--rm-font-sans); color: var(--rm-text-secondary); margin-bottom: 6px; display: block; }
.rm-field-error { font: 400 12px/16px var(--rm-font-sans); color: var(--rm-red); margin-top: 6px; }
.rm-field-hint  { font: 400 12px/16px var(--rm-font-sans); color: var(--rm-text-tertiary); margin-top: 6px; }

/* Status pills — 24px, one vocabulary, never invent new states */
.rm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--rm-radius-pill);
  font: 500 12px/16px var(--rm-font-sans); border: 1px solid;
}
.rm-pill--active    { color: var(--rm-mint);  background: var(--rm-mint-subtle-bg);  border-color: var(--rm-mint-subtle-border); }
.rm-pill--pending   { color: var(--rm-amber); background: var(--rm-amber-subtle-bg); border-color: var(--rm-amber-subtle-border); }
.rm-pill--failed    { color: var(--rm-red);   background: var(--rm-red-subtle-bg);   border-color: var(--rm-red-subtle-border); }
.rm-pill--suspended { color: var(--rm-gray);  background: var(--rm-gray-subtle-bg);  border-color: var(--rm-gray-subtle-border); }
.rm-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rm-pill__dot--pulse { animation: rm-pulse 1.6s var(--rm-ease) infinite; } /* Provisioning SSL only */
@keyframes rm-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Cards */
.rm-card {
  background: var(--rm-bg-raised);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-card);
  padding: var(--rm-card-pad);
}
.rm-card--glow { box-shadow: var(--rm-glow); border-color: var(--rm-mint-subtle-border); } /* hero moments only */

/* Tables — hairline rows, hover lift, no zebra */
.rm-table { width: 100%; border-collapse: collapse; }
.rm-table th {
  text-align: left; font: 500 12px/16px var(--rm-font-sans);
  color: var(--rm-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 10px 16px; border-bottom: 1px solid var(--rm-border);
}
.rm-table td { padding: 14px 16px; border-bottom: 1px solid var(--rm-border); font-size: 14px; }
.rm-table tbody tr { transition: background var(--rm-fast) var(--rm-ease); }
.rm-table tbody tr:hover { background: var(--rm-bg-hover); cursor: pointer; }
.rm-table .rm-mono { color: var(--rm-text); }

/* DNS record table — the copy-paste artifact; always mono values + copy buttons */
.rm-dns { border: 1px solid var(--rm-border); border-radius: var(--rm-radius-card); overflow: hidden; }
.rm-dns__row { display: grid; grid-template-columns: 80px 1fr 2fr 40px; align-items: center; padding: 12px 16px; gap: 12px; }
.rm-dns__row + .rm-dns__row { border-top: 1px solid var(--rm-border); }
.rm-dns__label { font: 500 12px/16px var(--rm-font-sans); color: var(--rm-text-tertiary); text-transform: uppercase; }
.rm-dns__value { font-family: var(--rm-font-mono); font-size: 13px; color: var(--rm-text); }

/* Step indicator — domain lifecycle */
.rm-steps { display: flex; align-items: center; gap: 8px; }
.rm-step { display: flex; align-items: center; gap: 8px; font: 500 13px/20px var(--rm-font-sans); color: var(--rm-text-tertiary); }
.rm-step--done { color: var(--rm-mint); }
.rm-step--current { color: var(--rm-text); }
.rm-step__bar { width: 32px; height: 1px; background: var(--rm-border); }
.rm-step--done + .rm-step .rm-step__bar, .rm-step--done .rm-step__bar { background: var(--rm-mint-subtle-border); }

/* Banners — never punitive; always include the next step */
.rm-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--rm-radius-card); border: 1px solid;
  font-size: 13px;
}
.rm-banner--warn { color: var(--rm-amber); background: var(--rm-amber-subtle-bg); border-color: var(--rm-amber-subtle-border); }
.rm-banner--error { color: var(--rm-red); background: var(--rm-red-subtle-bg); border-color: var(--rm-red-subtle-border); }
.rm-banner--info { color: var(--rm-text-secondary); background: var(--rm-bg-raised); border-color: var(--rm-border); }

/* Stat cards */
.rm-stat { display: flex; flex-direction: column; gap: 4px; }
.rm-stat__value { font: 600 24px/32px var(--rm-font-sans); letter-spacing: -0.01em; color: var(--rm-text); }
.rm-stat__label { font: 400 13px/20px var(--rm-font-sans); color: var(--rm-text-secondary); }

/* Usage/progress — quota bars */
.rm-progress { height: 4px; background: var(--rm-bg-elevated); border-radius: var(--rm-radius-pill); overflow: hidden; }
.rm-progress__fill { height: 100%; background: var(--rm-mint); border-radius: inherit; }
.rm-progress__fill--warn { background: var(--rm-amber); }   /* >= 80% */
.rm-progress__fill--over { background: var(--rm-red); }     /* >= 100% */

/* Skeleton shimmer — the loading state */
.rm-skeleton {
  background: linear-gradient(90deg, var(--rm-bg-elevated) 25%, var(--rm-bg-hover) 50%, var(--rm-bg-elevated) 75%);
  background-size: 200% 100%;
  animation: rm-shimmer 1.4s var(--rm-ease) infinite;
  border-radius: var(--rm-radius-control);
}
@keyframes rm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Empty state */
.rm-empty { text-align: center; padding: 64px 24px; }
.rm-empty__title { font: 600 16px/24px var(--rm-font-sans); color: var(--rm-text); margin-bottom: 8px; }
.rm-empty__body { font: 400 14px/22px var(--rm-font-sans); color: var(--rm-text-secondary); margin-bottom: 24px; }

/* App shell nav */
.rm-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--rm-radius-control);
  font: 500 13px/20px var(--rm-font-sans); color: var(--rm-text-secondary);
  transition: background var(--rm-fast) var(--rm-ease), color var(--rm-fast) var(--rm-ease);
}
.rm-nav-item:hover { color: var(--rm-text); background: var(--rm-bg-hover); }
.rm-nav-item--current { color: var(--rm-mint); background: var(--rm-mint-subtle-bg); }