/* ============================================================================
   trade.css - EZ Heroes Trade module (hub + trade page)
   Page prefix: tr-   |  Rides alongside ez42-ui.css. Geometry only, tokens only.
   Logical properties throughout (one rule set for RTL + LTR).
   ========================================================================= */

.tr-page { min-block-size: 70vh; padding-block-end: var(--space-8); }
.tr-main { padding-block: var(--space-6) var(--space-7); }
.tr-tabsbar { background: var(--surface); border-block-end: 1px solid var(--border); }
.tr-tabsbar .ez-tabs { max-inline-size: var(--width-page); margin-inline: auto;
  padding-inline: var(--space-6); border-block-end: none; }
.tr-mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em; direction: ltr; unicode-bidi: isolate; }
.tr-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.tr-muted { color: var(--text-muted); font-size: var(--fs-body-sm); }
/* TRADE-B3-H: the [hidden] attribute must win over component display rules (flex / inline-flex) */
.tr-hidden, .tr-page [hidden], .tr-overlay [hidden] { display: none !important; }
/* TRADE-B3-FIX1-HERO: ez42-ui turns .ez-hero__inner into a column at <=768px; the 420px
   flex-basis of .ez-hero__main then becomes a 420px HEIGHT (big empty purple band). */
@media (max-width: 768px) { .tr-page .ez-hero__main { flex-basis: auto; } }

/* ---- coin glyph ---------------------------------------------------------- */
.tr-coin { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: var(--fw-bold);
  color: var(--text); font-variant-numeric: tabular-nums; }
.tr-coin::before { content: ""; inline-size: 16px; block-size: 16px; flex: 0 0 auto;
  border-radius: var(--radius-circle); background: var(--warn-border);
  box-shadow: inset 0 0 0 2px var(--warn-bg), 0 0 0 1px var(--warn-border); }
.tr-coin--lg::before { inline-size: 20px; block-size: 20px; }

/* ---- toolbar: code search + name search + chips --------------------------- */
.tr-toolbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-block-end: var(--space-5); }
.tr-code-search { position: relative; flex: 0 0 170px; }
.tr-code-search .ez-search__input { inline-size: 100%; padding-inline-start: 2rem; }
.tr-code-search .ez-search__input:not(:placeholder-shown) { text-transform: uppercase; font-weight: var(--fw-bold);
  letter-spacing: 0.12em; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace; }
.tr-code-search__hash { position: absolute; inset-inline-start: 0.85rem; inset-block-start: 50%;
  transform: translateY(-50%); color: var(--purple-dark); font-weight: var(--fw-black); pointer-events: none; }
.tr-toolbar .ez-search { flex: 1 1 240px; max-inline-size: 320px; }
.tr-toolbar__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-inline-start: auto; }

/* ---- marketplace grid + trade card ---------------------------------------- */
.tr-grid { display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tr-card { padding: 0; gap: 0; overflow: hidden; text-decoration: none; color: inherit; }
.tr-card:hover { text-decoration: none; }
.tr-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--bg);
  display: flex; align-items: center; justify-content: center; }
/* TRADE-B2-C1: absolute image so tall artwork cannot stretch the square media box */
.tr-card__media { overflow: hidden; }
.tr-card__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; padding: var(--space-3); }
.tr-card__tags { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.tr-card__code { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); }
.tr-card__body { display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4); }
.tr-card__name { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text);
  line-height: var(--lh-heading); }
.tr-card__price { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  font-size: var(--fs-body-sm); color: var(--text-muted); }
/* [TRADE-SPLIT-1b] foot = two stacked rows: timer, then offers */
.tr-card__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-2); border-block-start: 1px solid var(--border-soft);
  font-size: var(--fs-footnote); color: var(--text-light); }
.tr-card__timer { display: flex; align-items: center; min-block-size: 1.75em; }
.tr-card__offers { font-weight: var(--fw-bold); color: var(--purple-dark); white-space: nowrap; }

.tr-codechip { display: inline-flex; align-items: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.15rem 0.45rem;
  font-size: var(--fs-footnote); font-weight: var(--fw-bold); color: var(--text); }
.tr-codechip--brand { background: var(--purple-tint); border-color: var(--tip-border); color: var(--purple-dark); }

/* ---- usage meter ---------------------------------------------------------- */
.tr-usage { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-body-sm);
  color: var(--text-muted); }
.tr-usage .ez-progress { inline-size: 120px; }
.tr-section-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-4); }
.tr-section-head h2 { margin: 0 0 var(--space-1); font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--text); }
.tr-subhead { margin: var(--space-6) 0 var(--space-3); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text); }

