/* Surplus Scout Boston — community submissions (distinct from auction/free feeds) */
.ss-post, .ss-list, .ss-contact-modal {
  --n:#0F2A44; --n2:#16395c; --o:#F26B1D; --od:#d85a10; --m:#52606d; --l:#e3e6ea;
  --cream:#F4F5F2; --ok:#0b5e39; --err:#8a1c12;
  font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#1F2933; box-sizing:border-box;
}
.ss-post *, .ss-list *, .ss-contact-modal * { box-sizing:border-box; }
.ss-post { background:#fff; border:1px solid var(--l); border-radius:16px;
  box-shadow:0 1px 2px rgba(15,42,68,.05),0 8px 24px rgba(15,42,68,.06); padding:20px 22px 24px; max-width:640px; }
.ss-post .ss-kicker { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 8px; }
.ss-post .ss-chip-community {
  display:inline-block; background:var(--n); color:#fff; border-radius:999px;
  padding:3px 10px; font-size:11px; font-weight:800; letter-spacing:.07em;
}
.ss-post h2 { margin:0 0 6px; font-size:22px; color:var(--n); letter-spacing:-.02em; font-weight:800; }
.ss-post .ss-lede { margin:0 0 16px; color:var(--m); font-size:14px; }
.ss-post .ss-rules {
  background:var(--cream); border:1px solid var(--l); border-radius:12px; padding:12px 14px; margin:0 0 16px; font-size:13px; color:#334;
}
.ss-post .ss-rules strong { color:var(--n); }
.ss-post .ss-rules ul { margin:6px 0 0; padding-left:1.2em; }
.ss-post .ss-rules li { margin:2px 0; }
.ss-post label { display:block; font-weight:700; font-size:13px; color:var(--n); margin:0 0 6px; }
.ss-post .ss-field { margin:0 0 14px; }
.ss-post .ss-hint { font-size:12px; color:var(--m); font-weight:500; margin-top:4px; }
.ss-post input[type=text], .ss-post input[type=email], .ss-post input[type=number],
.ss-post textarea, .ss-post select {
  width:100%; height:44px; border:1.5px solid var(--l); border-radius:10px; padding:0 12px;
  font:500 15px Inter,system-ui,sans-serif; background:#fff; color:#1F2933;
}
.ss-post textarea { height:auto; min-height:96px; padding:10px 12px; resize:vertical; }
.ss-post input:focus, .ss-post textarea:focus, .ss-post select:focus {
  outline:none; border-color:var(--o); box-shadow:0 0 0 3px rgba(242,107,29,.18);
}
.ss-post .ss-toggle { display:inline-flex; background:rgba(15,42,68,.08); border-radius:999px; padding:3px; gap:2px; }
.ss-post .ss-toggle button {
  appearance:none; border:0; background:transparent; color:var(--n); border-radius:999px;
  padding:8px 16px; font:700 13px/1 Inter,system-ui,sans-serif; cursor:pointer;
}
.ss-post .ss-toggle button[aria-pressed=true] { background:var(--o); color:#fff; }
.ss-post .ss-photos { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.ss-post .ss-photo-slot {
  width:96px; height:96px; border:1.5px dashed var(--l); border-radius:12px; overflow:hidden;
  position:relative; background:var(--cream); display:flex; align-items:center; justify-content:center;
}
.ss-post .ss-photo-slot img { width:100%; height:100%; object-fit:cover; }
.ss-post .ss-photo-slot .ss-rm {
  position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; border:0;
  background:rgba(15,42,68,.85); color:#fff; font-size:14px; cursor:pointer; line-height:1;
}
.ss-post .ss-add-photo {
  width:96px; height:96px; border:1.5px dashed var(--n2); border-radius:12px; background:#fff;
  color:var(--n); font:700 12px/1.2 Inter,system-ui,sans-serif; cursor:pointer; padding:8px;
}
.ss-post .ss-add-photo:hover { border-color:var(--o); color:var(--o); }
.ss-post .ss-agree { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#334; }
.ss-post .ss-agree input { margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--o); }
.ss-post .ss-hp { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.ss-post .ss-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:8px; }
.ss-post .ss-btn, .ss-list .ss-btn, .ss-contact-modal .ss-btn {
  appearance:none; border:0; border-radius:999px; height:44px; padding:0 20px;
  font:700 14px/1 Inter,system-ui,sans-serif; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.ss-post .ss-btn-primary, .ss-list .ss-btn-primary, .ss-contact-modal .ss-btn-primary { background:var(--o); color:#fff; }
.ss-post .ss-btn-primary:hover, .ss-list .ss-btn-primary:hover { background:var(--od); }
.ss-post .ss-btn-primary:disabled { opacity:.55; cursor:not-allowed; }
.ss-post .ss-btn-ghost { background:#fff; color:var(--n); border:1.5px solid var(--l); }
.ss-post .ss-status { margin:12px 0 0; padding:12px 14px; border-radius:12px; font-size:14px; display:none; }
.ss-post .ss-status[data-show] { display:block; }
.ss-post .ss-status.ok { background:#e7f5ee; color:var(--ok); border:1px solid #b7e0c8; }
.ss-post .ss-status.err { background:#fdecea; color:var(--err); border:1px solid #f6c3bd; }
.ss-post .ss-foot { margin:14px 0 0; font-size:12px; color:var(--m); }
.ss-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Listing — clearly distinct COMMUNITY POST cards */
.ss-list { max-width:1120px; }
.ss-list .ss-list-h { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.ss-list .ss-list-h h2 { margin:0; font-size:22px; color:var(--n); font-weight:800; }
.ss-list .ss-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.ss-card {
  background:#fff; border:1px solid var(--l); border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(15,42,68,.05); display:flex; flex-direction:column;
  border-top:3px solid var(--n);
}
.ss-card .ss-card-img { aspect-ratio:4/3; background:var(--cream); overflow:hidden; }
.ss-card .ss-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.ss-card .ss-card-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.ss-card .ss-card-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ss-card .ss-chip {
  display:inline-block; border-radius:999px; padding:2px 9px; font-size:11px; font-weight:800; letter-spacing:.04em;
}
.ss-card .ss-chip-community { background:var(--n); color:#fff; }
.ss-card .ss-chip-sale { background:#fff3ec; color:#a34409; }
.ss-card .ss-chip-free { background:#e7f5ee; color:#0b5e39; }
.ss-card h3 { margin:0; font-size:16px; color:var(--n); font-weight:800; line-height:1.25; }
.ss-card .ss-meta { font-size:13px; color:var(--m); }
.ss-card .ss-desc { font-size:13px; color:#334; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ss-card .ss-card-act { margin-top:auto; padding-top:4px; }
.ss-list .ss-empty { color:var(--m); padding:18px; background:var(--cream); border-radius:12px; }

/* Contact modal */
.ss-contact-modal[hidden] { display:none !important; }
.ss-contact-modal {
  position:fixed; inset:0; z-index:200; background:rgba(15,42,68,.45);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.ss-contact-modal .ss-modal-box {
  background:#fff; border-radius:16px; max-width:420px; width:100%; padding:20px; box-shadow:0 16px 48px rgba(15,42,68,.25);
}
.ss-contact-modal h3 { margin:0 0 6px; color:var(--n); font-size:18px; }
.ss-contact-modal .ss-note { font-size:13px; color:var(--m); margin:0 0 12px; }
.ss-contact-modal label { display:block; font-weight:700; font-size:13px; color:var(--n); margin:0 0 6px; }
.ss-contact-modal input, .ss-contact-modal textarea {
  width:100%; border:1.5px solid var(--l); border-radius:10px; padding:10px 12px; font:500 15px Inter,system-ui,sans-serif; margin-bottom:12px;
}
.ss-contact-modal .ss-modal-acts { display:flex; gap:8px; justify-content:flex-end; }
.ss-contact-modal .ss-status { display:none; margin:0 0 10px; padding:10px; border-radius:10px; font-size:13px; }
.ss-contact-modal .ss-status[data-show] { display:block; }
.ss-contact-modal .ss-status.ok { background:#e7f5ee; color:var(--ok); }
.ss-contact-modal .ss-status.err { background:#fdecea; color:var(--err); }

@media (max-width:400px) {
  .ss-post { padding:16px 14px 20px; border-radius:12px; }
  .ss-post h2 { font-size:20px; }
  .ss-post .ss-photo-slot, .ss-post .ss-add-photo { width:84px; height:84px; }
}