/* Price a new job: demo layout only. Shared pieces come from site.css. */

.fee-for { color: var(--ink-2); font-size: var(--text-xs); font-weight: var(--weight-medium); margin-bottom: var(--space-2xs); }
.fee-label { font-size: var(--text-m); margin-bottom: var(--space-xs); }
.fee-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); margin-top: var(--space-m); }

.fee-out { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: var(--rule-w) solid var(--rule); }
.fee-bench { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }

.fee-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); margin-bottom: var(--space-m); }
.fee-sub--gap { margin-top: var(--space-xl); margin-bottom: var(--space-2xs); }
.fee-sub__title { font-size: var(--text-m); letter-spacing: -0.015em; line-height: 1.25; }
.fee-hint { color: var(--ink-2); font-size: var(--text-s); margin-bottom: var(--space-s); }

.fee-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); margin-top: var(--space-m); }
.fee-pair .field + .field { margin-top: 0; }

/* Staffing rows: role and rate | days stepper | row cost. */
.fee-roles { border-top: var(--rule-w) solid var(--ink); }
.fee-role {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 7.5em; gap: var(--space-2xs) var(--space-s); align-items: center;
  padding: var(--space-s) 0; border-bottom: var(--rule-w) solid var(--rule);
}
.fee-role__name { display: block; font-size: var(--text-body); font-weight: var(--weight-medium); line-height: 1.3; }
.fee-role__rate { display: block; color: var(--ink-2); font-size: var(--text-s); }
.fee-role__rate--none { color: var(--ink); }
.fee-role .stepper__box { width: 84px; flex: none; }
.fee-role__cost { text-align: right; font-size: var(--text-body); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.fee-role.is-missing .fee-role__cost { color: var(--ink-2); font-size: var(--text-s); font-weight: var(--weight-regular); }

/* Price: the one highlighted thing, marked in the group colour like a highlighter pen. */
.fee-price { position: sticky; top: calc(var(--bar-h) + var(--space-m)); }
.fee-range { margin-top: var(--space-2xs); }
.fee-nowrap { white-space: nowrap; box-shadow: inset 0 -0.26em 0 var(--stage); }
.fee-sum { margin-top: var(--space-l); border-top: var(--rule-w) solid var(--rule); }
.fee-sum div { display: flex; justify-content: space-between; gap: var(--space-s); padding: var(--space-xs) 0; border-bottom: var(--rule-w) solid var(--rule); font-size: var(--text-s); }
.fee-sum dt { color: var(--ink-2); }
.fee-sum dd { margin: 0; text-align: right; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fee-gap { margin-top: var(--space-m); padding: var(--space-s); background: var(--pale-2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-s); font-size: var(--text-s); line-height: 1.45; }
.fee-past { margin-top: var(--space-l); }
.fee-past__title { font-size: var(--text-s); font-weight: var(--weight-medium); margin-bottom: var(--space-3xs); }
.fee-price .start-again { margin-top: var(--space-m); }

@media (max-width: 1100px) {
  .fee-bench { grid-template-columns: 1fr; gap: var(--space-xl); }
  .fee-price { position: static; order: -1; }
}
@media (max-width: 600px) {
  .fee-label { font-size: var(--text-s); }
  #fee-request { min-height: 168px; }
  .fee-go .btn { width: 100%; }
  .fee-out { margin-top: var(--space-l); padding-top: var(--space-l); }
  .fee-pair { grid-template-columns: 1fr; gap: var(--space-s); }
  .fee-role { grid-template-columns: minmax(0, 1fr) auto; }
  .fee-role__who { grid-column: 1 / -1; }
}