/* Area styles: records. Only what the shared components (components.css) cannot
   express. Use the tokens from tokens.css — never a literal colour. */

/* ------------------------------------------------ split row + pickers --- */

/* A row whose main part is a link, with its own controls beside it. */
.rec-split .row__value { align-self: center; }
.rec-split { padding-block: 0; }

.rec-split__main {
  flex: 1; min-width: 0; align-self: stretch;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-2) 0;
  border: 0; background: none; color: inherit; text-align: left; text-decoration: none;
}

.rec-split__main:active { background: var(--surface-sunken); }

.rec-pick { cursor: pointer; user-select: none; }
.rec-pick:active { background: var(--surface-sunken); }

/* ------------------------------------------------------------ offers --- */

.rec-offers { display: flex; flex-direction: column; gap: var(--sp-3); }

.rec-offer {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.rec-offer--awarded { border-color: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.rec-offer--declined .rec-offer__name,
.rec-offer--declined .rec-offer__price { color: var(--ink-3); }

.rec-offer__head {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: var(--sp-3) var(--sp-4) var(--sp-2);
  color: inherit; text-decoration: none;
}

.rec-offer__head:active { background: var(--surface-sunken); }

.rec-offer__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.rec-offer__name { font-weight: 600; overflow-wrap: anywhere; }

.rec-offer__sub { color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }

.rec-offer__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; }

.rec-offer__price {
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15;
}

.rec-offer__price small { color: var(--ink-2); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; }

.rec-offer__price--none { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 500; }

.rec-badge {
  padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--success-wash); color: var(--success);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}

.rec-offer__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2);
  margin: 0; padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--line);
}

.rec-fact { min-width: 0; }
.rec-fact dt { color: var(--ink-2); font-size: var(--fs-xs); }
.rec-fact dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.rec-offer__scope {
  margin: 0; padding: 0 var(--sp-4) var(--sp-2);
  color: var(--ink-2); font-size: var(--fs-sm);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}

.rec-offer__actions {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line);
}

.rec-offer__actions > .icon-btn { margin-left: auto; }
.rec-offer__actions > .rec-status + .rec-offer__cta { margin-left: auto; }

.rec-offer__cta { flex: none; padding: 0 var(--sp-3); }

.rec-status {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--touch); padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--ink);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

.rec-status__chev { width: 14px; height: 14px; color: var(--ink-3); }

.rec-dot--list { background: var(--status-idea); }
.rec-dot--requested { background: var(--status-offers); }
.rec-dot--received { background: var(--status-work); }
.rec-dot--awarded { background: var(--status-planned); }
.rec-dot--declined { background: var(--line-strong); }
.rec-dot--paid { background: var(--accent); }
.rec-dot--unpaid { background: var(--warning); }

/* ------------------------------------------------------- notes, files --- */

.rec-note--warning { background: var(--warning-wash); color: var(--ink); }
.rec-note--success { background: var(--success-wash); color: var(--ink); }

.rec-file { padding-block: 0; padding-right: var(--sp-2); }

.rec-file__open {
  flex: 1; min-width: 0; align-self: stretch;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-2) 0;
  border: 0; background: none; color: inherit; text-align: left;
}

.rec-inv-value { display: inline-flex; align-items: center; gap: 6px; }
.rec-file-mark { display: grid; place-items: center; color: var(--ink-3); }
.rec-file-mark .icon { width: 16px; height: 16px; }

/* ---------------------------------------------------------- task list --- */

.rec-fold {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; min-height: var(--touch); padding: 0 var(--sp-1);
  border: 0; background: none; text-align: left;
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600;
}

.rec-fold__action { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); font-weight: 500; }
.rec-fold__action .icon { width: 16px; height: 16px; }

/* ---------------------------------------------------------- new measure --- */

.rec-cat { display: flex; flex-direction: column; }

.rec-cat__head {
  position: sticky; top: calc(-1 * var(--sp-1)); z-index: 1;
  margin: 0; padding: var(--sp-2) var(--sp-1) var(--sp-1);
  background: var(--surface);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600;
}

.rec-cat__custom { border-bottom: 0; }