/* the shipping bin and the market (issue #48, public/js/economy.ts) */
.ec-market { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 8px; padding: 6px 9px; background: #fff6d8; border: 2px solid var(--paper2); border-radius: 8px; font-size: 13.5px; line-height: 1.3; }
.ec-up { color: var(--good); font-weight: 700; }
.ec-down { color: var(--bad); font-weight: 700; }
.ec-bin h4 { margin-top: 10px; }
.ec-bin .shiprow .btn { min-width: 7.2em; } /* (every button one width, Take back too: #21) */

/* the household purse (M12 S, public/js/purse.ts): the Purse page, phone first */
#gold.pu-tap { cursor: pointer; pointer-events: auto; }
#gold.pu-tap:hover { filter: brightness(1.08); }
.pu-page h4 { margin: 10px 0 4px; }
.pu-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px; }
.pu-total { display: flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 700; line-height: 1; }
.pu-total .coin.big { width: 18px; height: 18px; }
.pu-tabs { margin-top: 4px; }
.pu-weeknav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
.pu-weeknav .sub { margin-left: 4px; }
.pu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.pu-col .list { gap: 3px; }
.pu-kind { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; background: #fff6e2; border: 1px solid var(--paper2); font-size: 13.5px; line-height: 1.2; }
.pu-kind .grow { min-width: 0; }
.pu-ic { flex: none; width: 1.4em; text-align: center; }
.pu-ic.big { font-size: 20px; width: 28px; }
.pu-bar { flex: none; width: 56px; height: 7px; border-radius: 4px; background: var(--paper2); overflow: hidden; }
.pu-bar span { display: block; height: 100%; border-radius: 4px; }
.pu-kind.in .pu-bar span { background: linear-gradient(90deg, var(--good2), #9cd07c); }
.pu-kind.out .pu-bar span { background: linear-gradient(90deg, #d8963a, #f2c94c); }
.pu-n { flex: none; min-width: 4.4em; text-align: right; font-variant-numeric: tabular-nums; }
.pu-kind.in .pu-n, .pu-plus { color: var(--good); }
.pu-kind.out .pu-n, .pu-minus { color: #9a5a1e; }
.pu-who { margin-top: 6px; padding: 6px 9px; border-radius: 8px; background: #fff6d8; border: 2px solid var(--paper2); }
.pu-who h4 { margin-top: 0; }
.pu-person { font-size: 13.5px; line-height: 1.35; margin: 2px 0; }
.pu-recent .jl { font-size: 13px; }
.pu-sec { margin-top: 6px; }
.pu-sec .row { align-items: center; }
.pu-done { color: var(--good); font-weight: 700; white-space: nowrap; }
.pu-fund .grow .bar { margin-top: 4px; }
.pu-give { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pu-paywith { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 8px; margin: 4px 0; border-radius: 8px; background: #f0f6e2; border: 2px solid var(--paper2); }
.pu-shares { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.pu-wallet .pu-head { margin-top: 8px; }
.pu-maker { border-top: 2px dashed var(--paper2); padding-top: 4px; margin-top: 10px; }
.pu-ask { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.pu-away { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; padding: 6px 9px; border-radius: 8px; background: #fff6d8; border: 2px solid var(--paper2); font-size: 14px; }
.pu-link { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
@media (max-width: 600px) {
  .pu-cols { grid-template-columns: 1fr; }
  .pu-total { font-size: 22px; }
  .pu-bar { width: 40px; }
  .pu-kind { font-size: 13px; }
}