/* ---- My Trades ------------------------------------------------------------- */
.tr-open-grid { display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.tr-trade-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--space-4); padding: var(--space-4); }
.tr-thumb { inline-size: 76px; block-size: 76px; border-radius: var(--radius-md); background: var(--bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.tr-thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.tr-thumb--sm { inline-size: 40px; block-size: 40px; border-radius: var(--radius-sm); }
.tr-trade-row__main { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.tr-trade-row__title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-weight: var(--fw-bold); color: var(--text); }
.tr-trade-row__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--fs-footnote); color: var(--text-muted); }
.tr-count { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.tr-count__value { font-size: 1.6rem; font-weight: var(--fw-black); color: var(--purple-dark);
  font-variant-numeric: tabular-nums; }
.tr-count__label { font-size: var(--fs-footnote); color: var(--text-muted); }

.tr-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; }
.tr-list .ez-list-row + .ez-list-row { border-block-start: 1px solid var(--border-soft); }
.tr-list a.ez-list-row { color: inherit; text-decoration: none; }

/* ---- hero chips (offer contents) ------------------------------------------ */
.tr-chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tr-chip-hero { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.3rem 0.6rem;
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text); }
.tr-chip-hero__sub { display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-footnote); font-weight: var(--fw-regular); color: var(--text-muted); }
.tr-chip-hero__txt { display: flex; flex-direction: column; }
.tr-chip-hero--get { background: var(--purple-tint); border-color: var(--tip-border); color: var(--purple-dark); }
.tr-chip-coins { display: inline-flex; align-items: center; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.45rem 0.7rem; }

/* ---- My Offers row --------------------------------------------------------- */
.tr-offer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.tr-offer-row__side { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-inline-size: 0; }
.tr-offer-row__label { font-size: var(--fs-footnote); font-weight: var(--fw-bold); color: var(--text-muted); }
.tr-offer-row__swap { color: var(--purple); }
.tr-offer-row__end { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  font-size: var(--fs-footnote); color: var(--text-light); }
.tr-linkbtn { -webkit-appearance: none; appearance: none; background: none; border: none; padding: 0;
  font: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--purple-dark);
  text-decoration: underline; cursor: pointer; min-block-size: 32px; }
.tr-linkbtn:hover { color: var(--purple); }
.tr-stack-y { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---- trade page ------------------------------------------------------------ */
.tr-detail { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6);
  align-items: center; }
.tr-detail--owner { border-block-start: 4px solid var(--purple); }
.tr-detail__media { aspect-ratio: 1 / 1; background: var(--bg); border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tr-detail__media img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: var(--space-4); }
.tr-detail__media.is-closed img { filter: grayscale(1); opacity: 0.75; }
.tr-detail__info { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; }
.tr-detail__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tr-detail__name { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-black); color: var(--text);
  line-height: var(--lh-tight); }
.tr-detail__meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--fs-body-sm); color: var(--text-muted); }
.tr-coderow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tr-code-lg { display: inline-flex; align-items: center; background: var(--purple-tint); color: var(--purple-dark);
  border-radius: var(--radius-md); padding: 0.4rem 0.9rem; font-size: 1.35rem; font-weight: var(--fw-black);
  letter-spacing: 0.18em; }
