/* ==========================================================================
   The Farm Votes — stylesheet
   Palette: weathered barn wood, pasture green, cream paper, barn red.
   ========================================================================== */

:root {
  --paper:        #faf8f3;
  --paper-2:      #f3efe6;
  --card:         #ffffff;
  --ink:          #1e2620;
  --ink-2:        #47514a;
  --muted:        #77817a;
  --line:         #e2ddd1;
  --line-2:       #cfc8b8;

  --green:        #2f4a34;
  --green-mid:    #3f6146;
  --green-soft:   #eaf0e9;
  --barn:         #9a3d2e;
  --barn-soft:    #fbeeeb;
  --gold:         #a8762a;
  --gold-soft:    #fbf2e0;
  --blue:         #2c5570;
  --blue-soft:    #e9f0f5;

  --radius:       10px;
  --radius-lg:    14px;
  --shadow:       0 1px 2px rgba(30,38,32,.05), 0 6px 18px -8px rgba(30,38,32,.14);
  --shadow-lg:    0 2px 4px rgba(30,38,32,.05), 0 18px 44px -18px rgba(30,38,32,.26);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(1200px 400px at 50% -200px, rgba(47,74,52,.06), transparent 70%);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.22; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.3rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.65rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; font-family: var(--sans); font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); text-decoration-color: rgba(47,74,52,.32); text-underline-offset: 2px; }
a:hover { color: var(--barn); text-decoration-color: currentColor; }

small { font-size: .8125rem; }
.small { font-size: .875rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0 } .mb0 { margin-bottom: 0 }
.mt1 { margin-top: .75rem } .mt2 { margin-top: 1.5rem } .mt3 { margin-top: 2.25rem }
.mb1 { margin-bottom: .75rem } .mb2 { margin-bottom: 1.5rem }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--green); color: #fff;
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------- masthead -- */

.masthead {
  background: var(--green);
  color: #eef2ec;
  border-bottom: 3px solid #24391f;
}
.masthead-in {
  max-width: 1120px; margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; margin-right: auto; }
.brand-mark { width: 30px; height: 30px; flex: none; opacity: .95; }
.brand-text strong { display: block; font-family: var(--serif); font-size: 1.14rem; font-weight: 600; letter-spacing: .01em; line-height: 1.15; }
.brand-text em { display: block; font-style: normal; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; opacity: .72; }

.navtoggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px; padding: .5rem .6rem; cursor: pointer;
}
.navtoggle span:not(.vh) { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
.navtoggle span + span { margin-top: 4px; }

.mainnav { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.mainnav a {
  color: #d9e2d6; text-decoration: none; font-size: .875rem; font-weight: 500;
  padding: .45rem .7rem; border-radius: 7px; white-space: nowrap;
}
.mainnav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.mainnav a.active { background: rgba(255,255,255,.16); color: #fff; }
.mainnav .nav-admin { color: var(--gold-soft); border: 1px solid rgba(232,196,126,.4); }
.mainnav .nav-sep { width: 1px; height: 20px; background: rgba(255,255,255,.2); margin: 0 .4rem; }
.mainnav .nav-you { font-size: .82rem; opacity: .9; }
.mainnav .nav-you small { display: block; font-size: .68rem; opacity: .65; letter-spacing: .04em; }
.mainnav .nav-out { font-size: .82rem; opacity: .8; }

@media (max-width: 860px) {
  .navtoggle { display: block; }
  .mainnav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: .5rem; }
  .mainnav.open { display: flex; }
  .mainnav a { padding: .65rem .5rem; border-radius: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .mainnav .nav-sep { display: none; }
  .mainnav .nav-admin { border: 0; border-top: 1px solid rgba(255,255,255,.1); }
}

/* ---------------------------------------------------------------- shell -- */

.wrap { max-width: 880px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.wrap.wide { max-width: 1180px; }
body.bare .wrap { padding-top: 3.5rem; }

.foot { border-top: 1px solid var(--line); background: var(--paper-2); }
.foot-in { max-width: 1120px; margin: 0 auto; padding: 1.75rem 1.25rem 2.5rem; color: var(--ink-2); }
.foot p { margin: 0 0 .4rem; font-size: .875rem; }

/* ---------------------------------------------------------------- cards -- */

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1.25rem;
}
.card.pad-lg { padding: 2rem; }
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  padding: 1.15rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--paper-2);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .spacer { margin-left: auto; }
.card-body { padding: 1.5rem; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.row.tight { gap: .4rem; }
.row .spacer { margin-left: auto; }

/* --------------------------------------------------------------- header -- */

.pagehead { margin-bottom: 1.75rem; }
.pagehead .eyebrow {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold); font-weight: 700; margin: 0 0 .35rem;
}
.pagehead h1 { margin: 0 0 .4rem; }
.lede { font-size: 1.05rem; color: var(--ink-2); max-width: 62ch; }

/* ---------------------------------------------------------------- flash -- */

.flash {
  border-radius: var(--radius); padding: .85rem 1.1rem; margin-bottom: 1.25rem;
  border: 1px solid; font-size: .94rem; font-weight: 500;
}
.flash-ok   { background: var(--green-soft); border-color: #bcd0bd; color: #1f3a25; }
.flash-warn { background: var(--gold-soft);  border-color: #e4cd9a; color: #6b4a11; }
.flash-err  { background: var(--barn-soft);  border-color: #e6bcb4; color: #7b2c20; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2;
  padding: .68rem 1.15rem; border-radius: 8px; border: 1px solid var(--green);
  background: var(--green); color: #fff; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: #26402c; border-color: #26402c; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }
.btn-ghost { background: #fff; color: var(--green); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--paper-2); color: var(--green); border-color: var(--line-2); }
.btn-danger { background: var(--barn); border-color: var(--barn); }
.btn-danger:hover { background: #7f3125; border-color: #7f3125; }
.btn-sm { padding: .42rem .75rem; font-size: .82rem; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------- forms --- */

label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .3rem; color: var(--ink); }
label .opt { font-weight: 400; color: var(--muted); }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  padding: .6rem .75rem; border: 1px solid var(--line-2); border-radius: 8px;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
textarea { line-height: 1.55; resize: vertical; min-height: 5.5rem; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(63,97,70,.15);
}
input[type=file] { font-size: .9rem; }
.field { margin-bottom: 1.1rem; }
.field .hint { font-size: .82rem; color: var(--muted); margin-top: .35rem; }
.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
legend { font-weight: 600; font-size: .875rem; padding: 0; margin-bottom: .45rem; }

.inline-check { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; font-size: .92rem; }
.inline-check input { width: auto; margin-top: .25rem; flex: none; }

/* Ballot / support option cards */
.options { display: grid; gap: .6rem; }
.options.cols { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.option {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: .85rem 1rem;
  background: #fff; font-weight: 500; transition: border-color .12s, background .12s;
}
.option:hover { border-color: var(--green-mid); background: var(--paper); }
.option input { width: auto; flex: none; margin: .2rem 0 0; accent-color: var(--green); }
.option .o-title { display: block; font-weight: 600; font-size: .95rem; }
.option .o-note { display: block; font-size: .82rem; color: var(--muted); font-weight: 400; margin-top: .1rem; }
.option:has(input:checked) { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 1px var(--green); }
.option:has(input:checked) .o-title { color: #1f3a25; }
.option.opt-no:has(input:checked) { border-color: var(--barn); background: var(--barn-soft); box-shadow: 0 0 0 1px var(--barn); }
.option.opt-no:has(input:checked) .o-title { color: #7b2c20; }
.option.opt-abstain:has(input:checked) { border-color: var(--muted); background: var(--paper-2); box-shadow: 0 0 0 1px var(--muted); }

/* --------------------------------------------------------------- tables -- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  font-weight: 700; background: var(--paper-2); border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
tbody tr:hover { background: var(--paper); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.compact th, table.compact td { padding: .5rem .6rem; font-size: .85rem; }

/* ---------------------------------------------------------------- stats -- */

.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow);
}
.stat .n { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; line-height: 1.05; color: var(--green); display: block; }
.stat .n.barn { color: var(--barn); }
.stat .n.gold { color: var(--gold); }
.stat .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-top: .3rem; display: block; }
.stat .sub { font-size: .82rem; color: var(--ink-2); margin-top: .3rem; display: block; }

/* --------------------------------------------------------------- pills --- */

.pill {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line-2);
  white-space: nowrap;
}
.pill-open    { background: var(--green-soft); color: #1f3a25; border-color: #b5cbb7; }
.pill-closed  { background: var(--paper-2); color: var(--muted); }
.pill-draft   { background: var(--gold-soft); color: #6b4a11; border-color: #e4cd9a; }
.pill-approve { background: var(--green-soft); color: #1f3a25; border-color: #b5cbb7; }
.pill-oppose  { background: var(--barn-soft); color: #7b2c20; border-color: #e6bcb4; }
.pill-abstain { background: var(--paper-2); color: var(--ink-2); }
.pill-must    { background: #e7efe7; color: #1f3a25; border-color: #b5cbb7; }
.pill-should  { background: var(--blue-soft); color: #23485f; border-color: #b8cfdd; }
.pill-nice    { background: var(--gold-soft); color: #6b4a11; border-color: #e4cd9a; }
.pill-no      { background: var(--barn-soft); color: #7b2c20; border-color: #e6bcb4; }
.pill-admin   { background: var(--gold-soft); color: #6b4a11; border-color: #e4cd9a; }
.pill-member  { background: var(--paper-2); color: var(--ink-2); }

/* ----------------------------------------------------------------- bars -- */

.bars { display: grid; gap: .55rem; }
.bar-row { display: grid; grid-template-columns: 7.5rem 1fr 4.5rem; gap: .7rem; align-items: center; font-size: .875rem; }
.bar-track { background: var(--paper-2); border-radius: 999px; height: 22px; overflow: hidden; border: 1px solid var(--line); }
.bar-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.bar-fill.approve { background: linear-gradient(90deg, #3f6146, #2f4a34); }
.bar-fill.oppose  { background: linear-gradient(90deg, #b04a39, #9a3d2e); }
.bar-fill.abstain { background: linear-gradient(90deg, #a8a397, #8b8679); }
.bar-fill.novote  { background: repeating-linear-gradient(45deg, #e0dbd0, #e0dbd0 6px, #eae5da 6px, #eae5da 12px); }
.bar-fill.must    { background: linear-gradient(90deg, #3f6146, #2f4a34); }
.bar-fill.should  { background: linear-gradient(90deg, #3d7096, #2c5570); }
.bar-fill.nice    { background: linear-gradient(90deg, #c79a4b, #a8762a); }
.bar-fill.no      { background: linear-gradient(90deg, #b04a39, #9a3d2e); }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bar-label { font-weight: 500; }

/* stacked single bar */
.stackbar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.stackbar span { display: block; height: 100%; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .6rem; font-size: .82rem; color: var(--ink-2); }
.legend i { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; margin-right: .35rem; vertical-align: -1px; }

/* ------------------------------------------------------------- project --- */

.proj {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card);
  box-shadow: var(--shadow); margin-bottom: 1rem; overflow: hidden;
}
.proj-head { padding: 1.1rem 1.35rem; display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.proj-head h3 { margin: 0 0 .2rem; }
.proj-head .budget { margin-left: auto; text-align: right; flex: none; }
.proj-head .budget .n { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--green); display: block; }
.proj-head .budget .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.proj-body { padding: 0 1.35rem 1.35rem; }
.proj-status { padding: .7rem 1.35rem; background: var(--paper-2); border-top: 1px solid var(--line); font-size: .85rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* rank list */
.ranklist { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.ranklist li {
  display: flex; align-items: center; gap: .85rem; background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .5rem;
}
.ranklist li .pos {
  counter-increment: rank; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.ranklist li .pos::before { content: counter(rank); }
.ranklist li .rl-title { flex: 1; font-weight: 600; font-size: .94rem; }
.ranklist li .rl-title small { display: block; font-weight: 400; color: var(--muted); }
.ranklist .movers { display: flex; gap: .3rem; flex: none; }
.ranklist .movers button {
  width: 2rem; height: 2rem; border: 1px solid var(--line-2); background: #fff; border-radius: 7px;
  cursor: pointer; font-size: .9rem; line-height: 1; color: var(--green);
}
.ranklist .movers button:hover { background: var(--green-soft); border-color: var(--green-mid); }
.ranklist .movers button[disabled] { opacity: .3; cursor: default; }

/* ------------------------------------------------------------- comments -- */

.comment { border-top: 1px solid var(--line); padding: 1rem 0; }
.comment:first-child { border-top: 0; padding-top: 0; }
.comment .who { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .3rem; }
.comment .who strong { font-size: .9rem; }
.comment .who .lot { font-size: .78rem; color: var(--muted); }
.comment .who time { font-size: .78rem; color: var(--muted); margin-left: auto; }
.comment .body { font-size: .94rem; color: var(--ink-2); }

/* -------------------------------------------------------------- prose ---- */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
.prose blockquote {
  margin: 1.25rem 0; padding: .9rem 1.25rem; border-left: 3px solid var(--gold);
  background: var(--gold-soft); border-radius: 0 var(--radius) var(--radius) 0; font-size: .94rem;
}

/* --------------------------------------------------------------- login --- */

.authbox { max-width: 25rem; margin: 0 auto; }
.authbox .authmark { text-align: center; margin-bottom: 1.5rem; color: var(--green); }
.authbox .authmark svg { width: 46px; height: 46px; }
.authbox .authmark h1 { font-size: 1.5rem; margin: .5rem 0 .15rem; }
.authbox .authmark p { color: var(--muted); font-size: .9rem; margin: 0; }

/* --------------------------------------------------------------- steps --- */

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li { counter-increment: step; display: flex; gap: .9rem; padding: .65rem 0; }
.steps li::before {
  content: counter(step); flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--green-soft); color: var(--green); display: grid; place-items: center;
  font-weight: 700; font-size: .82rem; border: 1px solid #bcd0bd;
}
.steps li.done::before { content: "✓"; background: var(--green); color: #fff; border-color: var(--green); }
.steps li strong { display: block; font-size: .94rem; }
.steps li span { font-size: .87rem; color: var(--muted); }

/* --------------------------------------------------------------- misc ---- */

.divider { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.tag-note { background: var(--paper-2); border: 1px dashed var(--line-2); border-radius: var(--radius); padding: .85rem 1.1rem; font-size: .88rem; color: var(--ink-2); }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty svg { width: 40px; height: 40px; opacity: .35; margin-bottom: .5rem; }

.adminbar { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); padding-bottom: .1rem; }
.adminbar a {
  font-size: .875rem; font-weight: 500; padding: .55rem .85rem; text-decoration: none;
  color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.adminbar a:hover { color: var(--green); background: var(--paper-2); }
.adminbar a.active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }

.codeblock {
  background: #22281f; color: #dfe6da; border-radius: var(--radius); padding: 1rem 1.15rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem;
  overflow-x: auto; line-height: 1.5;
}

@media print {
  .masthead, .foot, .btn, .adminbar { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* priority number boxes — visible only when JavaScript is unavailable */
.ranklist .rank-num { width: 4rem; flex: none; text-align: center; font-variant-numeric: tabular-nums; }
.ranklist.js-ranked .rank-num { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }