/* ==========================================================================
   IRONITT v2 — Profile, Quick Hub and Settings (first slice)
   --------------------------------------------------------------------------
   Owns the settings support row; fixes the Quick Hub's custom-status row,
   whose text field refused to shrink and pushed the "clear after" picker off
   the right edge of a phone.
   ========================================================================== */

/* ---- Quick Hub: custom status row ------------------------------------- */
/* A flex text field keeps its intrinsic width unless told otherwise; with
   the emoji, clear and "clear after" controls beside it, that overflowed
   any screen under ~420px. */
#qh-custom-input { min-width: 0; }
.qh-clear-after { flex: none; max-width: 96px; }

/* ---- Settings: field buttons are round like every other button ------- */
.fs-field-edit-btn { border-radius: var(--radius-pill); }

/* ---- Settings: support row --------------------------------------------- */
.fs-coffee {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.fs-coffee-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  /* Accent, not gold: gold means IRON, and this row is not about IRON. */
  background: var(--accent-light);
  color: var(--accent-color);
  font-size: var(--font-size-lg);
}
.light-mode .fs-coffee-icon { color: var(--accent-solid); }
.fs-coffee-info { flex: 1; min-width: 0; }
.fs-coffee-title { margin-bottom: 2px; font-weight: var(--font-weight-semibold); }
.fs-coffee-desc { font-size: var(--font-size-xs); color: var(--text-muted); }
/* The house button: green with dark text. */
.fs-coffee-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.fs-coffee-btn:hover { background: var(--accent-hover); }
.fs-coffee-btn:active { transform: scale(0.97); }

@media (max-width: 700px) {
  .fs-coffee { flex-wrap: wrap; }
  .fs-coffee-btn { width: 100%; justify-content: center; }
}