:root{
  --paper:#f7f4ed;
  --card:#fffdf8;
  --ink:#23261f;
  --ink-soft:#5d6154;
  --line:#ddd7c8;
  --bar:#2f3a2c;
  --bar-2:#3c4a37;
  --accent:#b0522c;
  --accent-dk:#8f4023;
  --green:#4a7a3f;
  --gold:#c08a2e;
  --blue:#3a6178;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent-dk)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:600;margin:0}

/* ---------- header ---------- */
.top{background:var(--bar);color:#f3efe3;padding:14px 16px 16px}
.top-in{max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand h1{font-size:26px;letter-spacing:.4px;color:#fff;line-height:1.15}
.brand .tag{font-size:13px;color:#bcc7b4}
.sub{margin-top:6px;font-size:14px;color:#c6d0be}
/* the five day rule, said out loud where a first-timer will see it */
.rule{margin-top:9px;padding:8px 11px;font-size:13px;line-height:1.5;color:#dce4d5;
  background:rgba(255,255,255,.07);border-left:3px solid var(--accent);border-radius:0 5px 5px 0}
.acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;
  padding:11px 18px;border-radius:6px;font-size:15px;font-weight:600;
  background:#e9e4d6;color:#2c2f27;
}
.btn:hover{background:#fff}
.btn-go{background:var(--accent);color:#fff}
.btn-go:hover{background:var(--accent-dk)}
.btn-ghost{background:transparent;color:#e6e1d3;box-shadow:inset 0 0 0 1px #6e7c68}
.btn-ghost:hover{background:#3f4d39;color:#fff}
.btn-sm{padding:7px 13px;font-size:14px}

/* ---------- demo strip ---------- */
.demo{background:#fbf1d8;border-bottom:1px solid #e6d9b4;color:#6a541c;
  font-size:13.5px;padding:9px 16px;text-align:center}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:16px}
.cols{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start;
  grid-template-areas:"side map" "side list"}
/* min-width:0 or the nowrap map caption sets the column's min-content width
   and the whole page scrolls sideways on a phone */
.side{grid-area:side;min-width:0}
.mapcol{grid-area:map;min-width:0}
.listcol{grid-area:list;min-width:0}
@media (max-width:860px){
  .cols{grid-template-columns:1fr;gap:16px;grid-template-areas:"map" "side" "list"}
}

.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px}
.panel + .panel{margin-top:14px}
.panel h3{font-size:16px;margin-bottom:10px}

/* ---------- filters ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  padding:6px 11px;border-radius:999px;font-size:13.5px;cursor:pointer;
}
.chip:hover{border-color:#b9b09a}
.chip.on{background:var(--bar);border-color:var(--bar);color:#fff}
label.fl{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--ink-soft);margin:12px 0 5px}
select,input,textarea{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;
  background:#fff;color:var(--ink);font-size:15px;font-family:inherit;
}
select:focus,input:focus,textarea:focus{outline:2px solid #9fb197;outline-offset:1px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.clearlink{background:none;border:0;color:var(--accent-dk);font-size:13.5px;
  cursor:pointer;padding:0;text-decoration:underline}

/* ---------- map ---------- */
.mapbox{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 10px 6px}
.mapbox svg{width:100%;height:470px;max-height:62vh;display:block;touch-action:manipulation}
@media (max-width:860px){.mapbox svg{height:360px}}
.cty{fill:#eae4d5;stroke:#fdfbf6;stroke-width:1.4;cursor:pointer}
.cty:hover{stroke:var(--bar);stroke-width:2.6}
.cty.sel{stroke:var(--accent);stroke-width:4}
.cty.dim{fill:#ece9e0}
/* the five regions. Not the sign's colours - these are keyed to the ground:
   water at the lake, grain gold on the flat dirt, pasture green on the rolling
   country, clay on the hills. Kept pale so the roads and load dots read on top. */
.r-lake{fill:#b0c8cd}
.r-till{fill:#e2d4a3}
.r-glaciated{fill:#b4c497}
.r-unglaciated{fill:#d29e80}
.r-bluegrass{fill:#c9a6ad}
.paper{fill:#f3ecda;stroke:#d8cfb8;stroke-width:3}
.edge{fill:none;stroke:#4a4f42;stroke-width:5;stroke-linejoin:round}

/* nothing drawn over the counties may eat a county tap */
.paper,.edge,.roads,.dots,.deco{pointer-events:none}
.road-case{fill:none;stroke:#fdfbf6;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.road{fill:none;stroke:#5b5f52;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.shield{fill:#fdfbf6;stroke:#5b5f52;stroke-width:2.6}
.shieldtx{font:700 27px Georgia,serif;fill:#33372c;text-anchor:middle}
.ldot{fill:#8f4023;fill-opacity:.82;stroke:#fffdf8;stroke-width:3}
.ldot.on{fill:#b0522c;fill-opacity:1;stroke-width:5}
.deco .barbg{fill:#fffdf8;fill-opacity:.8}
.deco .bar{stroke:#5b5f52;stroke-width:3.4}
.deco .barlb{font:600 25px Georgia,serif;fill:#5b5f52;text-anchor:middle}
.deco .rose path{fill:#5b5f52}
.deco .rose text{font:600 30px Georgia,serif;fill:#5b5f52;text-anchor:middle}
/* fixed height on purpose: the hover label must never reflow the map,
   or a tap lands on the county above the one you aimed at */
.maphead{position:relative;height:30px;padding:4px 4px 0;font-size:13.5px;
  color:var(--ink-soft);overflow:hidden}
.maphead .hint{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.maphead .hint{padding-right:118px}}
/* the sign's key, boxed the same way a printed map boxes it */
.key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;
  margin:8px 2px 2px;padding:9px 11px;font-size:12.5px;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:6px;background:#fdfbf6}
.keyt{width:100%;font-family:Georgia,serif;font-weight:600;font-size:12px;
  letter-spacing:.9px;text-transform:uppercase;color:var(--ink);margin-bottom:3px}
/* no nowrap here: the longest key line is wider than a 320px phone and would
   set the column's min-content width, scrolling the whole page sideways */
.key .k{display:flex;align-items:center;gap:6px;min-width:0}
.key i{width:18px;height:12px;border-radius:2px;display:inline-block;
  border:1px solid rgba(0,0,0,.14);flex:none}
/* the swatches are HTML, not SVG, so they need background - fill does nothing here */
.key i.r-lake{background:#b0c8cd}
.key i.r-till{background:#e2d4a3}
.key i.r-glaciated{background:#b4c497}
.key i.r-unglaciated{background:#d29e80}
.key i.r-bluegrass{background:#c9a6ad}
.key i.kdot{width:12px;height:12px;border-radius:50%;background:#8f4023;
  opacity:.85;border:1px solid #fffdf8}
.hovname{display:none;position:absolute;right:4px;top:4px;max-width:112px;
  font-weight:600;color:var(--ink);background:var(--card);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-left:8px;pointer-events:none}
@media (hover:hover){.hovname{display:block}}

/* ---------- listings ---------- */
.listhead{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin:4px 2px 10px;flex-wrap:wrap}
.listhead h2{font-size:20px}
.count{font-size:14px;color:var(--ink-soft)}
.load{
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--green);
  border-radius:8px;padding:13px 14px;margin-bottom:11px;
}
.load.t-need{border-left-color:var(--blue)}
.load.t-truck{border-left-color:var(--gold)}
.load.mine{box-shadow:0 0 0 2px #c9dcc0}
.load-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.load h3{font-size:17.5px;line-height:1.3}
.pill{font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;background:#e6efe1;color:#3c6a32;white-space:nowrap}
.pill.t-need{background:#e2ecf1;color:#31586d}
.pill.t-truck{background:#f6ecd6;color:#8a6015}
.pill.mine{background:#dcefd4;color:#2f6122}
/* every load carries its own clock, so nobody has to wonder if it is still good */
.runline{margin-top:6px}
.run{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.3px;
  padding:2px 9px;border-radius:999px;background:#e9efe4;color:#4a6b3e;white-space:nowrap}
.run.last{background:#f7ecd5;color:#8a6015}
.run.stand{background:#e6eef2;color:#3a6178}
.run.out{background:#ece7df;color:#6d685e}
/* the made-up ones say so on the card itself, not only in the notice up top -
   the notice scrolls away and the card is what somebody is looking at */
.run.demo{background:#efe4e0;color:#8a5347;margin-left:6px}
.load.spent{opacity:.7}
.load.spent h3,.load.spent .price{color:var(--ink-soft)}
.meta{color:var(--ink-soft);font-size:14px;margin-top:5px}
.meta b{color:var(--ink);font-weight:600}
.dot{color:#bdb7a6;padding:0 5px}
.desc{margin-top:8px;font-size:14.5px;color:#40453a}
.load-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:11px;padding-top:10px;border-top:1px solid #ece7da;flex-wrap:wrap}
.who{font-size:14px;color:var(--ink-soft)}
.price{font-family:Georgia,serif;font-size:17px;color:var(--accent-dk)}
.interest{margin-top:9px;padding-top:9px;border-top:1px solid #ece7da;
  font-size:13.5px;color:var(--ink-soft)}
.interest.on{color:#3c6a32;font-weight:600}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:8px;
  padding:28px 18px;text-align:center;color:var(--ink-soft)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px;
  font-family:Georgia,serif;font-weight:600}

/* ---------- post page ---------- */
.form{max-width:640px;margin:0 auto}
.form .panel{padding:18px}
.help{font-size:13px;color:var(--ink-soft);margin-top:4px}
.pick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
@media (max-width:520px){.pick{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}
.pick button{
  border:1px solid var(--line);background:#fff;border-radius:7px;padding:12px 8px;
  cursor:pointer;font-size:14.5px;font-weight:600;color:var(--ink-soft);font-family:inherit;
}
.pick button.on{background:var(--bar);border-color:var(--bar);color:#fff}
.mebar{background:#eef3ea;border:1px solid #cfdcc6;border-radius:7px;
  padding:10px 12px;margin-bottom:16px;font-size:14.5px;color:#3d5236}
.mebar b{color:var(--ink)}
.mebar a{color:var(--accent-dk)}
.err{color:#a3341f;font-size:13.5px;margin-top:6px;display:none}
.err.show{display:block}
.saved{background:#e7f1e1;border:1px solid #bcd5b0;color:#31601f;padding:14px;
  border-radius:7px;margin-bottom:14px}
/* same banner, for when the board could not be reached rather than when it worked */
.saved.warn{background:#f6e9e4;border-color:#dcbcb0;color:#8a3d27}

/* ---------- footer ---------- */
.foot{max-width:1080px;margin:10px auto 0;padding:18px 16px 34px;
  color:var(--ink-soft);font-size:13.5px;border-top:1px solid var(--line)}
.foot a{color:var(--ink-soft)}