/* ============================================================
   Village Notes — extends the site stylesheet, adds no palette.
   Every color here resolves to a token already defined in
   /styles.css, so light mode and dark mode both follow the rest
   of daricecorey.com with nothing to keep in sync by hand.
   ============================================================ */

.vn-visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- HERO (deep-purple band, matching .research-hero) ---------- */
.vn-hero { background:#2d1f4e; padding:4rem 0 3.5rem; }
.vn-hero .section-heading { margin-bottom:1.25rem; }
.vn-hero-lede {
  font-size:1rem; color:rgba(255,255,255,.8); max-width:640px;
  line-height:1.75; margin-bottom:2rem;
}
.vn-hero-meta { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.vn-badge {
  display:inline-block; background:rgba(192,132,252,.14);
  border:1px solid rgba(192,132,252,.35); color:#c084fc;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.45rem .9rem; border-radius:999px;
}
.vn-updated { font-size:.75rem; color:rgba(255,255,255,.55); letter-spacing:.04em; }

/* The band stays dark in light mode, so re-assert the bright accent
   inside it the same way /styles.css does for the other hero bands. */
@media (prefers-color-scheme: light) {
  .vn-hero { --coral:#c084fc; --coral-dim:#a855f7; }
}

/* ---------- CONTROLS ---------- */
/* The section backgrounds below are written as `section.vn-*` on purpose.
   /styles.css alternates band colour with `section:nth-child(even)`, which
   outranks a bare class selector -- a plain `.vn-submit-section` loses and the
   dark band renders light. Matching that specificity is what makes these hold. */
section.vn-controls-section { background:var(--bg); padding:2.5rem 0 1.5rem; border-bottom:1px solid var(--line); }
.vn-controls {
  display:grid; gap:1rem 1.25rem; align-items:end;
  grid-template-columns:minmax(220px,1.6fr) repeat(3,minmax(150px,1fr)) auto;
}
.vn-field { display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.vn-field label {
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral); font-weight:500;
}
.vn-field input, .vn-field select {
  width:100%; background:var(--bg2); color:var(--cream);
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--sans); font-size:.9rem; font-weight:300;
  padding:.7rem .85rem; transition:border-color .2s;
  appearance:none; -webkit-appearance:none;
}
.vn-field select {
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 1.15rem, calc(100% - .8rem) 1.15rem;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:2.4rem; cursor:pointer;
}
.vn-field input:hover, .vn-field select:hover { border-color:var(--coral); }
.vn-field input::placeholder { color:var(--muted); opacity:.85; }
.vn-reset { padding:.7rem 1.25rem; white-space:nowrap; }
.vn-resultline {
  margin-top:1.5rem; font-size:.8rem; letter-spacing:.06em;
  color:var(--muted); min-height:1.2em;
}

/* ---------- RESULTS ---------- */
section.vn-results-section { background:var(--bg); padding:2.5rem 0 5rem; }
.vn-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; }

.vn-card {
  background:var(--bg2); border-top:2px solid var(--coral);
  padding:1.75rem 1.5rem; display:flex; flex-direction:column;
  min-width:0; transition:background .25s;
}
.vn-card:hover { background:color-mix(in srgb, var(--bg2) 88%, var(--coral)); }
.vn-card-track {
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral); margin-bottom:.6rem;
}
.vn-card-track .vn-sep { opacity:.45; margin:0 .45rem; }
.vn-card-name {
  font-family:var(--serif); font-size:1.15rem; font-weight:700;
  line-height:1.3; color:var(--cream); margin-bottom:.35rem;
}
.vn-card-town { font-size:.82rem; color:var(--muted); margin-bottom:.5rem; }
.vn-card-type { font-size:.86rem; color:var(--cream); opacity:.85; line-height:1.6; margin-bottom:1rem; }

.vn-stars { color:var(--coral); font-size:.85rem; letter-spacing:.12em; margin-bottom:.85rem; }
.vn-stars .vn-star-off { opacity:.28; }

.vn-facts { display:flex; flex-direction:column; gap:.7rem; margin-bottom:1rem; }
.vn-fact { display:grid; grid-template-columns:6.5rem 1fr; gap:.6rem; align-items:start; min-width:0; }
.vn-fact dt {
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--coral); padding-top:.15rem;
}
.vn-fact dd { font-size:.85rem; color:var(--cream); opacity:.9; line-height:1.6; margin:0; min-width:0; }
.vn-fact-flag dd { border-left:2px solid var(--coral); padding-left:.7rem; opacity:1; }

