/* donate — the Donate card on another citizen's profile and "Donations received" on your own.
   Layout and product art only; tabs, fields, tables and buttons are shared components (docs/DESIGN.md). */
@layer pages {
  .donate-card .card-head { flex-wrap: wrap; }

  /* Money: currency, amount, then the button, in one row on wide screens. */
  .donate-form { display: grid; grid-template-columns: auto minmax(220px, 360px) auto; justify-content: start; gap: var(--sp-4) var(--sp-5); align-items: start; }
  .donate-form.items { grid-template-columns: minmax(0, 1fr); }
  /* The button lines up with the controls, below the labels. */
  .donate-send { margin-top: calc(var(--fs-sm) * 1.3 + 6px); }
  .donate-note { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }
  .donate-note .icon { color: var(--text-3); }

  /* Items: one row per stack of your storage. */
  .donate-items { display: flex; flex-direction: column; }
  .donate-loading { display: flex; flex-direction: column; gap: var(--sp-2); }
  .donate-loading .skeleton { height: 52px; border-radius: var(--r-md); }
  .donate-table .row { grid-template-columns: minmax(0, 1.6fr) minmax(70px, .5fr) minmax(150px, 1fr) 136px; }
  .donate-table .num { text-align: right; justify-content: flex-end; }
  .donate-what { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  .donate-what > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
  .donate-art { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .donate-art img { width: 34px; height: 34px; object-fit: contain; filter: var(--art-shadow); }
  .donate-have { color: var(--text-2); }
  .donate-cell-label { display: none; }
  .donate-give { display: flex; justify-content: flex-end; }
  .donate-give .btn { width: 100%; }
  .donate-item .with-action input { font-variant-numeric: tabular-nums; }
  .donate-item .stars { display: inline-flex; gap: 0; font-size: var(--fs-xs); line-height: 1; letter-spacing: -.04em; }

  /* Donations received. */
  .pending-donations .card-head .badge { flex: none; }
  .pending-table .row { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-4); }
  .pending-amount { justify-self: end; }
  .pending-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

  @media (max-width: 720px) {
    .donate-form { grid-template-columns: minmax(0, 1fr); }
    .donate-send { margin-top: 0; width: 100%; }
    .donate-card .tabs { width: 100%; }
    .donate-table .row.head { display: none; }
    .donate-table .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what have" "qty give"; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 0; }
    .donate-what { grid-area: what; }
    .donate-have { grid-area: have; }
    .donate-item .with-action { grid-area: qty; }
    .donate-give { grid-area: give; }
    .donate-cell-label { display: inline; color: var(--text-3); }
    .pending-table .row { grid-template-columns: minmax(0, 1fr) auto; }
    .pending-actions { grid-column: 1 / -1; }
    .pending-actions .btn { flex: 1; }
  }

  /* What a donation offer holds, in its answer box. */
  .offer-line { display: flex; align-items: center; gap: var(--sp-3); margin: 0; font-size: var(--fs-md); }
  .offer-line img { width: 36px; height: 36px; object-fit: contain; filter: var(--art-shadow); }
  .offer-line b { font: var(--fw-semibold) var(--fs-h2) / 1 var(--font-display); }
  .offer-line span { color: var(--text-2); }
}