/* IDX listing surfaces - the 2026-08-25 build.
   Photography-first clean luxury on the Seneschal navy/gold palette.
   Compliance sizing is load-bearing: .idx-attribution and .idx-courtesy must
   render at least as large as the property description (.idx-remarks), per
   NWMLS Data Use Policy E.2/E.3 - all three share --idx-body-size. */

:root {
  --idx-navy: #0d1b2a;
  --idx-panel: #13233a;
  --idx-gold: #d4a017;
  --idx-gold-light: #e8c874;
  --idx-text: #eef2f7;
  --idx-muted: #9fb0c3;
  --idx-body-size: 1rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The site's castle-storm backdrop, veiled dark so every required listing
   element stays fully legible on top; the castle top rides the upper right. */
body.idx {
  background-color: var(--idx-navy);
  background-image:
    radial-gradient(1100px 480px at 50% -120px, rgba(212, 160, 23, 0.10), transparent 60%),
    radial-gradient(950px 680px at 0% 100%, rgba(212, 160, 23, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(10, 21, 34, 0.82), rgba(13, 27, 42, 0.90) 45%, rgba(13, 27, 42, 0.97)),
    url('/brand/castle-storm-1800.webp');
  background-position: center top, left bottom, center, right top;
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--idx-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--idx-body-size);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The faded shield watermark from the marketing site, fixed bottom-right.
   Content containers carry z-index 1 so the mark always sits underneath. */
body.idx::after {
  content: '';
  position: fixed;
  right: -70px;
  bottom: -90px;
  width: 420px;
  height: 460px;
  background: url('/brand/seneschal-shield.png') center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.idx-header, .idx-main, .idx-footer { position: relative; z-index: 1; }
/* The send tray is fixed to the bottom of the screen but lives inside main, so
   main has to stack above the footer or a short page's footer covers it. */
.idx-main { z-index: 2; }

/* The site's cursor: a quick gold dot and a trailing ring that grows over
   anything clickable. idx-fx.js adds has-cursor only for a real mouse. */
html.has-cursor, html.has-cursor a, html.has-cursor button,
html.has-cursor select, html.has-cursor input, html.has-cursor label { cursor: none; }
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}
.cursor-dot {
  width: 7px;
  height: 7px;
  background: var(--idx-gold-light);
  box-shadow: 0 0 12px rgba(232, 200, 116, 0.9);
}
.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(212, 160, 23, 0.6);
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.cursor-ring.is-hot {
  width: 62px;
  height: 62px;
  background: rgba(212, 160, 23, 0.10);
  border-color: var(--idx-gold-light);
}

/* Scroll-in life: idx-fx.js tags these and they rise as they enter view.
   The class is added BY JavaScript, so without it nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  /* Doubled class out-specifies each element's own transition (the cards'
     hover snap) for exactly as long as the reveal class is on; idx-fx.js
     strips it once the entrance ends so hover feels quick again. */
  .idx-reveal.idx-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--rd, 0s);
  }
  .idx-reveal.idx-reveal.is-in { opacity: 1; transform: none; }
  .idx-header::after {
    background-size: 200% 100%;
    animation: idx-hairline 9s linear infinite;
  }
  @keyframes idx-hairline {
    from { background-position: 0% 0; }
    to { background-position: 200% 0; }
  }
}

/* The metallic look: deep -> primary -> light gold, clipped to the glyphs. */
.idx-metal {
  background: linear-gradient(180deg, #f4dfa4, var(--idx-gold-light) 38%, var(--idx-gold) 72%, #a87c0c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(212, 160, 23, 0.25));
}

/* ── Header: the tenant brokerage is the loudest thing on the page ───────── */
.idx-header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px 24px;
  padding: 26px clamp(16px, 4vw, 48px);
}
.idx-header .idx-brokerage { grid-column: 2; text-align: center; }
.idx-header .idx-sen-lockup { grid-column: 3; justify-self: end; }
.idx-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a87c0c 12%, var(--idx-gold-light) 50%, #a87c0c 88%, transparent);
  opacity: 0.85;
}
/* Nudged down: Playfair's descender space makes the name's visual mass sit
   below its box middle, so a geometric center reads as the lockup floating
   high. */