.tr-wa { background: var(--success-border); color: var(--surface); border-color: var(--success-border); }
.tr-wa:hover:not(:disabled) { filter: brightness(0.94); color: var(--surface); }
.tr-detail__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-block-start: var(--space-2); }
.tr-note { font-size: var(--fs-body-sm); color: var(--text-muted); margin: 0; }
.tr-notebox { background: var(--bg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body-sm); color: var(--text-muted); line-height: var(--lh-relaxed); }
.tr-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap; }
.tr-panel-head h2 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text); }
.tr-myoffer { border-color: var(--tip-border); }
.tr-result { background: var(--purple-tint); border-color: var(--tip-border); }
.tr-result h2 { color: var(--purple-dark); }
.tr-offer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; padding: var(--space-4) var(--space-5); }
.tr-offer__main { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.tr-offer__actions { display: flex; gap: var(--space-2); }
.tr-countline { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.tr-countline__n { inline-size: 40px; block-size: 40px; border-radius: var(--radius-circle);
  background: var(--purple-tint); color: var(--purple-dark); font-weight: var(--fw-black);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* ---- swap boxes (confirm modals, results) ---------------------------------- */
.tr-swap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-block-end: var(--space-4); }
.tr-swap__box { background: var(--bg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); }
.tr-swap__box--get { background: var(--purple-tint); }
.tr-swap__label { font-size: var(--fs-footnote); font-weight: var(--fw-bold); color: var(--text-muted); }
.tr-swap__box--get .tr-swap__label { color: var(--purple-dark); }
.tr-swap__item { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold);
  color: var(--text); font-size: var(--fs-body-sm); }
.tr-bullets { margin: 0; padding-inline-start: 1.2rem; display: flex; flex-direction: column;
  gap: var(--space-2); font-size: var(--fs-body-sm); list-style: disc; }

/* ---- overlays: modal + sheet (built on .ez-modal / .ez-scrim skins) -------- */
.tr-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: var(--space-5); }
.tr-overlay { font-family: var(--font-sans); color: var(--text); }
.tr-overlay a:not(.ez-btn) { color: var(--purple-dark); font-weight: var(--fw-bold); }
.tr-page a.ez-btn--primary, .tr-overlay a.ez-btn--primary,
.tr-page a.ez-btn--purple, .tr-overlay a.ez-btn--purple,
.tr-page a.tr-wa, .tr-overlay a.tr-wa { color: var(--surface); text-decoration: none; }
.tr-page a.ez-btn--outline, .tr-overlay a.ez-btn--outline { color: var(--text); text-decoration: none; }
.tr-overlay .ez-scrim { z-index: 0; }
.tr-overlay .ez-modal__panel { z-index: 1; }
.tr-success-head { background: var(--hero-gradient); color: var(--surface); text-align: center;
  padding: var(--space-6) var(--space-5) var(--space-5); display: flex; flex-direction: column;
  align-items: center; gap: var(--space-2); }
.tr-success-head__eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); opacity: 0.9; }
.tr-success-head__code { font-size: 2.4rem; font-weight: var(--fw-black); letter-spacing: 0.28em; }
.tr-success-head__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-black); }
.tr-success-head__check { inline-size: 48px; block-size: 48px; border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.22); display: inline-flex; align-items: center; justify-content: center; }
.tr-success-body { padding: var(--space-5) var(--space-6); text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: var(--space-4); color: var(--text-soft); }
.tr-success-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

.tr-sheet__panel { position: relative; z-index: 1; display: flex; flex-direction: column;
  inline-size: min(1040px, 100%); max-block-size: min(90vh, 860px); background: var(--bg);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); overflow: hidden; }
.tr-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-4); background: var(--surface);
  border-block-end: 1px solid var(--border); flex: 0 0 auto; }
.tr-sheet__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-black); color: var(--text); }
.tr-sheet__sub { margin: var(--space-1) 0 0; font-size: var(--fs-body-sm); color: var(--text-muted);
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tr-sheet__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5) var(--space-6); }
.tr-sheet__foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-6); background: var(--surface);
  border-block-start: 1px solid var(--border); }
.tr-sheet__foot-actions { display: flex; gap: var(--space-3); margin-inline-start: auto; }

/* ---- hero picker ------------------------------------------------------------ */
.tr-pick-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
.tr-pick { position: relative; -webkit-appearance: none; appearance: none; font: inherit; text-align: center;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-3); display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  cursor: pointer; transition: var(--t-chip-select); min-inline-size: 0; }
.tr-pick:hover:not(.is-unavailable) { border-color: var(--purple); }
.tr-pick:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.tr-pick.is-selected, .tr-pick[aria-pressed="true"] { border-color: var(--selected-border); background: var(--selected-bg); }
.tr-pick.is-unavailable { cursor: not-allowed; opacity: 0.55; }
.tr-pick.is-unavailable img { filter: grayscale(1); }
.tr-pick__img { inline-size: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.tr-pick__name { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text); }
/* TRADE-TWK-3h: hero zoom */
img.tr-zoomable { cursor: zoom-in; }
.tr-zoom-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  inline-size: 28px; block-size: 28px; border-radius: var(--radius-pill, 999px); color: var(--purple-dark);
  background: var(--bg); cursor: zoom-in; }
.tr-zoom-btn:hover { background: var(--selected-bg); }
.tr-zoom-btn:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.tr-zoom { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.tr-zoom__img { inline-size: 100%; max-inline-size: 460px; max-block-size: 62vh; object-fit: contain;
  background: var(--bg); border-radius: var(--radius-md); padding: var(--space-3); }
.tr-zoom__meta { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted, var(--text));
  font-size: var(--fs-body-sm); }
/* TRADE-B2-FIX1: same louder xN badge in the hero pickers */
.tr-pick__stack { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2);
  z-index: 1; min-inline-size: 2.2rem; text-align: center; direction: ltr; unicode-bidi: isolate;
  background: var(--purple-deep); color: var(--surface); border-radius: var(--radius-pill);
  padding: 0.1rem 0.55rem; font-size: var(--fs-body-sm); font-weight: var(--fw-black);
  box-shadow: 0 0 0 2px var(--surface); }