.vn-card-notes {
  font-size:.83rem; color:var(--muted); line-height:1.7;
  border-top:1px solid var(--line); padding-top:1rem; margin-bottom:1rem;
}
.vn-card-notes.vn-clamped {
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.vn-more {
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--coral);
  margin:-.5rem 0 1rem; align-self:flex-start;
}
.vn-more:hover { color:var(--coral-dim); text-decoration:underline; }

.vn-card-foot {
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.5rem;
}
.vn-card-links { display:flex; gap:1.25rem; flex-wrap:wrap; }
.vn-card-links a, .vn-card-links span {
  font-size:.76rem; letter-spacing:.06em; color:var(--coral);
  text-decoration:none; overflow-wrap:anywhere;
}
.vn-card-links a:hover { text-decoration:underline; }
.vn-card-links span { color:var(--muted); }
.vn-card-source { font-size:.7rem; color:var(--muted); opacity:.8; line-height:1.5; }

/* ---------- EMPTY STATE ---------- */
.vn-empty {
  text-align:center; padding:4.5rem 2rem;
  background:var(--bg2); border:1px solid var(--line);
}
.vn-empty-icon { font-size:1.5rem; color:var(--coral); margin-bottom:1.25rem; }
.vn-empty-heading { font-family:var(--serif); font-size:1.4rem; font-weight:700; color:var(--cream); margin-bottom:.85rem; }
.vn-empty-body { font-size:.9rem; color:var(--muted); line-height:1.75; max-width:460px; margin:0 auto; }

/* ---------- ABOUT ---------- */
section.vn-about-section { background:var(--bg2); padding:5rem 0; }
.vn-about-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin-top:2rem; }
.vn-about-block { background:var(--bg); padding:2rem 1.75rem; }
.vn-about-block h3 { font-family:var(--serif); font-size:1.05rem; font-weight:700; color:var(--cream); margin-bottom:.75rem; }
.vn-about-block p { font-size:.88rem; color:var(--muted); line-height:1.7; }

/* ---------- FOOTER CREDIT ---------- */
.vn-credit {
  font-family:var(--serif); font-size:.95rem; font-style:italic;
  color:var(--coral); margin-bottom:.6rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
  .vn-controls { grid-template-columns:1fr 1fr; }
  .vn-field-search { grid-column:1 / -1; }
  .vn-reset { grid-column:1 / -1; justify-self:start; }
  .vn-about-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .vn-hero { padding:3rem 0 2.5rem; }
  .vn-controls { grid-template-columns:1fr; }
  .vn-grid { grid-template-columns:1fr; }
  .vn-fact { grid-template-columns:1fr; gap:.2rem; }
}

/* ---------- SUBMIT (deep-purple band, matching the hero) ---------- */
section.vn-submit-section { background:#2d1f4e; padding:5rem 0; }
.vn-submit-lede {
  font-size:1rem; color:rgba(255,255,255,.8); max-width:640px;
  line-height:1.75; margin-bottom:2.5rem;
}
.vn-submit-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-bottom:2.5rem; }
.vn-submit-block {
  background:rgba(192,132,252,.08); border:1px solid rgba(192,132,252,.2);
  padding:1.5rem 1.5rem;
}
.vn-submit-block h3 {
  font-family:var(--serif); font-size:1rem; font-weight:700;
  color:#fff; margin-bottom:.6rem;
}
.vn-submit-block p { font-size:.87rem; color:rgba(255,255,255,.75); line-height:1.7; }
.vn-submit-cta { display:flex; gap:1rem; flex-wrap:wrap; }

/* The band stays dark in light mode, so re-assert the bright accent the way
   /styles.css does for the other dark bands. */
