@font-face {
  font-family:"Listing Arcade";
  src:url('/assets/ui-fonts/silkscreen-regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}
/* One quiet garden behind the existing listing workflow, not a second panel. */
#marketListDialog {
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background-color:var(--panel);
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) var(--panel);
}
/* Load the artwork only when this dialog is in use. Native background layers
   cannot intercept the stepper, wallet action, close button or disclosure clicks. */
#marketListDialog[open] {
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb,var(--panel) 8%,transparent) 0,
      color-mix(in srgb,var(--panel) 18%,transparent) 150px,
      color-mix(in srgb,var(--panel) 72%,transparent) 285px,
      color-mix(in srgb,var(--panel) 94%,transparent) 465px,
      var(--panel) 720px),
    url('/assets/generated/ui/listing-garden-v1/garden-background.webp');
  background-size:100% 100%,100% auto;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:local;
}
#marketListDialog .market-list-dialog-head {
  min-height:104px;
  padding:7px 0 20px;
}
#marketListDialog .market-list-dialog-head h2 {
  margin:10px 0 12px;
  font-size:36px;
  line-height:1.1;
  text-shadow:0 2px 14px var(--panel);
}
#marketListDialog .market-list-dialog-head > p:last-child {
  max-width:38ch;
  color:var(--paper);
  line-height:1.65;
  text-shadow:0 1px 8px var(--panel);
}
#marketListDialog .market-list-dialog-head .section-kicker { color:var(--acid); }
#marketListDialog .dialog-close { background:var(--panel); }
#marketListDialog .market-form-grid { margin-top:16px; }
#marketListDialog .market-form-grid label > span,
#marketListDialog .market-list-price-field > label { color:var(--paper);text-shadow:0 1px 6px var(--panel); }
#marketListDialog .market-form-grid input,
#marketListDialog .market-form-grid select,
#marketListDialog .market-price-input {
  background:var(--panel-2);
  border-radius:8px;
}
#marketListDialog .market-price-input input { background:transparent;border-radius:0; }
#marketListDialog .market-form-grid input:focus-visible,
#marketListDialog .market-form-grid select:focus-visible { outline:2px solid var(--acid);outline-offset:2px; }
#marketListDialog .market-transaction-note { background:color-mix(in srgb,var(--panel-2) 94%,transparent); }
#marketListDialog .market-list-summary {
  display:grid;grid-template-columns:minmax(80px,.6fr) minmax(0,1fr);gap:24px;
  margin:18px 0 14px;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:none;
}
#marketListDialog .market-list-summary[hidden] { display:none; }
#marketListDialog .market-list-summary > div { min-width:0; }
#marketListDialog .market-list-summary > div:last-child { text-align:right; }
#marketListDialog .market-list-summary dt { margin:0;color:var(--muted);font:12px/1.4 var(--sans); }
#marketListDialog .market-list-summary dd { margin:6px 0 0;color:var(--paper);font:600 17px/1.4 var(--sans);font-variant-numeric:tabular-nums;overflow-wrap:anywhere; }
#marketListDialog #marketListReceives { color:var(--acid); }
#marketListDialog .mechanic-tip-body { background:var(--panel); }
#marketListDialog .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
#marketListDialog .market-owned-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px; }
#marketListDialog .market-owned-heading strong { font-size:14px;font-weight:600; }
#marketListDialog .market-owned-heading small { margin-left:8px;color:var(--muted);font:11px var(--mono); }
#marketListDialog .market-owned-heading button { padding:5px 0;background:none;border:0;color:var(--acid);font:11px var(--mono);cursor:pointer; }
#marketListDialog .market-owned-tools { display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px;margin-bottom:10px; }
#marketListDialog .market-owned-tools label { min-width:0; }
#marketListDialog .market-owned-tools input,
#marketListDialog .market-owned-tools select { box-sizing:border-box;width:100%;height:38px;min-width:0;padding:0 10px;border:1px solid var(--line-strong);border-radius:7px;background:var(--panel);color:var(--paper);font:12px var(--sans); }
#marketListDialog .market-owned-rows { display:grid;gap:8px;max-height:208px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--acid) transparent;scrollbar-gutter:stable;padding:3px; }
#marketListDialog .market-owned-row {
  --owned-color-0:rgb(71,89,72);--owned-color-1:rgb(50,66,57);
  display:grid;grid-template-columns:76px minmax(0,1fr) 24px;align-items:center;gap:16px;
  width:100%;min-height:78px;padding:0 16px 0 0;border:1px solid color-mix(in srgb,var(--owned-color-0) 65%,var(--line-strong));
  border-radius:9px;text-align:left;cursor:pointer;color:#fff;
  background:linear-gradient(110deg,color-mix(in srgb,var(--owned-color-0) 55%,#162019),color-mix(in srgb,var(--owned-color-1) 60%,#162019));
  box-shadow:inset 0 1px 0 #ffffff12;
  transition:border-color .18s,box-shadow .18s;
}
#marketListDialog .market-owned-row:hover { border-color:var(--acid);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acid) 45%,transparent); }
#marketListDialog .market-owned-row[aria-pressed="true"] { border-color:var(--acid);box-shadow:inset 0 0 0 1px var(--acid); }
#marketListDialog .market-owned-art { display:grid;place-items:center;align-self:stretch;width:76px;min-height:76px;border-radius:8px 0 0 8px;overflow:hidden;background:var(--panel-2);font:24px "Listing Arcade",monospace; }
#marketListDialog .market-owned-art img { display:block;width:76px;height:100%;min-height:76px;object-fit:cover; }
#marketListDialog .market-owned-copy { min-width:0;padding:10px 0; }
#marketListDialog .market-owned-copy strong {
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;
  font:400 16px/1.35 "Listing Arcade",monospace;color:#fff;
  text-shadow:-1px -1px 0 #152019,1px -1px 0 #152019,-1px 1px 0 #152019,1px 1px 0 #152019,0 2px 0 #152019;
}
#marketListDialog .market-owned-copy small { display:block;margin-top:6px;color:#f1f5e9;font:11px/1.25 var(--mono);text-shadow:0 1px 2px #152019; }
#marketListDialog .market-owned-copy small span { opacity:.75; }
#marketListDialog .market-owned-check { display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid #ffffff55;color:transparent;font-size:14px; }
#marketListDialog .market-owned-row[aria-pressed="true"] .market-owned-check { background:var(--acid);border-color:var(--acid);color:#202c1b; }
#marketListDialog .market-owned-status { margin:8px 0 0;font-size:12px;color:var(--paper); }
#marketListDialog .market-owned-status:empty { display:none; }
#marketListDialog .market-owned-more { width:100%;margin-top:8px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--acid);cursor:pointer;font-size:12px; }
#marketListDialog .market-owned-more[hidden] { display:none; }
#marketListDialog .market-owned-picker :is(button,input,select):focus-visible { outline:2px solid var(--acid);outline-offset:2px; }
#marketListDialog .market-transaction-note { background:none;border:0;padding:0;margin:12px 0;color:var(--muted);font-size:12px; }
#marketListDialog #marketListSubmit span { white-space:normal;overflow-wrap:anywhere; }
#marketListDialog .market-list-rewards { margin:20px 0 8px;padding:22px;border:1px solid color-mix(in srgb,var(--acid) 42%,var(--line));border-radius:12px;background:var(--panel); }
#marketListDialog .market-list-rewards > .section-kicker { display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:0;color:var(--acid);font:10px/1.5 var(--mono);letter-spacing:.08em; }
#marketListDialog .market-list-rewards .section-kicker span { color:var(--muted);letter-spacing:0;overflow-wrap:anywhere; }
#marketListDialog .market-list-rewards h3 { margin:13px 0 10px;font:600 23px/1.2 var(--sans);letter-spacing:-.025em; }
#marketListDialog .market-list-rewards > p:not(.section-kicker) { margin:10px 0 0;color:var(--muted);font:13px/1.6 var(--sans); }
#marketListDialog .market-list-reward-assets { display:flex;flex-wrap:wrap;gap:12px 24px;list-style:none;padding:0;margin:16px 0; }
#marketListDialog .market-list-reward-assets:empty { display:none; }
#marketListDialog .market-list-reward-assets li { display:flex;align-items:baseline;flex-wrap:nowrap;gap:8px;max-width:100%;min-width:0; }
#marketListDialog .market-list-reward-assets strong { color:var(--acid);font:700 22px/1.3 var(--sans);overflow-wrap:anywhere; }
#marketListDialog .market-list-reward-assets span { color:var(--paper);font:11px/1.3 var(--mono);white-space:nowrap; }
#marketListDialog #marketListRewardsStatus { color:var(--paper); }
#marketListDialog #marketListRewardsStatus:empty { display:none; }
#marketListDialog .market-list-reward-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px; }
#marketListDialog .market-list-reward-actions .button { width:100%;min-height:46px;padding:12px;font-size:12px;line-height:1.4;white-space:normal; }
#marketListDialog .market-list-reward-actions:has(.market-list-rewards-skip[hidden]) { grid-template-columns:minmax(0,1fr); }
#marketListDialog .market-list-rewards-skip { background:var(--panel-2);border:1px solid var(--line-strong);color:var(--paper);box-shadow:none; }
#marketListDialog .market-list-rewards-skip:hover { background:var(--panel-3); }
#marketListDialog .market-list-reward-actions :focus-visible { outline:2px solid var(--acid);outline-offset:3px; }
@media (max-width:480px) {
  #marketListDialog .market-list-rewards { padding:17px; }
  #marketListDialog .market-list-reward-actions { grid-template-columns:minmax(0,1fr); }
}
/* The garden remains dark artwork in light themes: a pale wash keeps native
   light-theme text readable rather than swapping the site's chosen text colors. */
