/* Open board: browse, post and task pages. Builds on /site.css tokens, buttons, fields, .status and .notes. */
.board-term { width: 860px; }
.mono { font-family: var(--mono); overflow-wrap: anywhere; }
.hint { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0; }
.status.warn { color: var(--amber); }
.ethchip circle { fill: currentColor; }

.warnbox { border: 1px solid var(--amber); background: rgba(255, 120, 0, 0.08); padding: 10px; font-size: 12px;
  line-height: 1.5; color: var(--lavender); }
.warnbox b { color: var(--amber); }
.warnbox.danger { border-color: var(--red); background: rgba(236, 48, 19, 0.08); }
.warnbox.danger b { color: var(--red); }
.okbox { border: 1px solid var(--ok); background: rgba(61, 220, 132, 0.07); padding: 10px; font-size: 12px; line-height: 1.5; color: var(--lavender); }
.okbox b { color: var(--ok); }

.bd-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* tiles */
.bd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.bd-tile { padding: 10px 12px; border: 1px solid var(--slate); background: rgba(13, 10, 19, 0.6); min-width: 0; }
.bd-label { font-weight: 800; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.bd-big { font-family: var(--mono); font-size: 20px; color: var(--lavender); margin: 6px 0 4px; overflow-wrap: anywhere; }
.bd-big.na { font-size: 14px; color: var(--muted); }
.bd-sub { font-size: 11px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }

/* filters */
.bd-filters { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: flex-end; }
.bd-filters label { display: grid; gap: 3px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bd-filters .field { width: auto; min-width: 0; max-width: 100%; }
#f-min { width: 90px; }
select.field { font-family: var(--font); font-size: 12px; padding: 7px 8px; }

/* task cards */
.bd-list { display: grid; gap: 8px; min-width: 0; }
.bd-card { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--slate-lo); background: rgba(13, 10, 19, 0.6); min-width: 0; }
.bd-card .top { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: baseline; }
.bd-card .ttl { font-weight: 800; font-size: 13px; letter-spacing: 0.04em; color: var(--lavender); flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.bd-card .ttl a { color: var(--lavender); text-decoration: none; }
.bd-card .ttl a:hover { color: var(--amber); }
.bd-card .money { font-family: var(--mono); font-size: 13px; color: var(--ok); white-space: nowrap; }
.bd-card .desc { font-size: 12px; line-height: 1.5; color: var(--lavender); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bd-card .facts { display: flex; gap: 4px 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bd-card ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.bd-card details summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.bd-card details summary:hover { color: var(--amber); }
.bd-pill { font-weight: 800; font-size: 9px; letter-spacing: 0.14em; padding: 2px 6px; border: 1px solid currentColor;
  text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.bd-pill.open { color: var(--ok); }
.bd-pill.in_progress, .bd-pill.delivered { color: var(--amber); }
.bd-pill.in_review { color: var(--neon); }
.bd-pill.accepted { color: var(--ok); }
.bd-type { font-family: var(--mono); font-size: 11px; color: var(--amber); }
.bd-linkfield { flex: 1 1 280px; min-width: 0; width: auto; font-size: 11px; }

/* the explainers (as the worker page's) */
.bd-faq { display: grid; gap: 6px; }
.bd-faq details { border: 1px solid var(--slate-lo); background: rgba(13, 10, 19, 0.6); padding: 0 10px; }
.bd-faq summary { cursor: pointer; padding: 8px 0; font-weight: 800; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lavender); list-style: none; }
.bd-faq summary::-webkit-details-marker { display: none; }
.bd-faq summary::before { content: "+ "; color: var(--neon); font-family: var(--mono); }
.bd-faq details[open] summary::before { content: "- "; }
.bd-faq summary:hover { color: var(--amber); }
.bd-faq p, .bd-faq ul, .bd-faq ol { font-size: 12px; line-height: 1.55; color: var(--muted); margin: 0 0 10px; }
.bd-faq ul, .bd-faq ol { padding-left: 18px; }
.bd-faq li { margin: 3px 0; }
.bd-faq b { color: var(--lavender); font-weight: 600; }

/* the task page */
.bd-task { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--neon); background: var(--ink);
  box-shadow: 0 0 14px rgba(176, 38, 255, 0.2); min-width: 0; }
.bd-taskhead { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.xtitle { font-weight: 800; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lavender); margin: 0; overflow-wrap: anywhere; }
#t-body { display: grid; gap: 12px; min-width: 0; }
.bd-state { display: grid; gap: 4px; padding: 10px; border: 1px dashed var(--slate); }
.bd-state b { font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.bd-state p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--lavender); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; font-size: 12px; min-width: 0; }
.kv dt { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.kv dd { margin: 0; color: var(--lavender); overflow-wrap: anywhere; min-width: 0; line-height: 1.45; }
.kv dd a { color: var(--lavender); }
.kv dd a:hover { color: var(--amber); }
.bd-worker { display: flex; gap: 8px; align-items: center; }
.bd-worker img { width: 32px; height: 32px; border: 1px solid var(--ink); background: var(--slate-lo); }
.bd-block { display: grid; gap: 8px; min-width: 0; }
.bd-block > h3 { font-weight: 800; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0; }
.bd-file { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--slate-lo); min-width: 0; }
.bd-file .fname { font-family: var(--mono); font-size: 12px; color: var(--lavender); overflow-wrap: anywhere; }
.bd-file .fmeta { font-family: var(--mono); font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.bd-file pre { margin: 0; padding: 8px; max-height: 260px; overflow: auto; background: var(--crt); border: 1px solid var(--slate-lo);
  font-size: 11px; line-height: 1.45; color: var(--lavender); white-space: pre-wrap; word-break: break-word; }
.bd-file img { display: block; max-width: 100%; height: auto; image-rendering: auto; border: 1px solid var(--slate-lo); }
.bd-tablewrap { overflow-x: auto; border: 1px solid var(--slate-lo); max-width: 100%; }
.bd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bd-table th { text-align: left; font-weight: 800; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--slate); white-space: nowrap; }
.bd-table td { padding: 6px 8px; border-bottom: 1px solid var(--slate-lo); color: var(--lavender); vertical-align: top; overflow-wrap: anywhere; }
.bd-table td.num { text-align: right; white-space: nowrap; font-family: var(--mono); }
.verdict-met { color: var(--ok); }
.verdict-not_met { color: var(--red); }
.verdict-cannot_tell { color: var(--amber); }
.bd-qa { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--slate-lo); }
.bd-qa .q { font-size: 12px; line-height: 1.5; color: var(--lavender); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.bd-qa .a { font-size: 12px; line-height: 1.5; color: var(--ok); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.bd-decide { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--slate); min-width: 0; }
.bd-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bd-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--lavender); cursor: pointer; }
.bd-check input { flex: none; margin: 3px 0 0; accent-color: var(--neon); }
textarea.field { width: 100%; min-height: 84px; resize: vertical; font-family: var(--font); font-size: 13px; line-height: 1.45; }
.bd-wallet { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--slate); background: var(--crt); }
.bd-wallet .who { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.bd-wallet .who b { color: var(--lavender); font-weight: 400; }
.bd-keybox { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--ok); background: rgba(61, 220, 132, 0.06); min-width: 0; }
.bd-keybox .prompt pre { white-space: pre-wrap; word-break: break-all; font-size: 11px; }

