/* ============================================================
   ROOT AND REIGN — components.css
   Reusable UI primitives. Import AFTER colors_and_type.css.
   ============================================================ */

/* ---------- Buttons ---------- */
.r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-s);
  letter-spacing: 0.01em;
  height: 44px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  text-decoration: none;
}
.r-btn:active { transform: translateY(1px); }

.r-btn--primary {
  background: var(--ochre);
  color: var(--obsidian);
  border-color: var(--ochre);
}
.r-btn--primary:hover  { background: var(--ochre-soft); border-color: var(--ochre-soft); }
.r-btn--primary:active { background: var(--ochre-deep); border-color: var(--ochre-deep); }

.r-btn--secondary {
  background: transparent;
  color: var(--bone);
  border-color: var(--silver);
}
.r-btn--secondary:hover  { background: rgba(192,192,192,0.08); border-color: var(--bone); }
.r-btn--secondary:active { background: rgba(192,192,192,0.14); }

.r-btn--ghost {
  background: transparent;
  color: var(--bone-muted);
  border-color: transparent;
  padding: 0 var(--sp-3);
}
.r-btn--ghost:hover { color: var(--bone); background: rgba(255,255,255,0.04); }

.r-btn--sm { height: 34px; font-size: var(--fs-caption); padding: 0 var(--sp-3); }
.r-btn--lg { height: 52px; font-size: var(--fs-body); padding: 0 var(--sp-6); }

/* ---------- Inputs ---------- */
.r-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.r-field label, .r-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--silver);
}
.r-input,
.r-textarea,
.r-select {
  background: var(--obsidian-sunken);
  border: 1px solid var(--line-raised);
  border-radius: var(--r-1);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 12px 14px;
  min-height: 44px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.r-textarea { min-height: 120px; resize: vertical; line-height: var(--lh-body); }
.r-input::placeholder, .r-textarea::placeholder { color: var(--bone-dim); }
.r-input:hover, .r-textarea:hover, .r-select:hover { border-color: var(--silver-dim); }
.r-input:focus, .r-textarea:focus, .r-select:focus {
  outline: none;
  border-color: var(--ochre);
  background: var(--obsidian);
}

/* ---------- Chip / pill ---------- */
.r-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-raised);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--bone-muted);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}
.r-chip:hover { border-color: var(--silver-dim); color: var(--bone); }
.r-chip--active {
  border-color: var(--ochre);
  color: var(--ochre);
  background: rgba(201,146,42,0.08);
}

/* ---------- Card ---------- */
.r-card {
  background: var(--obsidian-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-6);
}
.r-card--ochre-rim { box-shadow: var(--rim-ochre); border-color: transparent; }
.r-card--porch {
  background: var(--porch-raised);
  color: var(--ink);
  border-color: var(--porch-sunken);
}

/* ---------- Evaluator-specific: ingredient row ---------- */
.r-ingredient-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-body-s);
}
.r-ingredient-row__dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.r-ingredient-row--safe    .r-ingredient-row__dot { background: var(--safe); }
.r-ingredient-row--caution .r-ingredient-row__dot { background: var(--caution); }
.r-ingredient-row--avoid   .r-ingredient-row__dot { background: var(--avoid); }
.r-ingredient-row__verdict {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
}
.r-ingredient-row--safe    .r-ingredient-row__verdict { color: var(--safe); }
.r-ingredient-row--caution .r-ingredient-row__verdict { color: var(--caution); }
.r-ingredient-row--avoid   .r-ingredient-row__verdict { color: var(--avoid); }

/* ---------- Fitzpatrick badge ---------- */
.r-fitz {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px;
  border: 1px solid var(--line-ochre);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--ochre);
}
.r-fitz__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ochre); }

/* ---------- Divider with ochre tick ---------- */
.r-divider-tick {
  height: 1px;
  background: var(--line);
  position: relative;
  margin: var(--sp-8) 0;
}
.r-divider-tick::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 40px; height: 3px;
  background: var(--ochre);
}

/* ---------- Page container ---------- */
.r-container    { max-width: var(--container-max);    margin: 0 auto; padding: 0 var(--sp-6); }
.r-prose        { max-width: var(--container-prose);  margin: 0 auto; padding: 0 var(--sp-6); }
.r-narrow       { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--sp-6); }