/*
 * Couvra Base Styles
 * Reset, typography, form field wrappers, layout utilities.
 */

@layer base {

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

/* Form field wrapper */
.form-field {
  margin-bottom: 1rem;
  display: block;
}

/* Form label */
.form-label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

/* Form error message */
.form-error {
  font-size: var(--font-size-base);
  color: var(--color-danger);
  margin-top: 0.25rem;
}

/* Form help — muted description text below an input, inside .form-field */
.form-help {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

/* Rails field_with_errors wrapper — transparent to layout */
.field_with_errors {
  display: contents;
}

.field_with_errors .input,
.field_with_errors .select,
.field_with_errors .textarea {
  border-color: var(--color-danger);
}

/* Visually hidden (screen reader only) */
.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;
}

/* Layout utilities */
.stack {
  display: flex;
  flex-direction: column;
}

.stack--sm {
  gap: var(--space-sm);
}

.stack--md {
  gap: var(--space-lg);
}

.stack--lg {
  gap: var(--space-xl);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.cluster--2xs {
  gap: var(--space-2xs);
}

.cluster--xs {
  gap: var(--space-xs);
}

.cluster--sm {
  gap: var(--space-sm);
}

.cluster--md {
  gap: var(--space-md);
}

.split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

/* Text utilities */
.text-quiet {
  color: var(--color-text-quiet);
}

.text-bold {
  font-weight: var(--font-weight-bold);
}

/* Mobile-only visibility */
.admin-mobile-only {
  display: none !important;
}

@media (max-width: 900px) {
  .admin-mobile-only {
    display: initial !important;
  }
}

/* Remove default link underline on button-wrapping links */
a.admin-button-link {
  text-decoration: none;
  color: inherit;
}
}