.idx-sen-lockup { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-top: 6px; }
.idx-shield {
  height: 46px;
  width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 10px rgba(212, 160, 23, 0.3));
}
.idx-wordmark { height: 38px; width: auto; display: block; }
@media (max-width: 640px) {
  .idx-wordmark { display: none; }
}
.idx-brokerage {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #f4dfa4, var(--idx-gold-light) 38%, var(--idx-gold) 72%, #a87c0c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(212, 160, 23, 0.28));
}
.idx-courtesy {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--idx-body-size);
  color: var(--idx-text);
  max-width: 560px;
}
.idx-tree { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }

/* ── Main column ─────────────────────────────────────────────────────────── */
.idx-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px clamp(16px, 4vw, 48px) 40px;
}
.idx-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 18px;
}
.idx-h1--hero {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  margin: 10px 0 6px;
  background: linear-gradient(180deg, #f4dfa4, var(--idx-gold-light) 38%, var(--idx-gold) 72%, #a87c0c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 16px rgba(212, 160, 23, 0.25));
}
.idx-tagline {
  color: var(--idx-muted);
  font-size: 1.05rem;
  margin-bottom: 24px;
  max-width: 62ch;
}
.idx-h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  margin: 26px 0 8px;
  color: var(--idx-gold-light);
}
.idx-h2--art img { height: 52px; width: auto; display: block; }

/* ── Filters: a labeled search panel, not a strip of anonymous boxes ─────── */
/* Frosted glass over the castle, framed in gold with an inner hairline and
   a jewel set on the frame -- the same ornament language as the pills. */
.idx-filters {
  position: relative;
  background:
    linear-gradient(180deg, rgba(232, 200, 116, 0.07), rgba(19, 35, 58, 0) 34%),
    linear-gradient(180deg, rgba(19, 35, 58, 0.62), rgba(13, 27, 42, 0.82));
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(212, 160, 23, 0.45);
  border-radius: 18px;
  padding: 26px 24px 22px;
  margin-bottom: 18px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(232, 200, 116, 0.22);
}
.idx-filters::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212, 160, 23, 0.18);
  border-radius: 13px;
  pointer-events: none;
}
.idx-filters::after {
  content: '\2726';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--idx-gold);
  font-size: 1.05rem;
  padding: 0 12px;
  text-shadow: 0 0 12px rgba(212, 160, 23, 0.6);
}
.idx-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 12px 14px;
  margin-bottom: 14px;
}
.idx-filter-grid--multi {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(212, 160, 23, 0.22);
}
.idx-filter-grid--multi::after {
  content: '\25C6';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--idx-gold);
  font-size: 0.6rem;
  padding: 0 10px;
}
.idx-multi-hint {
  color: var(--idx-gold);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.idx-in--multi { height: auto; padding: 6px; }
.idx-in--multi option { padding: 5px 9px; border-radius: 6px; }

/* Closed dropdown presentation for the multi-selects; the native listbox
   hides once idx.js wraps it (and stays usable without JS). */
.idx-dd { position: relative; }
.idx-dd--year { flex: 1 1 0; min-width: 0; }
.idx-dd--year .idx-dd-menu { min-width: 0; }
.idx-dd-host { display: none; }
.idx-dd-btn { text-align: left; cursor: pointer; position: relative; padding-right: 32px; }
.idx-dd-btn::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--idx-gold);
  border-bottom: 2px solid var(--idx-gold);
  transform: translateY(-70%) rotate(45deg);
}
.idx-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 240px;
  background: var(--idx-panel);
  border: 1px solid rgba(212, 160, 23, 0.45);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  max-height: 280px;
  overflow-y: auto;
  z-index: 40;
  padding: 6px;
}
/* Status is a short fixed list of nine, and the last one is Sold. Behind the
   shared 280px cap it sat below the fold and an NWMLS reviewer reported on
   2026-09-03 that they could not find sold listings at all. It opens at full
   height instead. County, city and property type keep the cap: those lists
   come from the feed and can run to hundreds of rows. */
