/* Freelance rate widget (js/rate-widget.v1.js). Same palette as the beginner
   path and the continue-reading card (custom.css .path-nav). Immutable
   one-year cache on /css: ship any edit under a new file name. */
.rate-widget {
  --rw-accent: #2b6cb0;
  --rw-ink-muted: #595959;
  --rw-line: #dbe3ee;
  --rw-surface: #f7f9fc;
  --rw-paper: #fff;
  margin: 36px 0 10px;
  padding: 22px;
  border-left: 4px solid var(--rw-accent);
  border-radius: 0 6px 6px 0;
  background: var(--rw-surface);
}

.rate-widget h2 { margin: 0 0 6px; font-size: 1.35em; line-height: 1.3; }
.rate-widget__lead { margin: 0 0 16px; color: var(--rw-ink-muted); }

.rate-widget__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: end;
}

/* theme.css clears every form with ::before/::after, which a grid turns into
   empty cells (the first field slid one column right). */
.rate-widget__form::before,
.rate-widget__form::after { content: none; display: none; }

.rate-widget__field label { display: block; margin: 0 0 4px; font-size: 0.85em; font-weight: 600; color: var(--rw-ink-muted); }
.rate-widget__field input,
.rate-widget__field select {
  width: 100%;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid var(--rw-line);
  border-radius: 4px;
  background: var(--rw-paper);
  font: inherit;
}
.rate-widget__field input:focus-visible,
.rate-widget__field select:focus-visible,
.rate-widget .btn:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }

.rate-widget .btn { grid-column: 1 / -1; justify-self: start; width: auto; margin: 4px 0 0; }

.rate-widget__result {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--rw-line);
  border-radius: 6px;
  background: var(--rw-paper);
  line-height: 1.55;
}

@media (max-width: 600px) {
  .rate-widget { padding: 18px 16px; }
  .rate-widget__form { grid-template-columns: 1fr; }
  .rate-widget .btn { justify-self: stretch; }
}