/* ZoltarSearch 2.0 — shell styles. Loaded AFTER the core stylesheet; uses its tokens; every selector is scoped
   to .zs2-* so nothing in the engine or the modules can be affected. */

/* ---------- topbar additions ---------- */
.zs2-top { position: sticky; top: 0; z-index: 40; }
.zs2-top .zs2-search { flex: 1 1 260px; max-width: 520px; min-width: 0; position: relative; }
.zs2-top .zs2-search input { width: 100%; min-height: 40px; padding: 8px 14px 8px 38px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 14px; }
.zs2-top .zs2-search svg.i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; }
.zs2-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-lg); max-height: min(60vh, 460px); overflow: auto; z-index: 45; padding: 6px; display: grid; gap: 2px; }
.zs2-results[hidden] { display: none; }
.zs2-result { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border: 0; background: transparent; border-radius: 10px; color: var(--ink); width: 100%; }
.zs2-result:hover, .zs2-result[aria-selected="true"] { background: var(--surface-2); }
.zs2-result .mk { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.zs2-result .mk svg.i { width: 18px; height: 18px; }
.zs2-result .t { min-width: 0; display: grid; gap: 1px; }
.zs2-result .t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs2-result .t span { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs2-result .p { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.zs2-results .zs2-none { padding: 10px 12px; font-size: 13px; color: var(--ink-3); }
.zs2-results .zs2-hdr { padding: 6px 10px 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

/* ---------- section headings ---------- */
.zs2-sec { max-width: 1180px; margin: 0 auto; padding: 18px 16px 4px; }
.zs2-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.zs2-sec-head h2 { font-size: 22px; }
.zs2-sec-head .sub { color: var(--ink-3); font-size: 13px; }
.zs2-sec-head .acts { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---------- Life Ribbon ---------- */
.zs2-ribbon { position: relative; max-width: 100%; margin: 6px 0 0; padding: 4px 0 14px; overflow: clip; }
.zs2-ribbon::before, .zs2-ribbon::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2; pointer-events: none; }
.zs2-ribbon::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.zs2-ribbon::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.zs2-track { display: flex; gap: 14px; width: max-content; will-change: transform; padding: 6px 16px; touch-action: pan-y; user-select: none; cursor: grab; }
.zs2-track.dragging { cursor: grabbing; }
.zs2-ribbon.native { overflow: visible; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.zs2-ribbon.native .zs2-track { width: max-content; cursor: default; touch-action: pan-x pan-y; }
.zs2-ribbon.native .zs2-life { scroll-snap-align: center; }
.zs2-life { position: relative; flex: none; width: min(340px, 82vw); min-height: 214px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); display: grid; text-align: left; color: var(--ink); padding: 0; transition: transform .16s, box-shadow .16s, border-color .16s; }
.zs2-life:hover, .zs2-life:focus-within { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.zs2-life canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.zs2-life .body { position: relative; padding: 14px 16px 12px; display: grid; gap: 6px; align-content: start; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 50%, transparent) 0%, color-mix(in srgb, var(--surface) 90%, transparent) 40%, var(--surface) 100%); min-height: 214px; }
.zs2-life .head { display: flex; align-items: center; gap: 8px; }
.zs2-life .head .aicon { width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--surface) 75%, transparent); display: grid; place-items: center; color: var(--ink); }
.zs2-life h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.zs2-life .blurb { font-size: 13px; color: var(--ink-2); }
.zs2-life .mods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.zs2-life .coming { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.zs2-life .livebadge { display: inline-flex; margin-top: 2px; }
.zs2-ribbon-ctl { display: flex; align-items: center; gap: 8px; }
.zs2-ribbon-ctl .hint { font-size: 12px; color: var(--ink-3); }
.zs2-dots { display: flex; gap: 5px; justify-content: center; padding: 0 0 8px; }
.zs2-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--surface-3); padding: 0; }
.zs2-dots button[aria-current="true"] { background: var(--accent); width: 20px; border-radius: 4px; }

/* ---------- live badges / health ---------- */
.zs2-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--good-soft); color: var(--good); white-space: nowrap; }
.zs2-live.off { background: var(--unknown-soft); color: var(--unknown); }
.zs2-live.stale { background: var(--warn-soft); color: var(--warn); }
.zs2-live .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.zs2-health { display: grid; gap: 8px; font-size: 13.5px; }
.zs2-health .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

/* ---------- deal radar strip ---------- */
.zs2-radar { display: grid; gap: 8px; }
.zs2-radar .hit { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--good) 45%, var(--line)); border-radius: 10px; background: linear-gradient(180deg, var(--good-soft), var(--surface)); }
.zs2-radar .hit .t { font-weight: 600; font-size: 13.5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zs2-radar .hit .p { font-family: var(--font-mono); font-weight: 600; text-align: right; }
.zs2-radar .hit .m { grid-column: 1 / -1; font-size: 12px; color: var(--ink-2); display: flex; gap: 6px 12px; flex-wrap: wrap; }
.zs2-radar .none { padding: 12px; font-size: 13px; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: 10px; }

/* ---------- live-market section injected into the product drawer ---------- */
.zs2-market { display: grid; gap: 10px; }
.zs2-market .bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.zs2-market .band { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); display: grid; gap: 2px; }
.zs2-market .band .l { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.zs2-market .band .v { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
.zs2-market .band .s { font-size: 12px; color: var(--ink-2); }
.zs2-market svg.spark { width: 100%; height: 56px; display: block; }
.zs2-market .note { font-size: 12px; color: var(--ink-3); }

/* ---------- module card additions ---------- */
.modcard .zs2-live { margin-left: 2px; }
.zs2-modgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }

/* ---------- static grid fallback (also used under reduced motion when JS is off) ---------- */
.zs2-areas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.zs2-areas-grid .zs2-life { width: auto; }

/* ---------- misc ---------- */
.zs2-kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
.zs2-foot { padding: 20px 16px 110px; font-size: 12.5px; color: var(--ink-3); display: grid; gap: 6px; max-width: 80ch; margin: 0 auto; }
.zs2-foot a { color: inherit; }

@media (max-width: 900px) {
  .zs2-sec { padding-left: 12px; padding-right: 12px; }
  .zs2-top .zs2-search { flex-basis: 100%; order: 5; }
  .zs2-life { width: min(300px, 84vw); }
}
@media (max-width: 600px) {
  .zs2-life { min-height: 200px; }
  .zs2-life .body { min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .zs2-life, .zs2-life:hover { transition: none; transform: none; }
}

/* ---------- live eBay search (hub) ---------- */
.zs2-lsearch { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zs2-lsearch input { flex: 1 1 240px; min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 14px; }
.zs2-lsearch select { min-height: 40px; padding: 6px 30px 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 13px; }
.zs2-lsout { margin-top: 10px; }
.zs2-lsout .none { padding: 12px; font-size: 13px; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: 10px; }
.zs2-lsrows { display: grid; gap: 8px; }
.zs2-lsrow { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.zs2-lsrow.unfiled { opacity: .75; }
.zs2-lsrow .t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.zs2-lsrow .ttl { font-size: 13.5px; }
.zs2-lsrow .m { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }

/* 2.4: internal pages (Kids) */
.btn.zpage { text-decoration: none; }
a.modcard .go svg { transform: none; }