/* Anonymous customer portal primitives (Phase 13) */

.portal-body {
  margin: 0;
  font-family: var(--font-family-ui, var(--font-family-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
  background: var(--color-background, #f5f5f5);
  color: var(--color-text, #222);
}

.portal-page {
  min-height: 100vh;
  background: var(--color-background, #f5f5f5);
  color: var(--color-text, #222);
  font-family: var(--font-family-ui, var(--font-family-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
}

.portal-container {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-6, 32px) var(--space-4, 16px) var(--space-6, 32px);
}

.portal-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}

.portal-title {
  margin: 0;
  font-size: var(--font-size-xl, 1.5rem);
  line-height: var(--line-height-tight, 1.2);
  font-weight: 650;
  color: var(--color-text-strong, var(--color-text, #222));
}

.portal-h2 {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-lg, 1.25rem);
  line-height: var(--line-height-tight, 1.2);
  font-weight: 650;
  color: var(--color-text-strong, var(--color-text, #222));
}

.portal-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: var(--radius-3, 12px);
  box-shadow: var(--elevation-1, 0 1px 2px rgba(0, 0, 0, 0.06));
  padding: var(--space-5, 24px);
}

.portal-card__title {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-xs, 0.875rem);
  line-height: var(--line-height-normal, 1.3);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #666);
}

.portal-meta {
  color: var(--color-text-muted, #666);
  font-size: 0.875rem;
  line-height: 1.3;
}

.portal-field-error {
  margin-top: var(--space-1, 4px);
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--color-danger, #d32f2f);
}

.portal-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: var(--radius-3, 12px);
  overflow: hidden;
}

.portal-table__th {
  text-align: left;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-text-muted, #666);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  background: var(--color-surface-2, var(--color-surface-muted, #f7f7f7));
}

.portal-table__td {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--color-border-subtle, #f3f3f3);
  vertical-align: top;
}

.portal-table tbody tr:hover .portal-table__td {
  background: rgba(21, 101, 192, 0.04);
}

.portal-table__cell--end {
  text-align: right;
}

.portal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 12px);
}

.portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 12px 16px;
  border-radius: var(--radius-2, 8px);
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
              border-color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.portal-btn--primary {
  background: var(--color-primary, #1565c0);
  border-color: var(--color-primary, #1565c0);
  color: #fff;
}

.portal-btn--secondary {
  background: var(--color-surface, #fff);
  border-color: var(--color-border-strong, var(--color-border, #e5e5e5));
  color: var(--color-text-strong, var(--color-text, #222));
}

.portal-btn:focus {
  outline: none;
}

.portal-btn:focus-visible {
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(21, 101, 192, 0.25));
}

/* Status chip (utility) */
.portal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-normal, 1.35);
  font-weight: 650;
  border: 1px solid var(--color-border, #e5e5e5);
  background: var(--color-surface-2, #f7f7f7);
  color: var(--color-text-strong, #222);
}

.portal-chip--primary {
  border-color: rgba(21, 101, 192, 0.25);
  background: var(--color-primary-container, #E3F2FD);
  color: var(--color-primary, #1565c0);
}

.portal-link {
  color: var(--color-primary, #1565c0);
  text-decoration: none;
}

.portal-link:hover {
  text-decoration: underline;
}

.portal-alert--error {
  border: 1px solid var(--color-danger, #d32f2f);
  background: var(--color-surface, #fff);
  border-radius: var(--radius-2, 8px);
  padding: var(--space-4, 16px);
}

.portal-alert__title {
  display: block;
  margin-bottom: var(--space-1, 4px);
}

.portal-skeleton {
  display: block;
  height: 14px;
  border-radius: var(--radius-1, 4px);
  background: var(--color-surface-muted, #f0f0f0);
  border: 1px solid var(--color-border-subtle, #f3f3f3);
}

.portal-skeleton--lg {
  height: 20px;
}

.portal-skeleton--w60 {
  width: 60%;
}

.portal-skeleton--w40 {
  width: 40%;
}