/* Pazar/Kervan domain layout; tabs, choices, cards and buttons come from style.css. */
.trade-box { min-width: 0; }
.trade-note { color: var(--text); font-size: var(--text-sm); line-height: 1.5; margin: var(--space-2) 2px; overflow-wrap: anywhere; }
.trade-options button { flex: 1 1 64px; }
/* One sentence under the tab, small captions, one dim line at the foot: the tab names the page, so no second heading. */
.trade-lead { margin: 0 2px var(--space-2); color: var(--text); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.trade-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-2); }
.trade-top .trade-lead { flex: 1 1 180px; min-width: 0; margin: 0; }
.trade-top-actions { display: flex; flex: 0 0 auto; gap: var(--space-2); margin-left: auto; }
#panel .trade-top-actions > button { min-height: var(--touch-target); }
.trade-label { margin: var(--space-3) 2px var(--space-1); color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.trade-foot { margin: var(--space-3) 2px var(--space-1); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.trade-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--muted); font-size: var(--text-sm); }
.trade-lock { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warning-surface, var(--surface-inset)); color: var(--ink); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.trade-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); font-size: var(--text-sm); }
.trade-price { display: flex; flex-direction: column; gap: 2px; min-width: 0; background: var(--surface-inset); border-radius: var(--radius-md); padding: var(--space-2); color: var(--ink); overflow-wrap: anywhere; }
.trade-unit { font-variant-numeric: tabular-nums; }
.trade-trend { font-size: var(--text-xs); color: var(--muted); }
.trade-trend small { font-size: inherit; }
.trade-district small { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); }
.trade-district { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.trade-district > b { min-width: 0; text-align: center; font-size: var(--text-sm); color: var(--ink); }
/* District picker: nearest chips + a native <details> with all districts (scrolls inside; chips wrap, never overflow at 360px). */
.trade-near button, .trade-all-list button { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.trade-all { margin: var(--space-1) 0 var(--space-2); }
.trade-all > summary { cursor: var(--cursor-pointer, pointer); min-height: 44px; display: flex; align-items: center; color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.trade-all-list { max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; }
.trade-quote .grow { flex-basis: 180px; }
@media (max-width: 420px) { .trade-quote button { width: 100%; } }
/* Phones: the Takas quote + "Takas et" row sticks to the bottom of the scrolling panel body, so the button is never three scrolls away. Only Takas: in
   İlanlar and Kervanlar the pinned card covered the listings and caravans under it (2026-11-09, owner: "bir kart sabit kalıyor ... anlamayı zorlaştırıyor"),
   there it stays in the flow under its form.
   Opaque (--a-solid: the glass without alpha; the row's own fill is translucent and would show the scrolling text), and the selector is
   stronger than ui-modern-a.css's `html.iso.ui-a :is(.row, #panel .row)` so its background does not win. */
/* ...on a screen with room only (2026-11-11): with a short panel body (~120 px: a landscape phone, a squeezed tablet window) the pinned row sat over the Takas / İlanlar / Kervanlar tab
   buttons (measured at 1024x768, 768x1024 and 1100x768 touch: elementFromPoint at the tab centre = .trade-quote-takas), so a short screen leaves it in the flow, and the tab strip
   stacks above it in any case (position: relative + z-index 2 over the row's 1). */
@media (max-width: 760px) and (min-height: 501px), (pointer: coarse) and (max-width: 1100px) and (min-height: 501px) {
  html #panel .body .row.trade-quote.trade-quote-takas { position: sticky; bottom: 0; z-index: 1; margin-bottom: 0; background: var(--surface); box-shadow: 0 -8px 10px -6px rgba(0, 0, 0, .35); }
  html.iso.ui-a #panel .body .row.trade-quote.trade-quote-takas { background: linear-gradient(var(--surface-raised), var(--surface-raised)), var(--a-solid, var(--surface)); }
}
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px) {
  html #panel .body .ui-tabs.section-nav:has(> [data-act="trade-tab"]) { position: relative; z-index: 2; }
}
/* Four resource options: 2×2 on phones, one row when the window is wide enough. */
#panel .seg.trade-options.resource-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container panel-body (min-width: 480px) { #panel .seg.trade-options.resource-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Kervansaray: three goods in one row, order-book rows. */
#panel .seg.trade-options.kv-goods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.kv-trend { font-weight: 700; color: var(--muted); }
.kv-trend.up { color: var(--good); }
.kv-trend.down { color: var(--bad); }
#panel .trade-top-actions .ui-count { position: static; margin-left: var(--space-1); }
/* Listings: one markup. Below 720px each is a stacked card (seller, qty|price, trip, full-width buy);
   from 720px up (wide Pazar window) the same nodes become aligned columns under a header row. */
.kv-head { display: none; }
.row.kv-listing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-1) var(--space-2); }
.kv-listing > * { min-width: 0; overflow-wrap: anywhere; }
.kv-seller, .kv-trip, .kv-listing > button { grid-column: 1 / -1; }
.kv-qty, .kv-unit, .kv-total { font-variant-numeric: tabular-nums; }
.kv-total { display: none; }
.kv-trip small { display: block; }
#panel .kv-listing > button { width: 100%; min-height: var(--touch-target); }
@container panel-body (min-width: 720px) {
  .kv-head, .row.kv-listing { display: grid; grid-template-columns: minmax(110px, 1.3fr) 72px 88px minmax(140px, 1.5fr) 80px minmax(150px, 1.2fr); align-items: center; gap: var(--space-2); }
  .kv-head { padding: 0 9px var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
  .kv-seller, .kv-trip, .kv-listing > button { grid-column: auto; }
  .kv-total { display: block; color: var(--ink); font-weight: 700; }
  #panel .kv-listing > button { width: 100%; }
}
.kv-row .grow { flex-basis: 180px; min-width: 0; }
.kv-row .grow small { display: block; overflow-wrap: anywhere; }
.kv-buy-feedback { color: var(--bad); font-weight: 700; padding: var(--space-2); border: 1px solid var(--bad); border-radius: var(--radius-sm); }
@media (max-width: 420px) { .kv-row button { width: 100%; } }
/* Escort picker: "none" plus 1-5 stay on one row on a phone. */
#panel .seg.trade-options.escort-options { display: grid; grid-template-columns: 1.7fr repeat(5, minmax(0, 1fr)); }
#panel .seg.trade-options.escort-options button { min-width: 0; min-height: 44px; padding-inline: 2px; }
/* Stall (tezgâh) feel: a slim striped canopy at the top of the window (the sign that repeated "Pazar" is gone). Decoration only;
   animates transform/opacity once per window open, never loops. prefers-reduced-motion is covered by style.css (animation: none !important).
   The theme layers (iso-theme-panels.css, ui-modern-a.css) restyle .stall-awning to a hairline, hence the longer selector. */
.trade-box > .stall-awning { position: relative; height: 7px; margin: 0 0 var(--space-2); pointer-events: none; filter: none; }
html.iso.ui-a .trade-box > .stall-awning { height: 7px; filter: none; }
.trade-box > .stall-awning > i, html.iso.ui-a .trade-box > .stall-awning > i { position: absolute; inset: 0; height: auto; background: repeating-linear-gradient(90deg, #a9441f 0 12px, #cfc6b0 12px 24px);
  /* scalloped hem: one 12px scallop per stripe, hard pixel edge */
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 3px) no-repeat, radial-gradient(circle at 6px 0, #000 5.5px, transparent 6px) bottom / 12px 3px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 3px) no-repeat, radial-gradient(circle at 6px 0, #000 5.5px, transparent 6px) bottom / 12px 3px repeat-x; }
.stall-awning.is-opening { animation: stall-drop 200ms ease-out both; }
@keyframes stall-drop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Counter: rows sit on a plank (light top edge, darker underside). Selector beats style.css's #panel :where(.row). */
#panel .row.kv-row { border-top: 3px solid var(--surface-selected); border-bottom-color: var(--border); }
.kv-new { animation: kv-pop 180ms ease-out both; }
@keyframes kv-pop { from { transform: scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
/* Purchase coins (appended to <body> by coinBurst, removed after the burst). */
.trade-coins { position: fixed; width: 0; height: 0; z-index: calc(var(--z-panel) + 1); pointer-events: none; }
.trade-coin { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; background: url('ui/shikashi/res-gold.png') center / contain no-repeat; image-rendering: pixelated; animation: trade-coin 250ms ease-out both; }
@keyframes trade-coin { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), -36px); opacity: 0; } }