/* the post form */
.bd-form { display: grid; gap: 14px; min-width: 0; }
.bd-fieldset { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--slate-lo); background: rgba(13, 10, 19, 0.5); min-width: 0; margin: 0; }
.bd-fieldset legend { padding: 0 4px; font-weight: 800; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lavender); }
.bd-field { display: grid; gap: 4px; min-width: 0; }
.bd-field > span { font-size: 12px; color: var(--lavender); }
.bd-field > span small { color: var(--muted); }
.bd-field .field { width: 100%; min-width: 0; }
.bd-field .field.short { width: 120px; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; min-width: 0; }
.bd-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.bd-typeopt { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--slate); cursor: pointer; font-size: 12px; color: var(--muted); line-height: 1.45; }
.bd-typeopt input { accent-color: var(--neon); margin: 0 6px 0 0; }
.bd-typeopt b { color: var(--lavender); font-weight: 800; letter-spacing: 0.06em; }
.bd-typeopt:has(input:checked) { border-color: var(--neon); box-shadow: 0 0 10px rgba(176, 38, 255, 0.25); }
.bd-crit { display: flex; gap: 6px; align-items: center; }
.bd-crit .field { flex: 1 1 auto; width: auto; }
.bd-uploads { display: grid; gap: 4px; }
.bd-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bd-upload b { color: var(--lavender); font-weight: 400; overflow-wrap: anywhere; }
.bd-problems { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--amber); }
.bd-problems:empty { display: none; }
.bd-check-out { display: grid; gap: 6px; }
.bd-pay { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--neon); background: var(--ink); min-width: 0; }

@media (max-width: 520px) {
  .bd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-tiles .bd-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bd-big { font-size: 17px; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dd { margin-bottom: 6px; }
  .bd-row .btn { flex: 1 1 auto; }
  .bd-actions .btn { flex: 1 1 auto; }
}
#browse, #mine { display: grid; gap: 8px; min-width: 0; }
#browse > *, #mine > *, .bd-block > *, .bd-decide > *, .bd-fieldset > * { min-width: 0; }
/* the post form's price line (decision B): the worker's reward and the total the poster pays, before any payment */
.bd-price { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; border: 1px solid var(--ok); background: rgba(61, 220, 132, 0.07);
  font-size: 14px; line-height: 1.4; color: var(--lavender); min-width: 0; }
.bd-price[hidden] { display: none; }
.bd-price b { color: var(--ok); font-family: var(--mono); }