/* ZoltarSearch 2.6 — Market bands (Laptops & desktops). Extends zs-storage-bands.css (zb-*); every colour is a site token, so light/dark and the module accent follow the page. */

/* level 0 — delivered track under the finished strip */
.zw-dtrack { display: grid; gap: 4px; padding: 2px 6px 0; }
.zw-dlab { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.zw-dline { position: relative; height: 34px; border-radius: 8px; background: var(--surface-2); }
.zw-dzone { position: absolute; top: 0; bottom: 0; }
.zw-dzone.buy { background: color-mix(in srgb, var(--good) 14%, transparent); border-radius: 8px 0 0 8px; }
.zw-dzone.offer { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.zw-dw { position: absolute; top: 20px; height: 2px; background: var(--line-2); border-radius: 2px; }
.zw-di { position: absolute; top: 15px; height: 12px; background: var(--ink-3); opacity: .55; border-radius: 4px; box-shadow: 0 0 0 2px var(--surface-2); }
.zw-dm { position: absolute; top: 12px; width: 0; }
.zw-dm::before { content: ""; position: absolute; left: -1.5px; top: 0; width: 3px; height: 18px; background: var(--ink-2); border-radius: 2px; box-shadow: 0 0 0 2px var(--surface); }
.zw-dm b { position: absolute; left: 6px; top: -11px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.zb-bar.zw-offer { border-left-color: var(--warn); }
.zw-strip .zb-bar:not(.zw-offer):not(.ceil) b { left: auto; right: 4px; }
.zw .zb-name .n { flex: 1 1 0; min-width: 0; }
.zb-bar.zw-offer b { color: var(--warn); left: 4px; right: auto; top: 3px; bottom: auto; }

/* fleet mini-table inside a stat tile */
.zw-fleet { overflow-x: auto; }
.zw-fleet table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.zw-fleet td { padding: 2px 0; border-top: 1px solid var(--line); }
.zw-fleet tr:first-child td { border-top: 0; }
.zw-fleet td.n { text-align: right; font-family: var(--font-mono); padding-left: 8px; white-space: nowrap; }
.zw-fleet td b { color: var(--warn); }

/* RAM bucket tag */
.zw-ram { display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 5px; border-radius: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 800; background: var(--accent-soft); color: var(--accent); flex: none; vertical-align: 2px; }
.zw-ram.big { height: 22px; font-size: 12.5px; padding: 0 7px; vertical-align: 3px; }

/* configuration card */
.zw-others { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--ink-3); }
.zw-plan { margin-top: 8px; display: grid; gap: 3px; font-size: 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; }
.zw-plan .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.zw-plan .small { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; }
.zw-plan .small b { color: var(--ink); }
.zw-plan ul { margin: 2px 0 0; padding-left: 16px; display: grid; gap: 2px; }
.zw-flag { font-size: 10.5px; padding: 1px 6px; }

/* history points and boxes (SVG) */
.zb-dot.zw-live, .zb-pt.zw-ver { fill: var(--accent); }
.zb-dot.zw-listed { fill: color-mix(in srgb, var(--accent) 35%, var(--surface)); stroke: var(--accent); stroke-width: 1.5; }
.zb-pt.zw-lst { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.zw-box { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: color-mix(in srgb, var(--accent) 55%, var(--line-2)); stroke-width: 1; }
.zw-boxmid { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.zw-fail { fill: var(--bad); opacity: .8; }
.zb-sleg i.d.zw-live { background: var(--accent); }
.zb-sleg i.d.zw-listed { background: color-mix(in srgb, var(--accent) 35%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.zb-sleg i.d.zw-ver { background: var(--accent); }
.zb-sleg i.d.zw-lst { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.zb-sleg i.d.zw-boxk { width: 10px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--line-2)); }
.zb-sleg i.d.zw-failk { width: 7px; height: 7px; border-radius: 1px; background: var(--bad); opacity: .8; }

/* rule tab — the bars we measure against */
.zw-bars { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.zw-bars .chip { font-family: var(--font-mono); }

/* head */
.zw-stale { color: var(--warn); font-weight: 600; }
.zw-lanes { flex-wrap: wrap; }

/* drawer block */
.zw-dblock .small { display: grid; gap: 2px; }
.zw-drow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 2px 0; border-top: 1px solid var(--line); }
.zw-drow:first-child { border-top: 0; }
.zw-drow b { font-family: var(--font-mono); }

@media (max-width: 900px) {
  .zw .zb-axis span.o { display: none; }
  .zb-stats > .zw-fleet { grid-column: 1 / -1; }
  .zw-dm b { font-size: 10.5px; }
  .zw-drow { grid-template-columns: 1fr auto; }
  .zw-drow span.muted { grid-column: 1 / -1; }
  .zw-lanes { width: 100%; }
  .zw-lanes button { flex: 1 1 auto; }
}

.zw .zb-traps .trap { align-content: start; }
.zw .zb-axis.in i.bar.c { background: var(--warn); }
.zw-dzone.buy.prop { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink-3) 16%, transparent) 0 4px, transparent 4px 8px); }
.zb-live .li .zw-ttl { grid-column: 2 / -1; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .zw-dzone.buy:not(.prop), :root[data-theme="dark"] .zw .zb-zone.buy { background: color-mix(in srgb, var(--good) 24%, transparent); }
:root[data-theme="dark"] .zw-dzone.offer, :root[data-theme="dark"] .zw .zb-zone.fyi { background: color-mix(in srgb, var(--warn) 16%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zw-dzone.buy:not(.prop), :root:not([data-theme="light"]) .zw .zb-zone.buy { background: color-mix(in srgb, var(--good) 24%, transparent); } }
.zw .zb-legend i.k.zone { background: color-mix(in srgb, var(--good) 34%, transparent); }
.zw-jump { margin: 0; }
@media (max-width: 900px) {
  .zw .zb-stats > .zb-stat:nth-child(3) { grid-column: 1 / -1; }
  .zb-live .li .zw-ttl { grid-column: 1 / -1; white-space: normal; }
}