/* The Yard signs page (signs.html, js/signs.js): sign spotter. Flip cards (the sign, then who it's for),
   the spotted counter, members' photos and the "Add a sign you've spotted" box. */
body.signs-page { background: #f7f6ff; }
.signs-main { --ink: #1e1a67; --quiet: #4e4a7a; --label: #7d78ab; --lav: #f1effe; --line: #efedfb; --spring: cubic-bezier(.34, 1.56, .64, 1);
  width: min(100% - 32px, 1200px); margin: 22px auto 56px; color: var(--ink); }
.sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.sp-head .page-heading { margin: 0; font-size: clamp(30px, 3.6vw, 44px); }
.sp-sub { margin: 0; color: var(--quiet); font-size: 15px; }
.sp-addsign { margin-left: auto; padding: 11px 18px; border: 0; border-radius: 14px; background: #21167c; color: #fff; font: 800 15px var(--font-read, system-ui, sans-serif); cursor: pointer; transition: transform .25s var(--spring); }
.sp-addsign:hover { transform: translateY(-2px); }
.sp-addsign[hidden] { display: none; }

/* spotted, and the filters */
.sp-meter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px; max-width: 560px; margin: 16px 0 6px; padding: 12px 18px; border-radius: 22px; background: #fff;
  box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10); }
