:root{
  --green:#00703c;
  --green-dark:#005a30;
  --yellow:#ffdd00;
  --ink:#0b0c0c;
  --muted:#505a5f;
  --line:#b1b4b6;
  --paper:#ffffff;
  --surface:#f3f2f1;
  --focus:#ffdd00;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.5}
a{color:var(--green-dark)}
a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:3px solid var(--focus);outline-offset:0;box-shadow:0 0 0 1px var(--ink)
}
.wrap{max-width:72rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}
.back{margin:0 0 .5rem;font-size:.95rem}

.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem;padding:1rem 0 1.5rem;border-bottom:4px solid var(--yellow)}
.logo{width:140px;height:auto;display:block}
.eyebrow{margin:0 0 .25rem;font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);font-weight:700}
.hero h1{margin:0;font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.15}
.tagline{margin:.5rem 0 0;color:var(--muted)}

.panel{max-width:48rem;margin:1.5rem auto 0;padding:1.25rem;background:var(--paper);border:1px solid var(--line)}
.panel-title,.board-title{margin:0 0 .75rem;font-size:1.25rem}
.board-title{margin-top:2rem}
.row{display:flex;flex-wrap:wrap;gap:0 1rem}
.row .field{flex:1 1 12rem}
.field{margin-bottom:.75rem}
label{display:block;font-weight:700;margin-bottom:.25rem}
select,textarea{width:100%;padding:.6rem .7rem;font:inherit;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:0}
textarea{resize:vertical;min-height:5rem}
.hint{margin:.2rem 0 0;font-size:.85rem;color:var(--muted);text-align:right}
.btn{padding:.65rem 1.1rem;font:inherit;font-weight:700;background:var(--green);color:#fff;border:2px solid var(--green);box-shadow:0 2px 0 var(--green-dark);cursor:pointer;min-height:2.75rem}
.btn:hover{background:var(--green-dark);border-color:var(--green-dark)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.status{min-height:1.5em;margin:.6rem 0 0;color:var(--muted)}
.status.error{color:#942514}

.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.chip{padding:.35rem .8rem;font:inherit;font-size:.9rem;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.chip .n{opacity:.75;margin-left:.3rem}

.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;align-items:start}
.column{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--green);padding:.75rem}
.column:nth-child(3n+2){border-top-color:#1d70b8}
.column:nth-child(3n+3){border-top-color:#f47738}
.column h3{margin:0 0 .5rem;font-size:1.05rem;display:flex;justify-content:space-between;gap:.5rem}
.column h3 .n{color:var(--muted);font-weight:400}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.card{background:var(--surface);border-left:4px solid var(--line);padding:.6rem .7rem}
.card p{margin:0 0 .4rem;white-space:pre-wrap;overflow-wrap:anywhere}
.card-meta{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}
.tag{background:var(--paper);border:1px solid var(--line);padding:0 .4rem}
.vote{padding:.15rem .55rem;font:inherit;font-size:.85rem;background:var(--paper);color:var(--ink);border:1px solid var(--ink);cursor:pointer}
.vote[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff;cursor:default}
.empty{color:var(--muted);font-style:italic;margin:0}

@media (min-width:640px){
  .hero{flex-direction:row;text-align:left;gap:1.75rem}
  .hero-text{flex:1}
  .logo{width:170px}
}