/* The Board — /board only (loaded after place.css; see fc_board_head_assets in board.php).
   Cork in a wood frame, a green-paint band for the controls, paper slips. No pins, no tape.
   Three columns from 360px, two below. A text slip takes one column; a slip with a picture takes two (the whole row at 320).
   With scripts off, `grid-auto-flow: dense` lets a text slip fill the hole a two-wide slip could not; with scripts on, board.js
   places every slip itself so none moves more than one spot. */

.fc-bd { --bd-gap:8px; }

/* ---- the face: wood frame, cork ---- */
.fc-bd-board {
  position:relative; box-sizing:border-box; padding:12px 10px 12px;
  background:#9b794e url('fc-material-cork-v1-512.webp') 0 0/512px auto;
  border:8px solid #785433; border-image:url('fc-material-wood-v1.webp') 30 stretch;
  box-shadow:inset 0 2px 9px #24170680;
}
.fc-bd-grid {
  list-style:none; margin:0; padding:0; display:grid; gap:var(--bd-gap);
  --bd-pic-span:2; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row dense; align-items:stretch;
}
@media (min-width:360px) { .fc-bd-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:480px) { .fc-bd-board { padding:16px 14px 16px; } .fc-bd-grid { --bd-gap:10px; } }
/* Two-wide picture slips are a PHONE thing (Dave, 10-18). From 600px the board is small slips, many at a time, every slip one column. */
@media (min-width:600px) {
  .fc-bd-grid { --bd-pic-span:1; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .fc-bd-item--pic { grid-column:span 1; }
}
.fc-bd-grid[hidden], .fc-bd-item[hidden] { display:none; }
.fc-bd-item { min-width:0; display:flex; align-self:start; }
.fc-bd-item--pic { grid-column:span 2; }

/* ---- a slip ---- */
.fc-bd-slip {
  --slip:#ede7cb;
  position:relative; display:flex; flex-direction:column; width:100%; min-width:0; box-sizing:border-box; min-height:92px;
  background:var(--slip) url('fc-material-paper-v1.webp') 0 0/256px auto; background-blend-mode:multiply;
  border-top:3px solid #263c30; color:#23382e; text-decoration:none;
  box-shadow:1px 3px 0 #1b272740, 0 4px 6px #24170640;
  padding:7px 8px 8px; gap:3px; overflow:hidden; overflow-wrap:anywhere;
  -webkit-tap-highlight-color:transparent;
}
.fc-bd-slip:hover { box-shadow:2px 5px 0 #1b272755, 0 6px 9px #24170655; }
.fc-bd-slip:focus-visible { outline:3px solid #f5e7c9; outline-offset:2px; box-shadow:0 0 0 6px #173e57; }
.fc-bd-item[data-intent="ask"] .fc-bd-slip { --slip:#e8e98a; border-top-color:#6b6a1e; }
.fc-bd-item[data-intent="offer"] .fc-bd-slip { --slip:#c6dde0; border-top-color:#173e57; }
.fc-bd-item[data-intent="invite"] .fc-bd-slip { --slip:#f3c8b0; border-top-color:#b14a1c; }
.fc-bd-item[data-intent="share"] .fc-bd-slip { --slip:#ede7cb; border-top-color:#263c30; }
.fc-bd-kind {
  display:block; font:400 11px/1.25 var(--type); letter-spacing:.02em; text-transform:uppercase; color:#3d4a43;
  overflow-wrap:anywhere;
}
.fc-bd-title {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; text-overflow:ellipsis;
  font:700 16px/1.12 var(--cond); letter-spacing:.01em; text-transform:uppercase; overflow-wrap:anywhere; hyphens:auto;
  min-height:0;
}
.fc-bd-town { display:block; margin-top:auto; padding-top:3px; font:400 12px/1.25 var(--sans); color:#3d4a43; overflow-wrap:anywhere; }
.fc-bd-pic {
  display:block; width:calc(100% + 16px); max-width:none; margin:-7px -8px 4px; aspect-ratio:16/10; object-fit:cover; background:#d7d2bd;
  border-bottom:1px solid #263c3055;
}
@media (min-width:600px) { .fc-bd-pic { aspect-ratio:4/3; } }
/* a small tilt, a different one per slip, but only where it cannot touch the layout (visual only) */
.fc-bd-v1 .fc-bd-slip { transform:rotate(-.4deg); }
.fc-bd-v2 .fc-bd-slip { transform:rotate(.35deg); }
.fc-bd-v3 .fc-bd-slip { transform:rotate(-.15deg); }

/* ---- controls: the green-paint band ---- */
.fc-bd-links { display:flex; flex-wrap:wrap; gap:2px 4px; margin:0 0 10px; }
.fc-bd-links[hidden], .fc-bd-controls[hidden] { display:none; }
.fc-bd-controls {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px; padding:10px 10px 11px;
  background:#223b30 url('fc-material-green-paint-v1.webp') 0 0/cover; color:#eee1bc; border:1px solid #a99055;
  box-shadow:0 3px 8px #100e0b55;
}
.fc-bd-c { display:block; min-width:0; font:400 11px/1.2 var(--sans); letter-spacing:.04em; text-transform:uppercase; }
.fc-bd-c--show { grid-column:1 / -1; }
.fc-bd-c > span { display:block; margin:0 0 3px; }
.fc-bd-c select {
  display:block; box-sizing:border-box; width:100%; min-height:44px; padding:0 30px 0 10px; border:1px solid #c9b57c; border-radius:0;
  background:#f2ecd9; color:#202b2a; font:500 15px/1.2 var(--sans); text-transform:none; letter-spacing:0;
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#202b2a 50%),linear-gradient(135deg,#202b2a 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.fc-bd-c select:focus-visible { outline:3px solid #e8e98a; outline-offset:2px; }
@media (min-width:560px) {
  .fc-bd-controls { grid-template-columns:1.4fr 1fr 1fr; }
  .fc-bd-c--show { grid-column:auto; }
}

/* nothing matches */
.fc-bd-empty { margin:0; padding:22px 14px; text-align:center; background:#f2ecd9; border:1px solid var(--rule); font:400 15px/1.5 var(--sans); }
.fc-bd-empty[hidden] { display:none; }
.fc-bd-empty button {
  display:inline-flex; align-items:center; min-height:44px; margin-left:6px; padding:0 14px; border:1px solid #22322a; border-radius:0;
  background:var(--yellow); color:#22322a; font:500 14px/1.3 var(--sans); cursor:pointer;
}
.fc-bd-status { font:400 12px/1.4 var(--type); }

/* ---- the reader: the corner's pullout, as a dialog ---- */
.fc-bd-reader {
  --bd-vh:100vh; --bd-vw:100vw;
  box-sizing:border-box; width:min(560px, calc(var(--bd-vw) - 16px)); max-height:calc(var(--bd-vh) - 16px);
  margin:auto; padding:0; border:1px solid #a99055; background:#223b30 url('fc-material-green-paint-v1.webp') 0 0/cover;
  color:#eee1bc; box-shadow:0 12px 35px #100e0ba6; overflow:auto; overscroll-behavior:contain;
}
.fc-bd-reader:not([open]) { display:none; }
.fc-bd-reader::backdrop { background:#0d1511b8; }
.fc-bd-r-bar { position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:2px; padding:4px 6px; background:#223b30; border-bottom:1px solid #b59a5b; }
.fc-bd-r-bar button {
  min-height:44px; min-width:44px; padding:6px 10px; border:0; border-radius:0; background:transparent; color:#eee1bc;
  font:500 14px/1.2 var(--sans); white-space:nowrap; cursor:pointer;
}
.fc-bd-r-bar button:disabled { opacity:.4; cursor:default; }
.fc-bd-r-bar button:focus-visible { outline:3px solid #e8e98a; outline-offset:-3px; }
.fc-bd-r-count { flex:1; min-width:36px; text-align:center; font:400 12px/1.2 var(--sans); }
.fc-bd-r-close { margin-left:2px; border-left:1px solid #b59a5b6b !important; }
.fc-bd-r-paper {
  margin:12px; background:var(--rp,#ede7cb) url('fc-material-paper-v1.webp') 0 0/256px auto; background-blend-mode:multiply;
  color:#23382e; border-top:3px solid #263c30; box-shadow:2px 4px 0 #0d151166; padding:0 0 16px;
}
.fc-bd-reader[data-intent="ask"] .fc-bd-r-paper { --rp:#e8e98a; }
.fc-bd-reader[data-intent="offer"] .fc-bd-r-paper { --rp:#c6dde0; }
.fc-bd-reader[data-intent="invite"] .fc-bd-r-paper { --rp:#f3c8b0; }
.fc-bd-r-head { padding:14px 16px 10px; border-bottom:2px solid #23382e; }
.fc-bd-r-kind { margin:0 0 6px; font:400 12px/1.3 var(--type); letter-spacing:.03em; text-transform:uppercase; overflow-wrap:anywhere; }
.fc-bd-r-head h2 { margin:0; font:800 28px/.98 var(--cond); text-transform:uppercase; letter-spacing:.005em; overflow-wrap:anywhere; }
.fc-bd-r-body { padding:12px 16px 0; font:400 17px/1.5 var(--sans); }
.fc-bd-r-body p { margin:0 0 10px; overflow-wrap:anywhere; }
.fc-bd-r-pic { display:block; width:100%; max-height:46vh; object-fit:cover; margin:0 0 12px; background:#d7d2bd; border:1px solid #23382e44; }
.fc-bd-r-when { font:700 15px/1.3 var(--sans); }
.fc-bd-r-where { font:400 13px/1.4 var(--type); }
.fc-bd-r-by { font:400 13px/1.4 var(--sans); color:#3d4a43; }
.fc-bd-r-go a {
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px; background:var(--green); color:#f5e7c9;
  font:500 15px/1.3 var(--sans); text-decoration:none;
}
.fc-bd-r-go a:focus-visible { outline:3px solid #173e57; outline-offset:2px; }
@media (max-width:359px) { .fc-bd-r-head h2 { font-size:24px; } .fc-bd-r-body { font-size:16px; } .fc-bd-r-bar button { padding:6px 6px; font-size:13px; } }

@media (prefers-reduced-motion: reduce) { .fc-bd-slip { transition:none; } }
@media (forced-colors: active) {
  .fc-bd-slip, .fc-bd-r-paper, .fc-bd-c select, .fc-bd-reader { border:2px solid CanvasText; background:Canvas; color:CanvasText; }
  .fc-bd-slip:focus-visible { outline:3px solid Highlight; }
}