/*
 * Ryder application component patterns.
 *
 * Keep this layer semantic and reusable. Feature styles should handle layout
 * and page-specific composition only; they should not redefine these states.
 */
.ryder-page-header {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin: var(--ryder-space-3) 0 var(--ryder-space-6);
}

.ryder-page-header h1 {
  color: var(--ryder-color-text);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.ryder-page-header p {
  color: var(--ryder-color-text-subtle);
  margin: var(--ryder-space-2) 0 0;
}

.ryder-panel {
  background: var(--ryder-color-surface);
  border: 1px solid var(--ryder-color-border);
  border-radius: var(--ryder-radius-panel);
}

.ryder-panel-toolbar {
  align-items: center;
  display: flex;
  gap: var(--ryder-space-4);
  justify-content: space-between;
}

.ryder-icon-button {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
}

.ryder-icon-button:focus-visible {
  outline: 2px solid var(--ryder-focus-color);
  outline-offset: 2px;
}

.ryder-status-message {
  border: 1px solid var(--ryder-color-border);
  border-radius: var(--ryder-radius-panel);
  padding: var(--ryder-space-3) var(--ryder-space-4);
}

@media (max-width: 767px) {
  .ryder-page-header,
  .ryder-panel-toolbar { align-items: stretch; flex-direction: column; }
}