/* Community Network Board — table.center/board
   Standalone stylesheet. This page deliberately keeps its cork-board skin
   instead of the site's dark/glass theme: the bulletin-board metaphor is the
   page. Fonts and palette are the shared brand. */

/* ---- brand fonts (woff2; the rest of the site loads the .otf set) ---- */
@font-face { font-family: "Bebas Neue Pro"; src: url("/fonts/bebasneuepro-book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bebas Neue Pro"; src: url("/fonts/bebasneuepro-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Equity"; src: url("/fonts/equity-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Equity"; src: url("/fonts/equity-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Equity"; src: url("/fonts/equity-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Equity"; src: url("/fonts/equity-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --green: #ACE3C9;
  --green-deep: #2f7d5b;
  --purple: #5F65BE;
  --purple-dark: #4A4F95;
  --charcoal: #484954;
  --soft-gray: #E0E2EC;
  --ink: #2C2D38;
  --muted: #6c6d78;
  --paper: #FFFDF8;
  --cream: #FAF6EE;
  --cork: #c79a5b;
  --line: rgba(72, 73, 84, 0.16);
  --shadow: 0 8px 18px rgba(50, 40, 20, 0.30);
  --font-head: "Bebas Neue Pro", "Bebas Neue", Impact, sans-serif;
  --font-body: "Equity", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  /* Card tilt multiplier. 1 = tilted, 0 = flat. Set on <main>, so it wins
     over nothing and loses to nothing — the per-card --rot stays inline. */
  --tilt: 1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--cork);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.10) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,0.08) 0 1.5px, transparent 3px),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.08) 0 1.5px, transparent 3px);
  background-size: 90px 90px, 120px 120px, 70px 70px, 100px 100px;
}

:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