html[data-theme-mode="light"] #marketListDialog[open] {
  background-image:
    linear-gradient(100deg,color-mix(in srgb,var(--panel) 96%,transparent),color-mix(in srgb,var(--panel) 50%,transparent)),
    linear-gradient(180deg,transparent 100px,var(--panel) 500px),
    url('/assets/generated/ui/listing-garden-v1/garden-background.webp');
  background-size:100% 100%,100% 100%,100% auto;
}
@media (max-width:560px) {
  #marketListDialog { padding:24px;max-height:calc(100dvh - 20px); }
  #marketListDialog .market-list-dialog-head { min-height:100px;padding-top:4px; }
  #marketListDialog .market-list-dialog-head h2 { font-size:32px; }
  #marketListDialog .market-list-dialog-head > p:last-child { max-width:30ch;font-size:11px; }
  #marketListDialog .market-owned-row { grid-template-columns:64px minmax(0,1fr) 22px;gap:10px;padding-right:10px; }
  #marketListDialog .market-owned-art,#marketListDialog .market-owned-art img { width:64px; }
  #marketListDialog .market-owned-copy strong { font-size:14px; }
  #marketListDialog .market-owned-tools { grid-template-columns:minmax(0,1fr); }
  #marketListDialog .market-owned-rows { max-height:192px; }
}
@media (prefers-reduced-motion:reduce) { #marketListDialog .market-owned-row { transition:none; } }
@media (forced-colors:active) {
  #marketListDialog[open] { background-image:none; }
  #marketListDialog .market-list-dialog-head h2,
  #marketListDialog .market-list-dialog-head > p:last-child { text-shadow:none; }
  #marketListDialog .market-owned-row { background:Canvas;color:CanvasText;border-color:ButtonText; }
  #marketListDialog .market-owned-copy strong,#marketListDialog .market-owned-copy small { color:CanvasText;text-shadow:none; }
  #marketListDialog .market-owned-row[aria-pressed="true"] { outline:2px solid Highlight; }
}