.tr-pick__flag { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); }
.tr-pick__check { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
  inline-size: 24px; block-size: 24px; border-radius: var(--radius-circle); background: var(--purple);
  color: var(--surface); display: none; align-items: center; justify-content: center; }
.tr-pick[aria-pressed="true"] .tr-pick__check { display: inline-flex; }
.tr-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.tr-stepper button { -webkit-appearance: none; appearance: none; background: none; border: none; cursor: pointer;
  inline-size: 40px; block-size: 40px; font-size: 1.2rem; font-weight: var(--fw-bold); color: var(--purple-dark); }
.tr-stepper button:disabled { color: var(--text-light); cursor: not-allowed; }
.tr-stepper button:hover:not(:disabled) { background: var(--border-soft); }
.tr-stepper__val { min-inline-size: 36px; text-align: center; font-weight: var(--fw-bold); color: var(--text);
  font-variant-numeric: tabular-nums; }

/* ---- offer builder ---------------------------------------------------------- */
.tr-builder { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.tr-builder__summary { position: sticky; inset-block-start: 0; }
.tr-builder__sumlist { display: flex; flex-direction: column; gap: var(--space-2); }
.tr-builder__sumrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  background: var(--bg); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text); }
.tr-builder__arrow { display: flex; justify-content: center; color: var(--purple); }
.tr-coinsfield { display: flex; flex-direction: column; gap: var(--space-3); }
/* TRADE-VIP: long hero lists scroll inside the picker box */
.tr-builder__picker { max-block-size: min(460px, 50vh); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.tr-vip { margin-block-start: var(--space-2); }
.tr-coinsfield__row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.tr-coinsfield__input { position: relative; flex: 0 0 200px; }
.tr-coinsfield__input .ez-input { inline-size: 100%; padding-inline-start: 2.4rem; font-weight: var(--fw-bold);
  font-size: 1.15rem; }
.tr-coinsfield__input .tr-coin { position: absolute; inset-inline-start: 0.8rem; inset-block-start: 50%;
  transform: translateY(-50%); pointer-events: none; }
.tr-error { color: var(--error-text); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }

/* ---- responsive --------------------------------------------------------------- */
@media (max-width: 860px) {
  .tr-builder { grid-template-columns: minmax(0, 1fr); }
  .tr-builder__summary { position: static; }
  .tr-detail { grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .tr-offer-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .tr-offer-row__swap { display: none; }
  .tr-offer-row__end { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 600px) {
  .tr-page .ez-hero { padding-block: var(--space-6); }
  .tr-page .ez-hero__main { flex-basis: auto; }   /* column layout: basis would become height */
  .tr-page .ez-hero__actions, .tr-page .ez-hero__actions .ez-btn { inline-size: 100%; }
  .tr-main { padding-block: var(--space-4) var(--space-6); }
  .tr-tabsbar .ez-tabs { padding-inline: var(--space-3); }
  .tr-tabsbar .ez-tab { flex: 1 1 0; justify-content: center; }
  .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .tr-toolbar { gap: var(--space-3); }
  .tr-code-search { flex: 0 0 132px; }
  .tr-toolbar .ez-search { flex: 1 1 0; max-inline-size: none; }
  .tr-toolbar__chips { margin-inline-start: 0; flex-wrap: nowrap; overflow-x: auto; inline-size: 100%; }
  .tr-open-grid { grid-template-columns: minmax(0, 1fr); }
  .tr-trade-row { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .tr-trade-row .tr-thumb { inline-size: 60px; block-size: 60px; }
  .tr-trade-row__manage { grid-column: 1 / -1; }
  .tr-detail { grid-template-columns: minmax(0, 1fr); }
  .tr-detail__media { max-inline-size: 180px; }
  .tr-swap { grid-template-columns: minmax(0, 1fr); }
  .tr-overlay { padding: 0; align-items: flex-end; }
  .tr-overlay .ez-modal__panel { inline-size: 100%; border-end-start-radius: 0; border-end-end-radius: 0; }
  .tr-overlay--sheet { align-items: stretch; }
  .tr-sheet__panel { inline-size: 100%; max-block-size: none; block-size: 100%; border-radius: 0; }
  .tr-sheet__head, .tr-sheet__body, .tr-sheet__foot { padding-inline: var(--space-4); }
  .tr-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-sheet__foot-actions { inline-size: 100%; }
  .tr-sheet__foot-actions .ez-btn { flex: 1 1 0; }
}