/* The office's Rewards area (stage 2, plan B, task 11). Linked from
   index.html; only this area's own rules go here. */

.r-missing { border: 2px solid var(--warn); color: var(--warn); }
.r-meta { color: var(--muted); font-size: .9rem; margin: .2rem 0 .6rem; }
.r-msg { min-height: 1.2em; margin: .4rem 0 0; color: var(--warn); }
.r-done { margin: .2rem 0 0; color: var(--chalk); }
.r-done:empty { display: none; }
.r-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.r-row > button, .r-row > select { min-height: 44px; }
.r-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.r-statement { font-weight: 600; font-size: 1.05rem; border: 2px solid var(--gold); overflow-wrap: anywhere; }

.r-ledger { margin: 0 0 .4rem; }
.r-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-when { white-space: nowrap; color: var(--muted); }
.r-which { overflow-wrap: anywhere; }
.r-empty { color: var(--muted); }
.r-footer { color: var(--muted); font-size: .9rem; margin: 0 0 1.25rem; }

.r-gift h3, .r-fix h3 { margin: 0 0 .3rem; }
.r-gift select {
  font: inherit; flex: 1 1 14rem; min-width: 0; max-width: 100%; padding: .4rem .6rem; border-radius: 8px;
  border: 1px solid #555; background: #1b1e19; color: var(--chalk);
}
.r-when-line { font-size: .9rem; color: var(--muted); margin: .6rem 0 0; }

.r-form { margin: 0; max-width: 32rem; }
.r-amounts { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.r-amounts label { display: grid; gap: .3rem; flex: 1 1 8rem; }
.r-amounts input { width: 100%; }
.r-confirm { font-weight: 600; margin: .2rem 0 .3rem; }

@media (max-width: 639px) {
  .r-row > button { flex: 1 1 auto; }
  .r-when { white-space: normal; }
}