.idx-dd--status .idx-dd-menu { max-height: none; }
.idx-dd-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.idx-dd-row:hover { background: rgba(212, 160, 23, 0.12); }
.idx-dd-row--on { color: var(--idx-gold-light); }
.idx-dd-tick {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(212, 160, 23, 0.55);
  border-radius: 4px;
  flex: 0 0 auto;
  position: relative;
}
.idx-dd-row--on .idx-dd-tick { background: linear-gradient(180deg, var(--idx-gold-light), var(--idx-gold)); }
.idx-dd-row--on .idx-dd-tick::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--idx-navy);
  border-bottom: 2px solid var(--idx-navy);
  transform: rotate(45deg);
}
.idx-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.idx-field--wide { grid-column: span 2; }
.idx-field-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--idx-gold);
}
.idx-in {
  background: rgba(10, 21, 34, 0.9);
  border: 1px solid rgba(212, 160, 23, 0.4);
  border-radius: 9px;
  color: var(--idx-text);
  font: inherit;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}
.idx-in:focus { outline: none; border-color: var(--idx-gold); box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.25); }
.idx-range { display: flex; align-items: center; gap: 6px; }
.idx-range .idx-in { flex: 1 1 0; min-width: 0; }
.idx-range-dash { color: var(--idx-muted); flex: 0 0 auto; }
select.idx-in option { background: var(--idx-navy); }
.idx-btn {
  background: linear-gradient(180deg, var(--idx-gold-light), var(--idx-gold) 55%, #a87c0c);
  color: var(--idx-navy);
  border: none;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  padding: 10px 26px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.idx-btn:hover { filter: brightness(1.06); }
.idx-btn--ghost {
  background: transparent;
  color: var(--idx-gold);
  border: 1px solid var(--idx-gold);
  font-weight: 600;
}

.idx-viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 18px;
}
.idx-resultline { color: var(--idx-muted); font-size: 0.95rem; }
.idx-excluded { color: var(--idx-muted); }
.idx-viewtoggle {
  display: inline-flex;
  border: 1px solid rgba(212, 160, 23, 0.5);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.idx-view-btn {
  background: transparent;
  color: var(--idx-gold);
  border: none;
  font: inherit;
  font-weight: 600;
  padding: 9px 26px;
  cursor: pointer;
}
.idx-view-btn--on {
  background: linear-gradient(180deg, var(--idx-gold-light), var(--idx-gold) 55%, #a87c0c);
  color: var(--idx-navy);
  font-weight: 700;
}

/* ── Map view ────────────────────────────────────────────────────────────── */
.idx-map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 10px;
}
.idx-chip-hint {
  color: var(--idx-gold);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
}
.idx-map-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.idx-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--idx-panel);
  border: 1px solid rgba(212, 160, 23, 0.35);
  border-radius: 999px;
  color: var(--idx-muted);
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 14px 6px 10px;
  cursor: pointer;
  opacity: 0.45;
}
.idx-chip .idx-dot { margin: 0; width: 12px; height: 12px; }
.idx-chip--on { opacity: 1; color: var(--idx-text); border-color: rgba(212, 160, 23, 0.6); }
.idx-map-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.idx-map-tools-label { color: var(--idx-muted); font-size: 0.9rem; }
.idx-btn--tool { padding: 6px 14px; font-size: 0.9rem; border-radius: 999px; }
.idx-btn--tool-on {
  background: linear-gradient(180deg, var(--idx-gold-light), var(--idx-gold) 55%, #a87c0c);
  color: var(--idx-navy);
}
.idx-map {
  height: 68vh;
  min-height: 420px;
  border-radius: 16px;
  border: 1px solid rgba(212, 160, 23, 0.35);
  background: #0a1522;
}
.idx-map-note { color: var(--idx-muted); font-size: 0.85rem; margin: 10px 0 18px; }
.idx-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px 0 10px;
}
.idx-dot--active { background: #9ed873; }
.idx-dot--activeundercontract { background: #ecc06a; }
.idx-dot--pending { background: #9db9ee; }
.idx-dot--closed { background: #e09c9c; }
.idx-dot--comingsoon { background: #c9a3e8; }
.idx-map-wrap .leaflet-popup-content-wrapper {
  background: var(--idx-panel);
  color: var(--idx-text);
  border: 1px solid rgba(212, 160, 23, 0.45);
  border-radius: 10px;
}
.idx-map-wrap .leaflet-popup-tip { background: var(--idx-panel); }
.idx-pop { font-family: 'Inter', system-ui, sans-serif; }
.idx-pop-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--idx-gold-light);
}
.idx-pop-status { font-size: 0.82rem; color: var(--idx-muted); }
.idx-pop-facts { font-size: 0.88rem; margin-top: 2px; }
/* .leaflet-container a carries (0,1,1) specificity and silently beats a bare
   class; the container class must ride along for gold to win. */
.idx-map-wrap .leaflet-container a.idx-pop-link { color: var(--idx-gold); display: inline-block; margin-top: 6px; }

/* ── Result cards: the photo is the card ─────────────────────────────────── */
.idx-grid {
  display: grid;
  /* min() so a 300px track cannot outgrow a narrower container: a bare
     minmax(300px, 1fr) makes the card wider than the screen at 320px and the
     whole page scrolls sideways. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 22px;
}
.idx-card {
  display: block;
  background: linear-gradient(180deg, #16273f, #101d30);
  border: 1px solid rgba(212, 160, 23, 0.25);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.idx-card:hover {
  transform: translateY(-4px);
  border-color: var(--idx-gold);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.55), 0 0 24px rgba(212, 160, 23, 0.18);
}
/* The pointer lights the card from where it hovers, like the site's tiles. */
.idx-card { position: relative; }
.idx-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(232, 200, 116, 0.10), transparent 60%);
}
.idx-card:hover::after { opacity: 1; }
.idx-card-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a1522; }
.idx-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 68%, rgba(13, 27, 42, 0.5));
  pointer-events: none;
}
.idx-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.idx-card:hover .idx-card-photo img { transform: scale(1.04); }
.idx-tour-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  background: rgba(13, 27, 42, 0.82);
  border: 1px solid rgba(212, 160, 23, 0.6);
  border-radius: 999px;
  color: var(--idx-gold-light);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
}
.idx-card-photo--none {
  display: flex; align-items: center; justify-content: center;
  color: var(--idx-muted); font-size: 0.9rem; aspect-ratio: 16 / 10;
}
/* The card is a column and the MLS row rides margin-top auto, so the tree
   icon and Select sit in the bottom-right corner of EVERY card, however
   short its address, even when grid rows equalize heights. */