.sp-meter > span { grid-row: span 2; font-size: 28px; }
.sp-meter p { margin: 0; font-weight: 800; }
.sp-track { height: 10px; border-radius: 999px; background: var(--lav); overflow: hidden; }
.sp-track i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #967dfc, #f0b4f1); transition: width .6s var(--spring); }
.sp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 12px; }
.sp-filters .seg { display: flex; }
.sp-search { flex: 1 1 220px; max-width: 360px; }
.sp-search input { width: 100%; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #e9e5fd; color: var(--ink); font: 700 14px var(--font-read, system-ui, sans-serif); }

/* the flip cards */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.sp-card { perspective: 1200px; min-height: 380px; animation: sp-pop .5s var(--spring) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes sp-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.sp-in { position: relative; height: 100%; min-height: inherit; transition: transform .7s var(--spring); transform-style: preserve-3d; }
.sp-card.is-flipped .sp-in { transform: rotateY(180deg); }
.sp-front, .sp-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 24px; background: #fff; box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10); }
.sp-card.is-flipped .sp-front, .sp-card:not(.is-flipped) .sp-back { visibility: hidden; transition: visibility 0s .35s; }
.sp-front { display: grid; align-content: center; justify-items: center; gap: 14px; padding: 16px; border: 0; color: inherit; font: inherit; cursor: pointer; transition: box-shadow .25s; }
.sp-front:hover { box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 14px 32px rgba(38, 27, 143, .16); }
.sp-img { display: block; width: 100%; height: auto; max-height: 250px; object-fit: contain; border-radius: 14px; }
.sp-ask { padding: 6px 14px; border-radius: 999px; background: var(--lav); color: #21167c; font-size: 13px; font-weight: 800; }
.sp-has { position: absolute; top: 12px; right: 12px; padding: 3px 9px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(38, 27, 143, .15); font-size: 12px; font-weight: 800; }
.sp-card.is-seen .sp-front::before { content: "✓ Spotted"; position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 999px; background: #21167c; color: #fff; font-size: 12px; font-weight: 800; }
.sp-back { display: flex; flex-direction: column; gap: 12px; padding: 18px; transform: rotateY(180deg); overflow: auto; outline: none; }
.sp-who { display: flex; align-items: center; gap: 12px; }
.sp-who > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sp-who b { font-size: 17px; font-weight: 800; } .sp-who span { color: var(--quiet); font-size: 13.5px; }
.sp-party { justify-self: start; margin-top: 3px; padding: 2px 10px; border-radius: 999px; background: var(--party-other); color: #fff; font-size: 12px; font-style: normal; font-weight: 800; }
.sp-party[data-party="democrat"] { background: var(--party-democrat); } .sp-party[data-party="republican"] { background: var(--party-republican); }
.sp-face { display: inline-grid; place-items: center; flex: none; width: var(--d); height: var(--d); border-radius: 50%; background: #fff center / cover no-repeat;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--p, var(--party-other)); color: #8d86c2; font: 800 calc(var(--d) * .3) var(--font-read, system-ui, sans-serif); text-decoration: none; transition: transform .3s var(--spring); }
a.sp-face:hover { transform: scale(1.06); }
.sp-face[data-party="democrat"] { --p: var(--party-democrat); } .sp-face[data-party="republican"] { --p: var(--party-republican); }
.sp-also { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--label); font-size: 13px; font-weight: 700; }
.sp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-radius: 14px; background: var(--lav); }
.sp-pick:empty { display: none; }
.sp-pick span { margin: 0 4px; color: var(--quiet); font-size: 12.5px; font-weight: 800; }
.sp-pick button { flex: 1 1 auto; padding: 7px 9px; border: 0; border-radius: 10px; background: #fff; color: #21167c; font: 800 12.5px var(--font-read, system-ui, sans-serif); cursor: pointer; transition: transform .25s var(--spring); }
.sp-pick button[aria-pressed="true"] { background: var(--party-other); color: #fff; transform: scale(1.04); }
.sp-pick button[data-party="democrat"][aria-pressed="true"] { background: var(--party-democrat); } .sp-pick button[data-party="republican"][aria-pressed="true"] { background: var(--party-republican); }
.sp-gallery { display: flex; gap: 8px; overflow-x: auto; }
.sp-thumb { flex: none; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--lav); cursor: pointer; transition: transform .25s var(--spring); }
.sp-thumb:hover { transform: scale(1.06); } .sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-credit { margin: 0; color: var(--label); font-size: 12px; } .sp-credit a { color: inherit; }
.sp-go { align-self: flex-start; padding: 8px 14px; border-radius: 12px; background: #21167c; color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; }
.sp-row { display: flex; gap: 8px; margin-top: auto; }
.sp-spot { flex: 1; padding: 9px 12px; border: 0; border-radius: 14px; background: #d3cdfb; color: #150e5e; font: 800 13px var(--font-read, system-ui, sans-serif); cursor: pointer; }
.sp-spot[aria-pressed="true"] { background: #21167c; color: #fff; }
.sp-add, .sp-flipback { padding: 9px 12px; border: 0; border-radius: 14px; background: var(--lav); color: #21167c; font: 800 14px var(--font-read, system-ui, sans-serif); cursor: pointer; }

/* a member's photo, big; and the add box */
.sp-box, .sp-add-box { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 20px; border: 0; border-radius: 26px; color: #1e1a67; box-shadow: 0 18px 50px rgba(38, 27, 143, .28); overflow: auto; }
.sp-box::backdrop, .sp-add-box::backdrop { background: rgba(21, 14, 94, .35); }
.sp-box img { display: block; width: 100%; height: auto; border-radius: 16px; }
.sp-box p { margin: 10px 0 0; font-weight: 700; }
.sp-x { position: sticky; top: 0; float: right; z-index: 1; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #d3cdfb; color: #150e5e; font-size: 22px; line-height: 1; cursor: pointer; }
.sp-add-box h2 { margin: 2px 0 14px; font-size: 21px; }
.sp-form { display: grid; gap: 14px; }
.sp-field { display: grid; gap: 8px; } .sp-field > label { font-weight: 800; }
.sp-field input[type="search"] { height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: #efedfd; font: 600 15px var(--font-read, system-ui, sans-serif); color: inherit; }
.sp-results { display: grid; gap: 4px; } .sp-results[hidden] { display: none; }
.sp-result { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sp-result:hover, .sp-result:focus-visible { background: #efedfd; } .sp-result span { color: #6b6890; font-size: 13px; }
.sp-chosen { display: flex; align-items: center; gap: 10px; } .sp-chosen:empty { display: none; }
.sp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #efedfd; }
.sp-change { border: 0; background: none; color: #4232d4; font: 800 13px var(--font-read, system-ui, sans-serif); text-decoration: underline; cursor: pointer; }
.sp-preview img { display: block; max-width: 100%; max-height: 260px; border-radius: 14px; }
.sp-turn { justify-self: start; padding: 6px 12px; border: 0; border-radius: 10px; background: #efedfd; color: #21167c; font: 800 13px var(--font-read, system-ui, sans-serif); cursor: pointer; }
.sp-turn[hidden] { display: none; }
.sp-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.4; } .sp-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.sp-note { margin: 0; color: #4e4a7a; font-size: 13px; line-height: 1.5; }
.sp-err { margin: 0; color: #b0122b; font-size: 14px; font-weight: 700; } .sp-err:empty { display: none; }
.sp-send { justify-self: start; padding: 11px 20px; border: 0; border-radius: 14px; background: #21167c; color: #fff; font: 800 15px var(--font-read, system-ui, sans-serif); cursor: pointer; }
.sp-send:disabled { opacity: .6; cursor: default; }
.sp-done { margin: 6px 0 0; font-size: 16px; font-weight: 700; line-height: 1.5; }

/* the member's own photos */
.sp-mybox { margin-top: 28px; padding: 20px 22px; border-radius: 26px; background: #fff; box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10); }
.sp-mybox[hidden] { display: none; }
.sp-mybox h2 { margin: 0 0 12px; font-size: 18px; }
.sp-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sp-mine li { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: var(--lav); }
.sp-mine img { width: 64px; height: 64px; flex: none; border-radius: 12px; object-fit: cover; }
.sp-mine div { display: grid; gap: 2px; } .sp-mine span { font-size: 13px; font-weight: 700; color: var(--quiet); } .sp-mine small { color: #b0122b; font-size: 12.5px; }
.sp-mine li.is-shown span { color: #0a7d4f; }
.signs-note { margin: 22px 0 0; color: var(--label); font-size: 13px; max-width: 760px; line-height: 1.5; }

@media (max-width: 760px) {
  .sp-addsign { margin-left: 0; width: 100%; }
  .sp-card { min-height: 400px; }
}
@media (prefers-reduced-motion: reduce) { .sp-card { animation: none; } .sp-in { transition: none; } }