@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Public+Sans:wght@400;500;600;700&display=swap');

/* ===========================================================================
   Gulf Coast Farm
   Map-first. The map is the canvas; listings float over it. Roadside sign
   discipline lives in the green band, the condensed caps and the square
   plates, never in wood grain or hand lettering.
   Colour carries the listing type, and shape carries it again for anyone who
   cannot see the colour. Red means one thing only: ready this month.
   =========================================================================== */

:root {
  --paper: #f1f2ee;
  --card: #fff;
  --ink: #14171a;
  --muted: #5a6169;      /* 5.9:1 on white */
  --rule: #dde0da;

  --ready: #d93a14;      /* 4.6:1 — reserved for "ready this month" */
  --ready-deep: #a82c0d; /* 7.2:1 — same signal as text */
  --mark: #e8a317;

  /* Type taxonomy. Every one clears 4.5:1 on white. */
  --t-farm: #2f7d4e;     /* 5.0:1 */
  --t-market: #8e3a6b;   /* 7.1:1 */
  --t-seafood: #1c6e8c;  /* 5.7:1 */
  --t-store: #3c4650;    /* 9.6:1 */

  --head: #14603e;       /* highway guide green */
  --head-deep: #0d4b30;

  --sheet: 54dvh;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--head-deep); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--head); outline-offset: 2px; border-radius: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important; animation-duration: 1ms !important;
  }
}

/* Sign lettering: condensed caps, wayfinding only. Never body copy. */
.sc {
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em;
}

/* ===========================================================================
   Shell and sign band
   =========================================================================== */