@media (prefers-color-scheme: light) {
  section.vn-submit-section { --coral:#c084fc; --coral-dim:#a855f7; }
}

@media (max-width:700px) {
  .vn-submit-grid { grid-template-columns:1fr; }
}

/* Sits above the results grid: says where an entry came from before a
   visitor works it out from a thin card. */
.vn-source-note {
  font-size:.84rem; color:var(--muted); line-height:1.7;
  max-width:760px; margin:0 0 2rem; padding-left:1rem;
  border-left:2px solid var(--line);
}

/* ---------- MULTI-SELECT (town) ---------- */
.vn-field-label {
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral); font-weight:500;
}
.vn-multi { position:relative; min-width:0; }
.vn-multi-toggle {
  width:100%; text-align:left; background:var(--bg2); color:var(--cream);
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--sans); font-size:.9rem; font-weight:300;
  padding:.7rem 2.4rem .7rem .85rem; cursor:pointer; transition:border-color .2s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vn-multi-toggle::after {
  content:''; position:absolute; right:.9rem; top:50%; width:6px; height:6px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.vn-multi-toggle:hover { border-color:var(--coral); }
.vn-multi-toggle.has-selection { border-color:var(--coral); color:var(--coral); }

.vn-multi-panel {
  position:absolute; z-index:60; top:calc(100% + .35rem); left:0;
  width:min(19rem,80vw); background:var(--bg2);
  border:1px solid var(--coral); border-radius:2px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.vn-multi-head { display:flex; gap:.5rem; padding:.6rem; border-bottom:1px solid var(--line); }
.vn-multi-head input {
  flex:1; min-width:0; background:var(--bg); color:var(--cream);
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--sans); font-size:.85rem; font-weight:300; padding:.45rem .6rem;
}
.vn-multi-clear {
  background:none; border:none; cursor:pointer; padding:0 .3rem;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--coral);
}
.vn-multi-clear:hover { text-decoration:underline; }

.vn-multi-list { max-height:16rem; overflow-y:auto; padding:.35rem; }
.vn-multi-opt {
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem .6rem; cursor:pointer; font-size:.87rem; color:var(--cream);
  border-radius:2px;
}
.vn-multi-opt:hover { background:color-mix(in srgb, var(--bg2) 85%, var(--coral)); }
.vn-multi-opt input { accent-color:var(--coral); width:1rem; height:1rem; flex-shrink:0; }
.vn-multi-opt[hidden] { display:none; }

@media (max-width:600px) {
  .vn-multi-panel { width:min(19rem,92vw); }
}

/* ---------- GROUPED MULTI-SELECT ---------- */
.vn-multi-panel-wide { width:min(24rem,88vw); }
.vn-multi-group { border-bottom:1px solid var(--line); padding-bottom:.25rem; margin-bottom:.25rem; }
.vn-multi-group:last-child { border-bottom:none; }
.vn-multi-group[hidden] { display:none; }
.vn-multi-opt em { margin-left:auto; font-style:normal; font-size:.74rem; color:var(--muted); }
.vn-multi-grouphead { font-weight:500; color:var(--cream); }
.vn-multi-grouphead span { font-size:.88rem; }
.vn-multi-child { padding-left:1.9rem; }
.vn-multi-child span { font-size:.83rem; color:var(--muted); }

/* ---------- QUICK TOGGLES ---------- */
.vn-toggles { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:1.5rem; }
.vn-toggles-label {
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral); margin-right:.25rem;
}
.vn-toggle { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; }
.vn-toggle input { position:absolute; opacity:0; width:0; height:0; }
.vn-toggle span {
  display:inline-block; border:1px solid var(--line); border-radius:999px;
  padding:.4rem .85rem; font-size:.78rem; color:var(--muted);
  background:var(--bg2); transition:all .15s; white-space:nowrap;
}
.vn-toggle:hover span { border-color:var(--coral); color:var(--cream); }
.vn-toggle input:checked + span { background:var(--coral); border-color:var(--coral); color:#241038; }
.vn-toggle input:focus-visible + span { outline:3px solid var(--coral); outline-offset:2px; }
@media (prefers-color-scheme: light) { .vn-toggle input:checked + span { color:#fff; } }

/* ---------- CARD CHIPS ---------- */
.vn-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.85rem; }
.vn-badge-chip {
  font-size:.68rem; letter-spacing:.04em; padding:.22rem .55rem;
  border:1px solid var(--line); border-radius:999px; color:var(--muted);
}
.vn-badge-chip.is-open { border-color:var(--coral); color:var(--coral); }
.vn-toggle[hidden] { display:none; }
.vn-toggles[hidden] { display:none; }

/* ---------- SHOW MORE ---------- */
.vn-more-wrap { display:flex; justify-content:center; margin-top:2.5rem; }
.vn-more-wrap button[hidden] { display:none; }

/* ---------- EMPTY-STATE CONTRIBUTION ---------- */
.vn-empty-cta { margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.vn-empty-cta[hidden] { display:none; }
.vn-empty-ask {
  font-size:.9rem; color:var(--cream); line-height:1.75;
  max-width:460px; margin:0 auto 1.25rem;
}