/* ---- site link back to table.center ---- */
.site-nav {
  max-width: 1500px; margin: 0 auto; padding: 14px 18px 0;
  display: flex; justify-content: flex-start;
}
.home-link {
  font-family: var(--font-head); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #3a2c15; text-decoration: none; border-bottom: 1px dotted rgba(58,44,21,0.6); padding-bottom: 1px;
}
.home-link:hover { color: #1f170a; border-bottom-color: #1f170a; }

/* ---- header / logo banner ---- */
header.board-head { padding: 14px 16px 6px; display: flex; justify-content: center; }
.banner {
  position: relative;
  background: var(--charcoal);
  border-radius: 8px;
  padding: 22px 34px 18px;
  text-align: center;
  box-shadow: var(--shadow);
  max-width: 620px;
  width: 100%;
}
.banner::before, .banner::after {
  content: "";
  position: absolute; top: -8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b6bbf2, var(--purple) 60%, #353a82);
  box-shadow: 0 3px 4px rgba(0,0,0,0.4);
}
.banner::before { left: 26px; }
.banner::after { right: 26px; }
.banner img { width: min(360px, 80%); height: auto; display: block; margin: 0 auto 10px; }
.banner h1 {
  font-family: var(--font-head);
  font-weight: 400;
  color: var(--cream);
  margin: 0;
  font-size: clamp(28px, 6vw, 44px);
  letter-spacing: 0.06em;
  line-height: 1;
}
.banner .subhead {
  margin: 8px 0 0; color: var(--cream); font-size: 14px; font-family: var(--font-body);
  letter-spacing: 0.01em;
}

/* ---- toolbar ---- */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  padding: 16px 14px 6px;
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(var(--cork), rgba(199,154,91,0.88));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
button { font: inherit; cursor: pointer; border: none; border-radius: 8px; padding: 10px 18px; font-weight: 600; }
.btn-primary {
  background: var(--purple); color: var(--cream); box-shadow: var(--shadow);
  font-family: var(--font-head); font-weight: 400; font-size: 18px; letter-spacing: 0.05em; padding: 9px 20px;
}
.btn-primary:hover { background: var(--purple-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-ghost {
  background: rgba(255,255,255,0.92); color: var(--charcoal);
  font-family: var(--font-head); font-weight: 400; font-size: 18px; letter-spacing: 0.05em; padding: 9px 20px;
}
.btn-ghost:hover { background: #fff; }
.btn-danger { background: #a33a44; color: var(--cream); }
.btn-accent {
  background: var(--charcoal); color: var(--cream);
  font-family: var(--font-head); font-weight: 400; font-size: 18px; letter-spacing: 0.05em; padding: 9px 20px;
  box-shadow: var(--shadow);
}
.btn-accent:hover { background: #3a3b45; }
.btn-link { background: none; color: #4a3a1f; text-decoration: underline; padding: 6px; font-weight: 600; font-size: 13px; }
.btn-small { padding: 6px 10px; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green); color: var(--charcoal); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
}

/* ---- category filters ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 2px 14px 12px; }
.chip {
  font-family: var(--font-head); font-weight: 400; font-size: 16px; letter-spacing: 0.04em;
  cursor: pointer; border: none; border-radius: 999px; padding: 6px 14px;
  background: rgba(255,255,255,0.9); color: var(--charcoal);
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 5px rgba(50,40,20,0.18);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.chip:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 5px 12px rgba(50,40,20,0.26); }
.chip.active { background: var(--charcoal); color: var(--cream); box-shadow: 0 5px 12px rgba(50,40,20,0.32); }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chip .cnt { font-family: var(--font-body); font-size: 12px; opacity: 0.65; }
.chip-seeking { background: var(--purple); color: var(--cream); }
.chip-seeking .cnt { opacity: 0.8; }
.chip-seeking:hover { background: var(--purple-dark); }
.chip-seeking.active { background: var(--purple-dark); color: var(--cream); box-shadow: 0 0 0 2px rgba(255,255,255,0.65), 0 5px 12px rgba(50,40,20,0.32); }

/* ---- board grid ----
   Flex columns filled by board.js (shortest column gets the next note), not
   CSS multi-column. Multicol fragments the flow: Chromium drew the pin head
   of each column's first card at the bottom of the previous column, and
   Safari left uneven gaps at the top. Plain block columns have neither
   problem. board.js keeps COL_MIN / COL_GAP in sync with these values. */
main {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  padding: 12px 18px 60px; max-width: 1500px; margin: 0 auto;
}
.col { flex: 1 1 0; min-width: 0; }
.status { color: var(--cream); text-align: center; flex: 1 1 100%; }
.empty {
  text-align: center; color: var(--cream); opacity: 0.92; flex: 1 1 100%;
  font-family: var(--font-head); font-size: 22px; letter-spacing: 0.05em; padding: 36px 10px;
}

/* Two elements per pinned note, on purpose:
   .pin  — the column item. Owns the entrance animation and the hover hit
           area. It never moves, so hovering can't toggle itself off.
   .card — the note. Owns the resting tilt and the hover lift.
   Keeping the keyframe animation and the transitioned transform on
   different elements (and keeping var() out of @keyframes) is what stops
   Safari from restarting the entrance animation on hover — the "blink". */
.pin {
  position: relative;
  margin: 0 0 22px;
  animation: cardIn 0.5s cubic-bezier(0.2, 0.85, 0.3, 1.15) both;
  animation-delay: var(--delay, 0s);
}
/* Re-layouts that aren't the user's doing (resize, unlock, save) skip the
   entrance so the board doesn't replay it. */
#board[data-anim="off"] .pin { animation: none; }
.pin:hover { z-index: 6; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(-18px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.card {
  background: var(--paper); border-radius: 4px;
  padding: 22px 18px 18px;
  box-shadow: var(--shadow);
  position: relative; border: 1px solid rgba(72,73,84,0.08);
  transform: rotate(calc(var(--rot, 0deg) * var(--tilt, 1)));
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  will-change: transform;
}
.pin:hover .card {
  transform: translateY(-5px) scale(1.025);
  box-shadow: 0 14px 28px rgba(50,40,20,0.34);
}
.card::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b6bbf2, var(--purple) 60%, #353a82);
  box-shadow: 0 3px 4px rgba(0,0,0,0.35);
}
.pin:hover .card::before { animation: pinTap 0.35s ease; }
@keyframes pinTap {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.3) rotate(8deg); }
}
.readme { background: var(--soft-gray); border: 1px solid #c3c6d6; }
.readme::before { background: radial-gradient(circle at 35% 30%, #c8f0dd, var(--green) 55%, #2f7d5b); }

.tag {
  display: inline-block; font-family: var(--font-head); font-weight: 400;
  font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px; margin-bottom: 10px; color: var(--charcoal);
}
.card h2 {
  font-family: var(--font-head); font-weight: 400; margin: 2px 0 8px;
  font-size: 23px; line-height: 1.02; letter-spacing: 0.02em; color: var(--charcoal);
}
.card .about { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: #3b3c46; white-space: pre-line; }
.card .website { font-size: 13px; margin: -6px 0 12px; overflow-wrap: anywhere; }
.card .website a { color: var(--purple-dark); }

.star { position: absolute; top: 10px; right: 10px; font-size: 27px; color: var(--purple); filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.seeking-label { display: inline-block; font-size: 11px; font-weight: 700; color: var(--purple-dark); margin-bottom: 8px; letter-spacing: 0.02em; }

.contacts { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 6px; }
.contacts .label { font-family: var(--font-head); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.contact { font-size: 13.5px; margin-bottom: 6px; line-height: 1.4; overflow-wrap: anywhere; }
.contact .cname { font-weight: 600; }
.contact a { color: var(--purple-dark); text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.locked { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-style: italic; }

/* ---- modal ---- */
.overlay { position: fixed; inset: 0; background: rgba(40,30,15,0.55); display: none; align-items: flex-start; justify-content: center; padding: 24px 14px; z-index: 100; overflow-y: auto; }
.overlay.open { display: flex; }
.modal { background: #fff; border-radius: 12px; padding: 24px; width: 100%; max-width: 520px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); margin-top: 4vh; }
.modal h3 { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.03em; margin: 0 0 4px; font-size: 26px; color: var(--charcoal); }
.modal p.hint { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--charcoal); }
input[type=text], input[type=password], input[type=email], input[type=url], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #ccc; border-radius: 8px; font: inherit; background: #fff; font-family: var(--font-body);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--purple); border-color: var(--purple); }
textarea { min-height: 90px; resize: vertical; }
.checkrow { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.checkrow input { width: auto; }
.checkrow label { margin: 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.modal-actions .spacer { flex: 1; }
.msg { margin-top: 12px; font-size: 13.5px; padding: 9px 11px; border-radius: 8px; display: none; }
.msg.error { display: block; background: #fbe4e6; color: #8f2733; }
.msg.ok { display: block; background: #e2f3ea; color: var(--green-deep); }
.field-hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

.contact-editor .row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; margin-bottom: 6px; }
.contact-editor input { font-size: 13px; padding: 7px 8px; }
.contact-editor .rm { background: #eee; border-radius: 6px; padding: 0 10px; }

.admin-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid #eee; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.admin-item.pending { border-color: #c9b8e6; background: #f5f1fb; }
.admin-item .meta { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.admin-item .meta small { color: var(--muted); }
.admin-item .actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-list { max-height: 42vh; overflow: auto; }
.admin-list.pending-list { max-height: 30vh; margin-bottom: 14px; }
.admin-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid #eee; font-size: 13px; color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

footer { text-align: center; padding: 10px 16px 40px; color: #4a3a1f; font-size: 12px; }
footer a { color: #4a3a1f; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  main { padding: 10px 14px 50px; --tilt: 0; }
  .contact-editor .row { grid-template-columns: 1fr; }
  .banner { padding: 18px 20px 16px; }
  .admin-item { flex-direction: column; align-items: flex-start; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .pin { animation: none; }
  .card, .chip { transition: none; }
  .pin:hover .card { transform: rotate(calc(var(--rot, 0deg) * var(--tilt, 1))); }
  .pin:hover .card::before { animation: none; }
  .chip:hover { transform: none; }
}