.shell { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.doc { overflow: auto; }
body.doc .shell { height: auto; min-height: 100dvh; }

.band {
  flex: 0 0 auto;
  background: var(--head); color: #fff;
  border-bottom: 4px solid var(--ink);
  padding: 11px 22px;
}
.band .inner {
  max-width: 1600px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.band h1, .band .wordmark {
  margin: 0;
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
  text-transform: uppercase; font-weight: 800; font-size: 33px; line-height: .9;
}
.band .wordmark a, .band h1 a { color: #fff; text-decoration: none; }
.band .co {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .2em; margin-top: 4px; opacity: .88;
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
}
.band .add {
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: .09em; font-size: 15px;
  color: #fff; text-decoration: none; border: 2px solid #fff; padding: 6px 13px;
  white-space: nowrap; transition: background 150ms var(--ease), color 150ms var(--ease);
}
.band .add:hover { background: #fff; color: var(--head); }

/* ===========================================================================
   Map stage
   =========================================================================== */
.stage { flex: 1 1 auto; position: relative; min-height: 0; }
#map { position: absolute; inset: 0; background: #e9eae5; }
/* Stock OSM out-tints the pins. Desaturating keeps Mobile Bay legible as water,
   which a full greyscale loses, while the markers take the foreground. */
.leaflet-tile-pane { filter: saturate(0.28) brightness(1.05) contrast(0.92); }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 10px !important; }
.leaflet-popup-content { margin: 9px 12px; font-size: 13.5px; }
.leaflet-popup-content b { display: block; font-size: 14.5px; }

/* Pins: colour for type, shape for the same thing again. */
.dot {
  width: 13px; height: 13px; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition: transform 150ms var(--ease);
}
.dot.farm { border-radius: 50%; background: var(--t-farm); }
.dot.market { border-radius: 1px; background: var(--t-market); }
.dot.seafood { transform: rotate(45deg); border-radius: 1px; background: var(--t-seafood); }
.dot.store { height: 8px; width: 16px; border-radius: 8px; background: var(--t-store); }
.dot.r { box-shadow: 0 0 0 2.5px var(--ready), 0 1px 3px rgba(0,0,0,.5); }
.dot.unconfirmed { border-style: dashed; }
.dot.active { transform: scale(1.5); z-index: 900 !important; }
.dot.seafood.active { transform: rotate(45deg) scale(1.5); }
.here { color: var(--head); }

/* ===========================================================================
   Floating panel (becomes a sheet on phones)
   =========================================================================== */
.panel {
  position: absolute; left: 16px; top: 16px; bottom: 16px;
  width: clamp(340px, 27vw, 440px); z-index: 600;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--rule); border-radius: 7px;
  box-shadow: 0 14px 40px -14px rgba(20,23,26,.38);
}
.grab { display: none; }

.phead {
  flex: 0 0 auto; padding: 13px 15px 11px;
  border-bottom: 1px solid var(--rule); background: rgba(255,255,255,.6);
}
.season { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.season .month {
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
  text-transform: uppercase; font-weight: 800; font-size: 26px; line-height: 1;
  color: var(--ready); margin: 0;
}
.season .lede { margin: 0; font-size: 12.5px; color: var(--muted); }
.season .lede b { color: var(--ink); font-weight: 600; }

.plates {
  display: flex; gap: 6px; margin-top: 9px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 1px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.plates::-webkit-scrollbar { display: none; }
.plates:empty { display: none; }
.plate {
  flex: 0 0 auto; font: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 3px; padding: 5px 10px;
  cursor: pointer; white-space: nowrap;
  transition: background 130ms var(--ease), color 130ms var(--ease), border-color 130ms var(--ease);
}
.plate:hover { background: var(--ink); color: #fff; }
.plate[aria-pressed="true"] { background: var(--ink); color: #fff; }
.plate.season { border-color: var(--ready); color: var(--ready-deep); }
.plate.season:hover, .plate.season[aria-pressed="true"] { background: var(--ready); border-color: var(--ready); color: #fff; }

.searchrow { display: flex; gap: 7px; margin-top: 10px; }
.search { position: relative; flex: 1 1 auto; min-width: 0; }
.search input {
  width: 100%; font: inherit; font-size: 16px; padding: 9px 32px 9px 11px;
  border: 1.5px solid var(--ink); border-radius: 3px; background: var(--card); color: var(--ink);
}
.search input::placeholder { color: #7d848c; }
.search input:focus { outline: none; border-color: var(--head); box-shadow: 0 0 0 2px rgba(20,96,62,.18); }
.search .clear {
  position: absolute; right: 3px; top: 3px; width: 28px; height: 28px;
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  border-radius: 3px; display: none; font-size: 18px; line-height: 1;
}
.search.has-text .clear { display: block; }
.near {
  flex: 0 0 auto;
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: .07em; font-size: 15px;
  background: var(--head); color: #fff; border: 1.5px solid var(--head);
  border-radius: 3px; padding: 8px 12px; cursor: pointer; white-space: nowrap;
}
.near:hover:not(:disabled) { background: var(--head-deep); border-color: var(--head-deep); }
.near[aria-pressed="true"] { background: var(--ready); border-color: var(--ready); }
.near:disabled { opacity: .5; cursor: default; }

.count {
  flex: 0 0 auto;
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: .09em; font-size: 15px;
  color: var(--muted); padding: 9px 15px 7px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.count b { color: var(--ready); }
.count .toggle {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: 'Public Sans', sans-serif; text-transform: none; letter-spacing: 0;
  font-size: 12px; font-weight: 400;
}
.count .toggle input { accent-color: var(--head); width: 14px; height: 14px; }

/* ===========================================================================
   Listing cards
   =========================================================================== */
.plist {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 9px 12px 16px; display: grid; gap: 8px; align-content: start;
}
.card {
  width: 100%; text-align: left; display: block;
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 11px 13px; cursor: pointer;
  transition: border-color 130ms var(--ease), box-shadow 130ms var(--ease);
}
.card:hover { border-color: var(--tc); box-shadow: 0 3px 12px rgba(20,23,26,.10); }
.card.is-active { border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc), 0 3px 12px rgba(20,23,26,.12); }
.t-farm { --tc: var(--t-farm); }
.t-market { --tc: var(--t-market); }
.t-seafood { --tc: var(--t-seafood); }
.t-store { --tc: var(--t-store); }

.kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tc); display: flex; align-items: center; gap: 6px;
}
.kind .sw { width: 9px; height: 9px; background: var(--tc); flex: 0 0 auto; }
.t-farm .sw { border-radius: 50%; }
.t-market .sw { border-radius: 1px; }
.t-seafood .sw { transform: rotate(45deg); border-radius: 1px; }
.t-store .sw { height: 5px; width: 12px; border-radius: 5px; }

.card h3 { margin: 3px 0 0; font-size: 16.5px; font-weight: 700; line-height: 1.22; letter-spacing: -.01em; }
.where { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.where .dist { color: var(--ready-deep); font-weight: 600; }
.upick, .unconf {
  display: inline-block; margin-left: 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 3px; padding: 0 5px;
}
.upick { border: 1.5px solid var(--mark); color: #7d5a05; }
.unconf { border: 1.5px solid var(--muted); color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tag { font-size: 11.5px; font-weight: 600; background: var(--ready); color: #fff; padding: 2px 7px; border-radius: 3px; }
.tag.muted { background: #eceee9; color: var(--muted); }
.hours {
  margin: 7px 0 0; font-size: 12.5px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hours.callfirst { color: var(--ready-deep); font-weight: 600; }
.go {
  display: inline-block; margin-top: 8px;
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: .07em; font-size: 14.5px;
  color: var(--tc); text-decoration: none;
}
.card:hover .go, .go:hover { text-decoration: underline; }

/* Empty, loading, error */
.notice-row { padding: 34px 16px; text-align: center; }
.notice-row .big {
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: .1em; font-size: 18px;
}
.notice-row p { color: var(--muted); font-size: 13.5px; margin: 7px auto 14px; max-width: 34ch; }
.notice-row.alarm .big { color: var(--ready-deep); }
.skel { display: grid; gap: 8px; padding: 9px 12px; }
.skel div {
  height: 96px; border-radius: 4px; border: 1px solid var(--rule);
  background: linear-gradient(90deg, #fff 0%, #f4f5f2 50%, #fff 100%);
  background-size: 200% 100%; animation: sweep 1.2s linear infinite;
}
.skel div:nth-child(2) { animation-delay: .1s; }
.skel div:nth-child(3) { animation-delay: .2s; }
.skel div:nth-child(4) { animation-delay: .3s; }
@keyframes sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ===========================================================================
   Detail, shown inside the panel
   =========================================================================== */
.detail { padding: 14px 15px 24px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.detail .back {
  border: 1.5px solid var(--ink); background: var(--card); border-radius: 3px;
  padding: 5px 10px; cursor: pointer; margin-bottom: 12px;
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: .08em; font-size: 14px;
}
.detail .back:hover { background: var(--ink); color: #fff; }
.detail h2 { margin: 6px 0 0; font-size: 23px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
.detail .where { font-size: 13.5px; margin-top: 4px; }
.detail p { font-size: 14px; line-height: 1.55; margin: 11px 0; }
.notice {
  border: 1.5px solid var(--rule); border-left: 1px solid var(--rule);
  background: #fff; border-radius: 4px; padding: 9px 11px; margin: 11px 0; font-size: 13px;
}
.notice b {
  display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 3px; font-weight: 700;
}
.notice.ready { border-color: var(--ready); }
.notice.ready b { color: var(--ready-deep); }
.notice.warn { border-color: var(--mark); }
.notice.warn b { color: #7d5a05; }

.actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 8px 12px; border-radius: 3px; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink);
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: .07em; font-size: 14.5px;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.btn:hover { background: var(--ink); color: #fff; }
.btn.primary { background: var(--head); border-color: var(--head); color: #fff; }
.btn.primary:hover { background: var(--head-deep); border-color: var(--head-deep); }

.cells {
  display: flex; flex-wrap: wrap; background: var(--card);
  border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; margin: 13px 0;
}
.cells > div {
  flex: 1 1 150px; min-width: 0; padding: 9px 11px;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: 0 -1px -1px 0;
}
.cells dt {
  margin: 0 0 2px; font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.cells dd { margin: 0; font-size: 13.5px; line-height: 1.4; }
.cells dd.flag { color: var(--ready-deep); font-weight: 600; }
.fine { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 14px; }

/* ===========================================================================
   Legend
   =========================================================================== */
.legend {
  position: absolute; right: 16px; bottom: 34px; z-index: 600;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rule); border-radius: 6px; padding: 9px 12px;
  font-size: 11.5px; color: var(--muted);
  box-shadow: 0 8px 24px -10px rgba(20,23,26,.35); display: grid; gap: 5px;
}
.legend span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.legend i { width: 10px; height: 10px; display: inline-block; flex: 0 0 auto; }
.legend i.farm { border-radius: 50%; background: var(--t-farm); }
.legend i.market { border-radius: 1px; background: var(--t-market); }
.legend i.seafood { transform: rotate(45deg); border-radius: 1px; background: var(--t-seafood); }
.legend i.store { height: 6px; width: 13px; border-radius: 6px; background: var(--t-store); }
.legend i.rdy { border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ready); }

/* ===========================================================================
   Document pages: /l/ listings and the submit form
   =========================================================================== */
.page { max-width: 820px; margin: 0 auto; padding: 26px 22px 64px; width: 100%; }
.page .big {
  font-size: 31px; line-height: 1.1; margin: 4px 0 6px; font-weight: 700; letter-spacing: -.02em;
}
.page .lede {
  color: var(--muted); font-size: 14.5px; margin: 0 0 18px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.page .lede .kind { font-size: 11px; }
.miniMap { height: 300px; border: 1px solid var(--rule); border-radius: 4px; margin: 18px 0; background: #e9eae5; }

form .field { display: grid; gap: 5px; margin-bottom: 15px; }
form label { font-weight: 600; font-size: 14px; }
form .hint { font-size: 12.5px; color: var(--muted); font-weight: 400; display: block; }
form input[type=text], form input[type=email], form input[type=tel], form input[type=url],
form select, form textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 16px;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 3px;
}
form input:focus, form select:focus, form textarea:focus {
  outline: none; border-color: var(--head); box-shadow: 0 0 0 2px rgba(20,96,62,.18);
}
form textarea { min-height: 100px; resize: vertical; }
form .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 7px 14px; }
form .checks label { font-weight: 400; font-size: 14px; display: flex; gap: 8px; align-items: center; }
form input[type=checkbox], form input[type=radio] { accent-color: var(--head); width: 15px; height: 15px; }
form fieldset {
  border: 1px solid var(--rule); border-radius: 4px; padding: 14px 16px;
  margin: 0 0 16px; background: var(--card);
}
form legend {
  padding: 0 8px; font-weight: 700; font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--head-deep);
}
form legend .hint { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; font-size: 12.5px; }
.status { padding: 11px 13px; border-radius: 4px; margin-top: 14px; display: none; font-size: 14px; border: 1.5px solid; }
.status.ok { display: block; border-color: var(--head); background: #fff; }
.status.err { display: block; border-color: var(--ready); background: #fff; }
.hp { position: absolute; left: -9999px; }

footer.site {
  border-top: 4px solid var(--ink); background: var(--card);
  padding: 18px 22px; font-size: 13.5px; color: var(--muted);
}
footer.site .inner { max-width: 1600px; margin: 0 auto; }

/* ===========================================================================
   Phone: the panel becomes a drag sheet
   =========================================================================== */
@media (max-width: 860px) {
  .band { padding: 9px 15px; }
  .band h1, .band .wordmark { font-size: 26px; }
  .band .co { font-size: 10px; margin-top: 3px; }
  .band .add { font-size: 13px; padding: 5px 10px; }

  .panel {
    left: 0; right: 0; bottom: 0; top: auto; width: auto; height: var(--sheet);
    border-radius: 15px 15px 0 0; border-bottom: 0;
    box-shadow: 0 -8px 32px -10px rgba(20,23,26,.4);
    transition: height 280ms var(--ease);
  }
  .grab { display: block; flex: 0 0 auto; padding: 8px 0 4px; cursor: grab; touch-action: none; border: 0; background: none; width: 100%; }
  .grab::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 4px; background: #c3c8cc; margin: 0 auto; }

  /* The zoom stack owns the top right, so the legend takes the left. */
  .legend { right: auto; left: 10px; bottom: auto; top: 10px; font-size: 10.5px; padding: 7px 9px; gap: 4px; }
  /* OSM attribution is a licence requirement, and the sheet was sitting on it. */
  .leaflet-bottom.leaflet-right { bottom: calc(var(--sheet) - 4px); transition: bottom 280ms var(--ease); }

  .phead { padding: 6px 14px 10px; }
  .season .month { font-size: 20px; }
  .season .lede { font-size: 11.5px; }
  .plates { margin-top: 7px; }
  .plate { font-size: 12px; padding: 4px 9px; }
  .searchrow { margin-top: 8px; }
  .searchrow input { padding: 8px 10px; }
  .near { font-size: 14px; padding: 7px 11px; }
  .count { padding: 7px 14px 6px; font-size: 14px; }
  .plist { padding: 8px 11px 20px; gap: 7px; }
  .card { padding: 10px 12px; }
  .card h3 { font-size: 16px; }
  .detail { padding: 10px 14px 24px; }
  .page { padding: 20px 15px 52px; }
  .page .big { font-size: 25px; }
}