.idx-card { display: flex; flex-direction: column; }
.idx-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.idx-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.idx-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  font-weight: 700;
  background: linear-gradient(180deg, #f4dfa4, var(--idx-gold-light) 40%, var(--idx-gold) 78%, #b8880f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.idx-price--big { font-size: clamp(1.7rem, 3vw, 2.3rem); }
/* Rich's Price_Blank_Wide pill at its native 520x96 ratio: the medallion
   carries the $, digits sit gold and left-aligned in the black bar. */
.idx-price-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 347px;
  height: 64px;
  padding: 2px 34px 4px 88px;
  background: url('/brand/Price_Blank_Wide.png') no-repeat center / 100% 100%;
  flex: 0 0 auto;
}
.idx-price-pill-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(180deg, #f4dfa4, var(--idx-gold-light) 40%, var(--idx-gold) 78%, #b8880f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.idx-card-address { margin-top: 4px; font-weight: 600; color: var(--idx-gold-light); }
.idx-card-facts { color: var(--idx-muted); font-size: 0.92rem; margin-top: 2px; }
.idx-card-mls {
  color: var(--idx-muted);
  font-size: 0.8rem;
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.idx-card-mls .idx-tree { width: 18px; height: 18px; }
.idx-card-corner { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.idx-select { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.idx-select-label {
  color: var(--idx-gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.idx-select-box {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(212, 160, 23, 0.65);
  border-radius: 4px;
  background: rgba(10, 21, 34, 0.9);
  cursor: pointer;
  position: relative;
  margin: 0;
}
.idx-select-box:checked { background: linear-gradient(180deg, var(--idx-gold-light), var(--idx-gold)); }
.idx-select-box:checked::after {
  content: '';
  position: absolute;
  left: 5.5px;
  top: 2.5px;
  width: 4px;
  height: 9px;
  border-right: 2px solid var(--idx-navy);
  border-bottom: 2px solid var(--idx-navy);
  transform: rotate(45deg);
}
/* display:flex would silently defeat the hidden attribute; this keeps an
   empty tray truly gone. */
.idx-select-tray[hidden] { display: none; }
.idx-select-tray {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(19, 35, 58, 0.85), rgba(13, 27, 42, 0.95));
  border: 1px solid rgba(212, 160, 23, 0.55);
  border-radius: 14px;
}
.idx-select-count { color: var(--idx-gold-light); font-weight: 600; }
.idx-btn--tray { padding: 9px 24px; font-size: 0.95rem; }
.idx-tray-row { display: flex; align-items: center; gap: 14px; }
.idx-tray-row[hidden] { display: none; }
.idx-tray-to { width: 260px; }
.idx-tray-status { color: var(--idx-gold-light); font-size: 0.9rem; white-space: nowrap; }
.idx-detail-compose[hidden] { display: none; }
.idx-detail-compose { margin: -4px 0 16px; }
.idx-detail-compose .idx-tray-row { flex-wrap: wrap; gap: 10px; }
.idx-detail-compose .idx-to-wrap { min-width: 0; flex: 1 1 260px; }

/* ── Status pills: non-Active must read differently at a glance ──────────── */
.idx-status {
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.idx-status--active { background: rgba(122, 184, 88, 0.18); color: #9ed873; border: 1px solid #6fa54c; }
.idx-status--activeundercontract { background: rgba(230, 168, 60, 0.16); color: #ecc06a; border: 1px solid #c99b3f; }
.idx-status--pending { background: rgba(110, 150, 220, 0.16); color: #9db9ee; border: 1px solid #6e96dc; }
.idx-status--closed { background: rgba(200, 96, 96, 0.16); color: #e09c9c; border: 1px solid #b76a6a; }
.idx-status--comingsoon { background: rgba(170, 125, 210, 0.16); color: #c9a3e8; border: 1px solid #a97fd0; }

/* ── Detail page ─────────────────────────────────────────────────────────── */
.idx-back {
  display: inline-block;
  color: var(--idx-gold);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 12px;
}
.idx-back:hover { color: var(--idx-gold-light); }

.idx-gallery {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0a1522;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
  border: 1px solid rgba(212, 160, 23, 0.3);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.idx-gallery--none { display: flex; align-items: center; justify-content: center; color: var(--idx-muted); }
/* contain, never cover: the NWMLS watermark may not be cropped or hidden on
   property displays (IDX Guidance 1); thumbnails are the only exception. */
.idx-gallery-main { width: 100%; height: 100%; object-fit: contain; display: block; }
.idx-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(13, 27, 42, 0.72);
  color: var(--idx-gold-light);
  border: 1px solid rgba(212, 160, 23, 0.5);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.idx-gallery-nav--prev { left: 14px; }
.idx-gallery-nav--next { right: 14px; }
.idx-gallery-nav:hover { background: rgba(13, 27, 42, 0.92); }
.idx-gallery-count {
  position: absolute;
  right: 16px;
  bottom: 12px;
  background: rgba(13, 27, 42, 0.75);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.85rem;
}

/* Grid 22 NWMLS as amended 2026-10-15: leads the listing above the photos, and
   never smaller or dimmer than the description text or the action buttons. */
.idx-attribution {
  font-size: var(--idx-body-size);
  color: var(--idx-text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.idx-attribution .idx-tree { width: 26px; height: 26px; }

.idx-detail-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 24px;
  margin-bottom: 14px;
}
.idx-detail-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.idx-h1--address { margin-bottom: 4px; color: var(--idx-gold-light); }
.idx-detail-facts { color: var(--idx-muted); }
/* Price pill on top, the status centered beneath it, the whole stack riding
   to the right of the address. */
.idx-detail-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.idx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 16px; }
/* Rich's artwork pills render at their native 380x96 ratio -- never
   stretched, never resized apart. */
.idx-pill-btn { background: transparent; border: none; padding: 0; cursor: pointer; }
.idx-pill-btn img { height: 48px; width: auto; display: block; }
.idx-pill-btn:hover img { filter: brightness(1.15) drop-shadow(0 0 10px rgba(212, 160, 23, 0.4)); }
.idx-copied-note { color: var(--idx-gold-light); font-size: 0.9rem; }


@media print {
  body.idx { background: #fff !important; color: #000; }
  .idx-filters, .idx-viewbar, .idx-map-wrap, .idx-gallery-nav, .idx-gallery-count,
  .idx-actions, .idx-detail-compose, .idx-agent, .idx-pager, .idx-multi-hint { display: none !important; }
  .idx-brokerage, .idx-h1, .idx-h1--hero, .idx-price, .idx-metal {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #000 !important;
    filter: none !important;
  }
  .idx-card-address, .idx-fact-label, .idx-fact-value, .idx-attribution, .idx-courtesy,
  .idx-disclaimer, .idx-use, .idx-remarks, .idx-detail-facts, .idx-h2, .idx-powered,
  .idx-footer-links a { color: #000 !important; }
  .idx-facts, .idx-fact { border-color: #ccc; }
}

.idx-agent {
  background: var(--idx-panel);
  border: 1px solid rgba(212, 160, 23, 0.35);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 6px 0 18px;
}
.idx-agent-title { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--idx-muted); }
.idx-agent-name { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--idx-gold-light); }
.idx-agent-lines { color: var(--idx-text); font-size: 0.95rem; }

.idx-remarks { max-width: 74ch; margin-bottom: 22px; font-size: var(--idx-body-size); }

.idx-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: 10px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
}
.idx-fact { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.idx-fact-label { color: var(--idx-gold); flex: 0 0 auto; }
.idx-fact-value { font-weight: 600; text-align: right; text-wrap: balance; }

/* ── Pager, footer, legal ────────────────────────────────────────────────── */
.idx-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.idx-pager-where { color: var(--idx-muted); }
.idx-pager-arrow img { height: 30px; width: auto; display: block; }
.idx-pager-arrow:hover img { filter: brightness(1.15) drop-shadow(0 0 10px rgba(212, 160, 23, 0.4)); }
.idx-pill-btn--submit img { height: 58px; }
.idx-empty { color: var(--idx-muted); padding: 40px 0; text-align: center; }

.idx-footer {
  border-top: 1px solid rgba(212, 160, 23, 0.3);
  padding: 24px clamp(16px, 4vw, 48px) 30px;
  color: var(--idx-muted);
}
.idx-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(min(280px, 100%), 1fr);
  gap: 18px clamp(24px, 5vw, 90px);
  align-items: end;
}
.idx-footer-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}
.idx-disclaimer { font-size: 0.92rem; margin-bottom: 10px; color: var(--idx-muted); }
.idx-use { font-size: 0.92rem; }
.idx-footer-links a { color: var(--idx-gold); }
.idx-powered { color: var(--idx-muted); }
.idx-legal { max-width: 90ch; margin-bottom: 12px; }
.idx-main--notices .idx-legal { color: var(--idx-text); }

@media (max-width: 640px) {
  .idx-header { grid-template-columns: 1fr; justify-items: center; }
  .idx-header .idx-brokerage, .idx-header .idx-sen-lockup { grid-column: 1; justify-self: center; }
  .idx-detail-price { width: 100%; align-items: center; }
  .idx-price-pill { width: 293px; height: 54px; padding: 2px 28px 4px 74px; }
  .idx-price-pill-num { font-size: 1.35rem; }
  .idx-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* One multi-select per row on a phone. At half width the 240px menu ran
     past the right edge of the screen and scrolled the whole page sideways,
     and dropping the min-width instead left the long status labels wrapping
     over four lines. Full width fixes both. The menu then takes the field's
     own width, so it can never reach outside the panel at any viewport. */
  .idx-filter-grid--multi { grid-template-columns: 1fr; }
  .idx-dd-menu { min-width: 0; }
  /* The Search homes pill is a fixed-height image about 296px wide, which is
     wider than the panel on a 320px screen and pushed the page sideways on
     its own, dropdowns closed. It scales down instead. */
  .idx-pill-btn--submit img { max-width: 100%; height: auto; }
  .idx-btn { width: 100%; justify-content: center; }
  .idx-footer-grid { grid-template-columns: 1fr; }
  .idx-map { height: 60vh; min-height: 340px; }
}

/* Inside the app (Rich, 2026-09-24). The welcome block is written for a
   client opening a share link; the agent already knows what this page is, so
   it only pushed the search down. The banner is slimmer too. The brokerage
   name keeps its size and stays the most prominent identity (Grid 6, DUP E.1);
   the Seneschal lockup shrinks with the banner so it stays the smaller one.
   Set by look.js only when framed by the app, so the rendered page, the
   staging surface NWMLS approved, and share links are all unchanged. */
html.idx-in-app .idx-h1--hero:has(+ .idx-tagline),
html.idx-in-app .idx-tagline { display: none; }
html.idx-in-app .idx-header { padding-top: 12px; padding-bottom: 12px; }
html.idx-in-app .idx-shield { height: 34px; }
html.idx-in-app .idx-wordmark { height: 28px; }
html.idx-in-app .idx-sen-lockup { margin-top: 2px; }
html.idx-in-app .idx-main { padding-top: 18px; }

/* Public home search on an agent's own website (routes/idxPublic.js). The
   contact button sits inside .idx-attribution and never outsizes it: Grid 22
   NWMLS paragraph as amended 2026-10-15. */
.idx-attribution:has(.idx-contact-btn) { flex-wrap: wrap; }
.idx-contact-btn {
  font-size: var(--idx-body-size);
  font-weight: 600;
  color: var(--idx-navy);
  background: linear-gradient(180deg, var(--idx-gold-light), var(--idx-gold));
  border-radius: 999px;
  padding: 7px 18px;
  text-decoration: none;
  white-space: nowrap;
}
.idx-contact-btn:hover, .idx-contact-btn:focus-visible { filter: brightness(1.08); }
.idx-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 21, 34, 0.9);
  border: 1px solid rgba(212, 160, 23, 0.65);
  border-radius: 999px;
  color: var(--idx-gold);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 11px;
  cursor: pointer;
}
.idx-save-icon { font-size: 1rem; line-height: 1; }
.idx-save--on { background: linear-gradient(180deg, var(--idx-gold-light), var(--idx-gold)); color: var(--idx-navy); }
.idx-actions .idx-save { align-self: center; font-size: 0.9rem; padding: 8px 16px; }
.idx-saved-tray[hidden], .idx-saved-list[hidden] { display: none; }
.idx-saved-tray {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(19, 35, 58, 0.85), rgba(13, 27, 42, 0.95));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 160, 23, 0.55);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}
.idx-saved-tray .idx-tray-row { flex-wrap: wrap; }
.idx-saved-tray a.idx-btn { text-decoration: none; }
.idx-saved-list { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; }
.idx-saved-list li { padding: 6px 0; border-top: 1px solid rgba(212, 160, 23, 0.2); }
.idx-saved-list a { color: var(--idx-text); }
.idx-saved-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.idx-saved-gone { color: var(--idx-text); opacity: 0.75; }
.idx-saved-remove { flex: none; font: inherit; font-size: 0.85em; font-weight: 600; color: var(--idx-gold, #d4a017); background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.idx-saved-remove:hover { background: rgba(212, 160, 23, 0.14); }
.idx-agent-lines a { color: var(--idx-gold-light); text-decoration: none; }
.idx-agent-lines a:hover, .idx-agent-lines a:focus-visible { text-decoration: underline; }
@media print { .idx-contact-btn, .idx-save, .idx-saved-tray { display: none !important; } }

.idx-alert {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: rgba(19, 35, 58, 0.85);
  border: 1px solid rgba(212, 160, 23, 0.45);
  border-radius: 12px;
}
.idx-alert-title { margin: 0 0 10px; color: var(--idx-gold-light); font-weight: 600; }
.idx-alert-row { display: flex; flex-wrap: wrap; gap: 10px; }
.idx-alert-row[hidden] { display: none; }
.idx-alert-row .idx-in { flex: 1 1 200px; width: auto; }
.idx-alert-row .idx-btn { flex: 0 0 auto; justify-content: center; }
.idx-alert-trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.idx-alert-note { margin: 8px 0 0; color: var(--idx-muted); font-size: 0.85rem; }
.idx-alert-note--done { color: var(--idx-gold-light); }
.idx-alert-form { margin: 18px 0; }
@media (max-width: 520px) { .idx-alert-row .idx-btn { flex: 1 1 100%; } }
@media print { .idx-alert { display: none !important; } }

/* ── Agent Save and the contact picker (in-app search only) ──────────────── */
.idx-saved-link-row { margin: 0 0 14px 0; }
.idx-saved-link { text-decoration: none; display: inline-block; }
.idx-to-wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 320px;
  max-width: 520px;
}
.idx-to-wrap .idx-tray-to { flex: 1 1 180px; width: auto; min-width: 180px; }
.idx-to-chips { display: contents; }
.idx-to-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--idx-gold-light), var(--idx-gold));
  color: var(--idx-navy);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.idx-to-chip-x {
  border: 0;
  background: transparent;
  color: var(--idx-navy);
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.idx-to-menu[hidden] { display: none; }
.idx-to-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(13, 27, 42, 0.98);
  border: 1px solid rgba(212, 160, 23, 0.55);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  max-height: 280px;
  overflow-y: auto;
  z-index: 70;
}
.idx-to-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.idx-to-option:hover { background: rgba(212, 160, 23, 0.16); }
.idx-to-name { color: var(--idx-text); font-weight: 600; }
.idx-to-email { color: var(--idx-gold-light); font-size: 0.82rem; }
.idx-tray-row { flex-wrap: wrap; }

.idx-app-link { display: none; }
.idx-top .idx-app-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px 0;
  padding: 7px 16px;
  border: 1px solid rgba(212, 160, 23, 0.65);
  border-radius: 999px;
  color: var(--idx-gold);
  font-weight: 600;
  text-decoration: none;
}
.idx-top .idx-app-link:hover, .idx-top .idx-app-link:focus-visible { background: rgba(212, 160, 23, 0.14); }
.idx-main--detail .idx-app-link + .idx-back { margin-left: 12px; }

/* The agent's own listing in a searched city leads the results and stands out. */
.idx-card--featured {
  border: 2px solid var(--idx-gold);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(212, 160, 23, 0.18), 0 0 34px rgba(212, 160, 23, 0.35);
}
.idx-featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  background: var(--idx-gold);
  color: #0D1B2A;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* Public results: back to the search, a legend, and star/pin markers. */
.idx-back-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 18px;
  padding: 10px 20px;
  border: 1px solid rgba(212, 160, 23, 0.6);
  border-radius: 999px;
  color: var(--idx-gold);
  font-weight: 700;
  text-decoration: none;
  background: rgba(13, 27, 42, 0.6);
}
.idx-back-search:hover { background: var(--idx-gold); color: #0D1B2A; }
.idx-map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; color: var(--idx-text); font-size: 0.95rem; }
.idx-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.idx-legend-star { color: var(--idx-gold); font-size: 1.35rem; line-height: 1; }
.idx-legend-pin { display: block; }
.idx-pin { background: none; border: none; }
.idx-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); }
.idx-pop-mine { color: var(--idx-gold); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; }
/* Public results: a map that leaves room for the first row of homes. */
.idx-viewbar--results { justify-content: flex-start; gap: 10px 22px; }
.idx-viewbar--results .idx-back-search { margin: 0; }
.idx-map-wrap[data-idx-map-open] { margin-bottom: 20px; }
.idx-map-wrap[data-idx-map-open] .idx-map { height: clamp(220px, calc(100vh - 560px), 60vh); min-height: 0; }
@media (max-width: 640px) {
  .idx-map-wrap[data-idx-map-open] .idx-btn--tool { width: auto; padding: 6px 12px; }
  .idx-map-wrap[data-idx-map-open] .idx-map { height: clamp(200px, calc(100vh - 640px), 50vh); }
}

/* The agent's own For sale / Pending / Recently sold pages (/mine). */
.idx-mine-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.idx-mine-tab {
  padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(212, 160, 23, 0.55);
  color: var(--idx-text); text-decoration: none; font-weight: 700;
}
.idx-mine-tab:hover { border-color: var(--idx-gold-light); color: var(--idx-gold-light); }
.idx-mine-tab[aria-current="page"] { background: var(--idx-gold); border-color: var(--idx-gold); color: #0D1B2A; }
.idx-card-note { margin-top: 4px; color: var(--idx-gold-light); font-size: 0.88rem; font-weight: 600; }

/* An agent's own website showing the For sale / Pending / Recently sold page
   inside its own pages (?embed=1). Same compaction as idx-in-app: the
   brokerage name keeps its size and stays the most prominent identity. */
body.idx-embed .idx-header { padding-top: 12px; padding-bottom: 12px; }
body.idx-embed .idx-shield { height: 34px; }
body.idx-embed .idx-wordmark { height: 28px; }
body.idx-embed .idx-sen-lockup { margin-top: 2px; }
body.idx-embed .idx-main { padding-top: 18px; padding-bottom: 24px; }
body.idx-embed .idx-main { max-width: none; }
body.idx-embed .idx-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 260px)); justify-content: center; gap: 16px; }
body.idx-embed .idx-card-photo { aspect-ratio: 16 / 9; }
/* Inside the agent's website the saved-homes bar sits above the homes, never on top of them. */
body.idx-embed .idx-main { display: flex; flex-direction: column; }
body.idx-embed .idx-saved-tray { order: -1; position: static; transform: none; margin: 0 auto 14px; max-width: 100%; box-shadow: none; }