/* Trade pop-up (tradedialog.js). The overlay container (.offer-popup) centres it over the map. */
.offer-popup { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.offer-popup:empty { display: none; }
/* One fixed size for every tab, so switching tabs never moves anything. */
.td-card { width: min(800px, 96%); height: min(600px, calc(100% - 24px)); overflow-y: auto; display: flex; flex-direction: column; }
.td-card > .cc-actions, .td-card > .op-actions { margin-top: auto; }
.td-close { margin-left: auto; font-size: 1.1rem; line-height: 1; }
.td-tabs { margin: 0; }
.td-side { display: flex; flex-direction: column; gap: 6px; }
.td-side-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange-dim); font-weight: 700; }
/* all card kinds in one fixed 8-column grid, on every tab */
.td-picker { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.td-picker .cc-option { gap: 4px; }
.td-picker .cc-stepper { gap: 2px; }
.td-picker .cc-stepper button { padding: 1px 7px; }
.td-card .pcard-ribbon { display: none; }   /* commodities: the dark frame is enough here */
.td-picker .cc-option.off { opacity: 0.45; }
.td-picker .pcard { width: 52px; height: 72px; cursor: default; }
.td-picker .pcard-art { width: 30px; height: 30px; }
.td-picker .pcard:hover { transform: none; }
.td-picker .pcard.raised { transform: translateY(-6px); }
.td-choice { padding: 0; background: none; border: 2px solid transparent; border-radius: 10px; }
.td-choice .pcard { width: 50px; height: 70px; }
.td-choice .pcard-art { width: 30px; height: 30px; }
.td-choice:hover { background: none; border-color: var(--accent-border-medium); }
.td-choice.on { border-color: var(--orange); background: var(--accent-faint); }
.td-rate { height: 27px; display: grid; place-items: center; font-family: var(--mono); color: var(--muted); }
.td-times { display: flex; align-items: center; gap: 6px; }
.td-times b { font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: center; }
.td-answers { display: flex; flex-direction: column; gap: 6px; }
.td-answer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.88rem; padding: 6px 0; border-top: 1px solid var(--border); }
.td-answer .pcard { width: 34px; height: 48px; }
.td-answer .pcard-art { width: 22px; height: 22px; }
.td-answer .pcard-name, .td-answer .pcard-corner, .td-answer .pcard-ribbon { display: none; }
.ts-who { font-weight: 700; color: var(--text); border-bottom: 2px solid var(--who); }
/* the offer shown as two sides */
.op-body { display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; }
.op-cards { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.op-cards .pcard { cursor: default; }
.op-cards .pcard:hover { transform: none; }
.op-arrow { font-size: 1.6rem; color: var(--muted); }
.op-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.td-card .why { margin: 0; font-size: 0.82rem; color: var(--muted); margin-right: auto; }

/* every tab starts with one subtitle line of the same height, so the cards start at the same place */
.td-sub { margin: 0; min-height: 2.6em; display: flex; align-items: center; }
/* The strip sits on the bottom of the map. The hand underneath is what you give. */
#g-trade {
  position: absolute; inset: auto 8px 8px 8px; z-index: 8; height: auto;
  display: flex; justify-content: center; align-items: flex-end; pointer-events: none;
}
#g-trade .td-card { pointer-events: auto; width: min(920px, 100%); height: auto; max-height: min(46vh, 320px); gap: 8px; }
.td-top {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  grid-template-areas: "lead actions" "deal deal";
  gap: 6px 10px; align-items: center;
}
.td-top > :first-child { grid-area: lead; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-deal { grid-area: deal; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.td-top .td-actions { grid-area: actions; }
.td-actions { justify-self: end; display: flex; gap: 6px; align-items: center; }
.td-want {
  display: grid; grid-template-columns: 7rem repeat(var(--kinds, 5), minmax(0, 1fr));
  gap: 6px; align-items: center;
}
.td-want .name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--orange-dim); font-weight: 700;
}
button.trade-pick {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  padding: 2px; background: transparent; color: var(--text); border: 2px solid transparent;
}
button.trade-pick:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent-border-medium); }
button.trade-pick.on { border-color: var(--orange); background: var(--accent-faint); }
button.trade-pick .num { font-variant-numeric: tabular-nums; font-size: 0.75rem; line-height: 1; min-height: 1em; }
#g-trade button.trade-pick .pcard { width: 54px; height: 74px; }
#g-trade button.trade-pick .pcard-art { width: 28px; height: 28px; }
#g-trade button.trade-pick .pcard-name {
  display: block; width: 100%; min-width: 0; box-sizing: border-box;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  font-size: 0.55rem; letter-spacing: 0; padding: 0 2px;
}
.td-answers {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
  gap: 4px 8px; align-items: center;
}
.td-answers .clip, .td-bar .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* One column track for every row: who | you give | you get | action. */
.td-book { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.td-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1fr) 12rem;
  column-gap: 12px; align-items: center; min-width: 0;
}
.td-row .lab, .td-sides .lab {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--orange-dim); font-weight: 700;
}
.td-row .td-note { grid-column: 2 / 4; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.td-row .td-act { grid-column: 4; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.td-row .td-act button { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-sides { grid-area: deal; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; }
.td-minis { display: flex; gap: 4px; align-items: flex-end; min-width: 0; }
.td-mini .pcard { width: 46px; height: 64px; cursor: default; }
.td-mini .pcard:hover { transform: none; }
.td-mini .pcard-art { width: 24px; height: 24px; }
.td-mini .pcard-ribbon { display: none; }
.td-mini .pcard-name {
  display: block; width: 100%; min-width: 0; box-sizing: border-box;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  font-size: 0.5rem; letter-spacing: 0; padding: 0 2px;
}