/* Card Show Finder — matches the Orbley Cards design system. */
:root {
  --text-xs: .78rem; --text-sm: .875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px;
  --content: 1000px;
  --font-display: 'Clash Display', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
}

/* Theme values mirror styles.css so the finder matches whatever the rest of the
   site is showing. The site follows the visitor's system preference. */
:root,
[data-theme='dark'] {
  --color-bg: #0e0f12; --color-surface: #16181d; --color-surface-2: #1d2027;
  --color-border: #282c35; --color-divider: #21242b;
  --color-text: #f2f3f5; --color-text-muted: #a2a8b4; --color-text-faint: #6f7682;
  --color-primary: #e9b23e; --color-primary-soft: rgba(233, 178, 62, .14);
  --cta-ink: #14110a;
  --controls-veil: rgba(14, 15, 18, .94);
}
[data-theme='light'] {
  --color-bg: #f7f6f2; --color-surface: #ffffff; --color-surface-2: #fbfaf7;
  --color-border: #dcd9d0; --color-divider: #e6e3db;
  --color-text: #1a1b20; --color-text-muted: #64656d; --color-text-faint: #9a9ba1;
  --color-primary: #8a5a08; --color-primary-soft: rgba(138, 90, 8, .09);
  --cta-ink: #ffffff;
  --controls-veil: rgba(247, 246, 242, .94);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); }
.ns-wrap { max-width: var(--content); margin: 0 auto; padding: 0 var(--space-4); }
.ns-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* header */
.ns-head { padding: var(--space-12) 0 var(--space-8); border-bottom: 1px solid var(--color-divider); }
.ns-kicker {
  margin: 0 0 var(--space-2); font-size: var(--text-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-primary);
}
.ns-head h1 {
  margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.75rem); line-height: 1.1; letter-spacing: -.02em;
}
.ns-sub { margin: 0 0 var(--space-3); max-width: 62ch; color: var(--color-text-muted); }
.ns-meta { margin: 0; font-size: var(--text-sm); color: var(--color-text-faint); }

/* controls */
.ns-controls {
  position: sticky; top: 0; z-index: 5;
  background: var(--controls-veil); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider); padding: var(--space-4) 0;
}
.ns-loc {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.ns-loc-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ns-loc-row + .ns-loc-row { margin-top: var(--space-3); }
.ns-loc-lead { font-size: var(--text-sm); color: var(--color-text-muted); }
.ns-loc-lead strong { color: var(--color-text); }
.ns-or { font-size: var(--text-sm); color: var(--color-text-faint); }
.ns-status { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-faint); }

.ns-btn {
  font: inherit; font-weight: 500; cursor: pointer;
  background: var(--color-primary); color: #1a1405; border: 1px solid var(--color-primary);
  padding: .5rem .95rem; border-radius: var(--radius-sm);
}
.ns-btn:hover { filter: brightness(1.08); }
.ns-btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.ns-btn-ghost:hover { background: var(--color-surface-2); }
.ns-link {
  background: none; border: 0; color: var(--color-text-faint); font: inherit;
  font-size: var(--text-sm); cursor: pointer; text-decoration: underline; padding: 0;
}
.ns-zip input, .ns-field input, .ns-field select {
  font: inherit; color: var(--color-text); background: var(--color-surface-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: .5rem .6rem; min-width: 0; width: 100%;
}
.ns-zip { display: block; max-width: 8.5rem; }
.ns-zip input { text-align: center; letter-spacing: .06em; }
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 2px;
}

.ns-filters { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end; }
.ns-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 8.5rem; }
.ns-field-grow { flex: 1 1 14rem; }
.ns-field > span {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-faint);
}
.ns-count { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* list */
main { padding: var(--space-8) 0 var(--space-16); }
.ns-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ns-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.ns-when {
  display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap;
  font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-1);
}
.ns-when strong { color: var(--color-primary); font-size: var(--text-base); }
.ns-mi {
  margin-left: auto; color: var(--color-text-faint); font-variant-numeric: tabular-nums;
}
.ns-name {
  margin: 0 0 var(--space-1); font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); line-height: 1.25;
}
.ns-where { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.ns-src {
  margin: 0; font-size: var(--text-sm); color: var(--color-text-faint);
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
}
.ns-tag {
  font-size: var(--text-xs); font-weight: 500; padding: .15rem .5rem;
  border-radius: var(--radius-full); background: var(--color-surface-2);
  border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.ns-tag.is-multi {
  background: var(--color-primary-soft); border-color: rgba(233, 178, 62, .35);
  color: var(--color-primary);
}
.ns-map { margin-left: auto; }
.ns-empty {
  padding: var(--space-8) var(--space-4); text-align: center;
  color: var(--color-text-muted); border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}
.ns-more { display: block; margin: var(--space-6) auto 0; }

/* footer */
.ns-foot {
  border-top: 1px solid var(--color-divider); padding: var(--space-8) 0 var(--space-16);
  background: var(--color-surface);
}
.ns-foot h2 {
  margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xl);
}
.ns-foot p { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); max-width: 74ch; }
.ns-foot strong { color: var(--color-text); }
.ns-fine { color: var(--color-text-faint); font-size: var(--text-xs); line-height: 1.7; }

@media (max-width: 620px) {
  /* Stacked full-width filters make this block taller than a phone screen, and a
     sticky element that tall leaves no room to read the list. Let it scroll away. */
  .ns-controls { position: static; }
  .ns-head { padding-top: var(--space-8); }
  .ns-field, .ns-field-grow { flex: 1 1 100%; min-width: 0; }
  .ns-mi, .ns-map { margin-left: 0; }
  .ns-when strong { font-size: var(--text-sm); }
}

.ns-field select:disabled { opacity: .5; cursor: not-allowed; }
.ns-mi-none { font-size: var(--text-xs); font-style: italic; }

/* back to the main site */
.ns-home {
  display: inline-flex; align-items: center; gap: .45em;
  margin: 0 0 var(--space-3); font-size: var(--text-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-primary); text-decoration: none;
}
.ns-home:hover { color: var(--color-text); }
.ns-home-arrow { transition: transform .18s ease; }
.ns-home:hover .ns-home-arrow { transform: translateX(-3px); }

/* offer CTA between the list and the footnotes */
.ns-cta {
  margin-top: var(--space-12);
  border-block: 1px solid var(--color-divider);
  background: color-mix(in oklab, var(--color-primary) 7%, transparent);
  padding-block: var(--space-12);
}
.ns-cta h2 {
  margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 1.75rem); letter-spacing: -.01em;
}
.ns-cta p { margin: 0 0 var(--space-6); max-width: 56ch; color: var(--color-text-muted); }
.ns-cta-btn {
  display: inline-block; padding: .7em 1.4em; border-radius: 999px;
  background: var(--color-primary); color: var(--cta-ink); font-weight: 700;
  text-decoration: none; transition: filter .18s ease;
}
.ns-cta-btn:hover { filter: brightness(1.08); }

/* theme toggle, mirroring the site header control */
.ns-head-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-3);
}
.ns-head-top .ns-home { margin: 0; }
.ns-theme {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-muted);
  cursor: pointer; transition: color .18s ease, border-color .18s ease;
}
.ns-theme:hover { color: var(--color-text); border-color: var(--color-text-faint); }