/* ============================================================ scoped block */
.coe-program{
  --bg:#e9efd0; --bg2:#f2f6e2; --panel:#fbfcf5; --ink:#1a2410; --ink2:#4a5340;
  --muted:#7c8470; --line:rgba(26,36,16,.12); --line2:rgba(26,36,16,.07);
  --accent:#4a7c1f; --accent-ink:#3b6318; --gold:#b8860b; --red:#8c2f18;
  --s1:#2a78d6; --seq1:#cde2fb; --seq3:#6da7ec; --seq5:#256abf; --seq7:#0d366b;
  --deemph:#c9c7c0; --land:#dfe6c8;
  color-scheme:light;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 40%,var(--bg2) 100%);
  color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding:26px 20px 60px;
}
@media (prefers-color-scheme:dark){ .coe-program{
  --bg:#161c0f; --bg2:#111509; --panel:#1c2214; --ink:#f0f4e6; --ink2:#c3cbb2;
  --muted:#8d9680; --line:rgba(240,244,230,.14); --line2:rgba(240,244,230,.08);
  --accent:#aedb79; --accent-ink:#a8e065; --gold:#d9a520; --red:#e0714f;
  --s1:#3987e5; --seq1:#184f95; --seq3:#2a78d6; --seq5:#5598e7; --seq7:#b7d3f6;
  --deemph:#3a3a38; --land:#2a3320; color-scheme:dark; }}
.coe-program *{box-sizing:border-box}
.coe-wrap{max-width:1180px;margin:0 auto}
/* below ~1150px there's no room left for an outer gutter anyway — go flush
   to the viewport edge instead of holding a fixed side margin, matching the
   full-width treatment used elsewhere on the page at the same breakpoint */
@media screen and (max-width:1150px){
  .coe-program{padding-left:0;padding-right:0}
}

/* ---- line 1: the year ---- */
.coe-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px}
/* the year control and "Program" read as one phrase ("2025 Program"), so they
   share their own nowrap group with a tight gap — never breaking onto two
   lines the way plain flex-wrap would allow at narrow widths. The subtitle
   still gets its own line via flex-basis:100% below. */
.coe-headline{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0}
/* the year is a control, not a heading: a soft filled box (no border) plus the
   caret is what signals "you can change this" — the caret alone reads as decoration */
.coe-yearsel{position:relative;display:inline-flex;align-items:center;min-width:0;
  background:rgba(74,124,31,.10);border-radius:12px;padding:2px 30px 2px 12px;
  transition:background .15s}
.coe-yearsel:hover{background:rgba(74,124,31,.18)}
@media (prefers-color-scheme:dark){
  .coe-yearsel{background:rgba(143,206,79,.14)}
  .coe-yearsel:hover{background:rgba(143,206,79,.24)}}
/* !important throughout: the host theme (Jupiter) ships its own select{}
   reset that otherwise wins this fight regardless of source order — its
   computed styles were literally showing up in DevTools over ours. */
.coe-yearsel select{
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  background:none!important;border:0!important;padding:0!important;margin:0;cursor:pointer;
  display:inline-block!important;width:auto!important;min-width:0!important;
  font:700 clamp(29px,4.6vw,42px)/1.15 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  letter-spacing:-.02em;color:var(--ink)!important;}
.coe-yearsel:focus-within{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}
.coe-yearsel select:focus{outline:none}
.coe-yearsel::after{content:"";position:absolute;right:12px;top:50%;width:9px;height:9px;
  border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.coe-head h1{margin:0;font:700 clamp(26px,4.2vw,38px)/1.15 system-ui,-apple-system,sans-serif;
  letter-spacing:-.02em;color:var(--ink)}
.coe-head .coe-sub{flex-basis:100%;margin:6px 0 0;color:var(--ink2);font-size:14.5px}

/* ---- line 2: country buttons ---- */
.coe-countries{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.coe-cbtn{
  font:600 14px/1 system-ui,-apple-system,sans-serif;letter-spacing:.01em;
  padding:10px 15px;border-radius:999px;cursor:pointer;position:relative;
  background:var(--panel);color:var(--ink2);border:1px solid var(--line);
  transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.coe-cbtn:hover{border-color:var(--accent);color:var(--ink)}
.coe-cbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){.coe-cbtn[aria-pressed="true"]{color:#10160a}}
.coe-cbtn .coe-dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--gold);margin-left:7px;vertical-align:middle}
.coe-cbtn[aria-pressed="true"] .coe-dot{background:#fff}
/* "soon" = results are published but the auction has not been held */
.coe-cbtn .coe-soon{display:inline-block;margin-left:7px;padding:2px 6px;border-radius:5px;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--gold);color:#fff;vertical-align:middle;line-height:1.2}
@media (prefers-color-scheme:dark){.coe-cbtn .coe-soon{color:#10160a}}
.coe-cbtn[aria-pressed="true"] .coe-soon{background:#fff;color:var(--accent-ink)}
/* the idle nudge */
.coe-cbtn.coe-hint{animation:coePulse 1.9s ease-in-out infinite}
@keyframes coePulse{0%,100%{box-shadow:0 0 0 0 rgba(74,124,31,.42)}50%{box-shadow:0 0 0 7px rgba(74,124,31,0)}}
/* hangs BELOW the button: the subtitle sits directly above the country row,
   and a label placed above would land on top of it */
.coe-hintlabel{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
  background:var(--accent);color:#fff;font:600 11.5px/1 system-ui,sans-serif;
  padding:6px 10px;border-radius:7px;white-space:nowrap;pointer-events:none;
  z-index:5;animation:coeFade .35s ease-out}
@media (prefers-color-scheme:dark){.coe-hintlabel{color:#10160a}}
.coe-hintlabel::after{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:var(--accent)}
@keyframes coeFade{from{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){
  .coe-cbtn.coe-hint{animation:none;box-shadow:0 0 0 3px rgba(74,124,31,.35)}
  .coe-hintlabel{animation:none}}

/* ---- panels ---- */
/* no card chrome any more — the map and its controls sit on the page itself,
   not framed in a bordered/filled box. Side padding stays so the legend and
   controls text (unlike the map, which bleeds via .coe-mapwrap) don't touch
   the viewport edge; bottom padding/margin drop to 0 since .coe-controls now
   owns the "space before the next section" job itself (see below). */
.coe-panel{padding:14px 16px 0;margin:0}
/* the gap above this row (from the legend) is deliberately equal to the gap
   below it (before "Winning farms"): margin-top:26px here, and the panel's
   own bottom spacing is zeroed so the only thing left on that side is
   .coe-rhead's existing margin-top:26px — same 26px on both sides. */
.coe-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:center;margin:26px 0 0}
.coe-controls select{font:inherit!important;font-size:13px!important;color:var(--ink)!important;
  background-color:var(--panel)!important;display:inline-block!important;
  width:auto!important;min-width:0!important;
  border:1px solid var(--line)!important;border-radius:8px!important;padding:5px 26px 5px 9px!important;
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234a5340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 9px center!important;background-size:10px 6px!important}
@media (prefers-color-scheme:dark){
  .coe-controls select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c3cbb2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}}

/* the map bleeds to the panel's edge like the results table does — cancel
   exactly the panel's own side padding so it lands flush */
.coe-mapwrap{position:relative;margin:0 -16px}
.coe-mapbox{border-radius:10px;overflow:hidden;background:var(--bg2)}
.coe-zoomctl{position:absolute;top:12px;right:12px;z-index:5}
.coe-zoombtn{width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--ink2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.coe-zoombtn:hover{color:var(--ink);border-color:var(--accent)}
.coe-zoommenu{position:absolute;top:calc(100% + 6px);right:0;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 22px rgba(0,0,0,.18);
  padding:4px;min-width:170px;z-index:6}
.coe-zoommenu button{display:block;width:100%;text-align:left;font:600 13px/1 system-ui,sans-serif;
  padding:8px 10px;border:0;background:none;color:var(--ink2);border-radius:6px;cursor:pointer}
.coe-zoommenu button:hover{background:var(--bg2);color:var(--ink)}
.coe-zoommenu button[aria-checked="true"]{color:var(--accent-ink);font-weight:700}
@media (prefers-color-scheme:dark){.coe-zoommenu button[aria-checked="true"]{color:var(--accent)}}

.coe-legend{display:flex;flex-wrap:wrap;gap:4px 13px;margin-top:9px;font-size:12px;color:var(--ink2)}
.coe-legend .it{display:inline-flex;align-items:center;gap:5px}
.coe-legend .sw{width:10px;height:10px;border-radius:50%;flex:none}
.coe-note{font-size:12px;color:var(--muted);margin-top:8px}

/* ---- results ---- */
.coe-rhead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:26px 0 12px}
/* !important: same reason as the select fight elsewhere in this file — the
   host theme styles heading elements directly, with enough weight to beat a
   plain inherited color, so "Winning farms" needs to say so explicitly the
   way "Program" already does. */
.coe-rhead h2{margin:0;font-size:clamp(22px,3.4vw,32px);font-weight:700;
  letter-spacing:-.01em;color:var(--ink)!important}
.coe-rhead .coe-count{color:var(--muted);font-size:13.5px}
.coe-rhead .coe-src{color:var(--accent-ink);font-size:13.5px;font-weight:600;
  text-decoration:none;border-bottom:1px solid rgba(74,124,31,.35);padding-bottom:1px}
.coe-rhead .coe-src:hover{border-bottom-color:var(--accent)}
/* copies the current address-bar link — same one whether it's this table
   view or a single farm story, since the URL always mirrors either */
.coe-share{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;
  padding:2px 5px;border-radius:6px;vertical-align:middle;opacity:.7}
.coe-share:hover{opacity:1;background:var(--bg2)}
/* inside "Winning farms" specifically, it reads at the heading's own size —
   part of the title, not a smaller icon tacked on beside it */
.coe-rhead h2 .coe-share{font-size:inherit}
@media (prefers-color-scheme:dark){.coe-rhead .coe-src{color:var(--accent);
  border-bottom-color:rgba(143,206,79,.4)}}
.coe-tabs{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-left:auto}
.coe-tabs button{font:600 13px/1 system-ui,sans-serif;padding:9px 15px;border:0;
  background:none;color:var(--ink2);cursor:pointer;white-space:nowrap}
.coe-tabs button[aria-selected="true"]{background:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){.coe-tabs button[aria-selected="true"]{color:#10160a}}

table.coe-t{width:100%;border-collapse:collapse;font-size:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.coe-t th{text-align:left;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:11px 12px;border-bottom:1px solid var(--line);
  background:var(--bg2);white-space:nowrap}
table.coe-t td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
/* the mobile compact row (.triad) is a duplicate stand-in for three desktop
   cells, built for the narrow layout only — hidden by default; the mobile
   media query below is what actually shows it and hides the desktop three.
   Selector kept at the SAME specificity as that override (no "table" prefix
   here) so source order decides the winner, not specificity — otherwise
   this rule would win even inside the media query and the row never shows. */
.coe-t td.triad{display:none}
table.coe-t tbody tr{cursor:pointer}
table.coe-t tbody tr:hover{background:var(--bg2)}
table.coe-t tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.coe-t .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.coe-t .rank{font-weight:700;color:var(--ink);white-space:nowrap}
.coe-t .rank .nw{color:var(--gold)}
.coe-t .farmcell{display:flex;align-items:center;gap:10px;min-width:0;text-align:left!important}
.coe-t .farmcell img,.coe-t .farmcell .coe-noimg{width:40px;height:40px;border-radius:8px;
  object-fit:cover;flex:none;background:var(--land);display:block}
.coe-t .farmcell .coe-noimg{background:
  repeating-linear-gradient(45deg,var(--land),var(--land) 5px,var(--bg2) 5px,var(--bg2) 10px)}
.coe-t .farmcell .fn{font-weight:600;line-height:1.25;text-align:left!important}
.coe-t .farmcell .fw{color:var(--muted);font-size:12.5px;line-height:1.25;text-align:left!important}
.coe-t .score{font-weight:700}
.coe-t .price{font-weight:700;color:var(--accent-ink)}
@media (prefers-color-scheme:dark){.coe-t .price{color:var(--accent)}}
.coe-t .buyer{color:var(--ink2);font-size:13px}
.coe-t .nosale{color:var(--muted);font-style:italic;font-size:13px}
.coe-t tr.coe-cat td{background:var(--bg2);font:700 11.5px/1 system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);padding:9px 12px}
@media (prefers-color-scheme:dark){.coe-t tr.coe-cat td{color:var(--accent)}}
.coe-empty{padding:30px 16px;text-align:center;color:var(--muted);font-size:14px}

/* ---- mid-width: auction results drops Lot value ---- */
/* between the mobile card breakpoint and 950px, Lot value is the one column
   that goes — not touched below 720px, where the mobile card layout (with
   its own compact triad row) already applies regardless of this rule */
@media (min-width:721px) and (max-width:950px){
  table.coe-auct th:nth-child(6),
  table.coe-auct td[data-l="Lot value"]{display:none}
}

/* ---- mobile: the table becomes cards ---- */
@media (max-width:720px){
  table.coe-t,.coe-t tbody,.coe-t tr,.coe-t td{display:block;width:100%}
  .coe-t thead{position:absolute;left:-9999px}
  .coe-t{border:0;background:none}
  .coe-t tbody tr{background:var(--panel);border:1px solid var(--line);border-radius:12px;
    margin-bottom:10px;padding:12px 13px;position:relative}
  .coe-t tbody tr:hover{background:var(--panel)}
  .coe-t td{border:0;padding:2px 0}
  .coe-t td[data-l]:not(.coe-mfirst):not(.rank)::before{content:attr(data-l) " ";
    color:var(--muted);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
    font-weight:700;display:inline-block;min-width:92px}
  .coe-t td.coe-mhide{display:none}
  .coe-t .farmcell img{width:52px;height:52px}
  .coe-t td.coe-mfirst{padding-bottom:8px}
  .coe-t tr.coe-cat{background:none;border:0;margin:16px 0 6px;padding:0}
  .coe-t tr.coe-cat td{background:none;padding:0;color:var(--accent-ink)}
  /* rank rides top-right as a badge; it must not inherit the block width of
     its siblings or it stretches across the card and collides with the photo */
  .coe-t td.rank{position:absolute;top:10px;right:12px;width:auto;padding:3px 9px;
    font-size:13px;line-height:1;background:var(--bg2);border-radius:999px;
    border:1px solid var(--line2)}
  .coe-t td.rank::before{content:"#";color:var(--muted);margin-right:1px;font-weight:700}
  .coe-t td.coe-mfirst{padding-right:44px}

  /* score/variety/process (lots) and score/price/lot value (auction) ride
     one compact row instead of three stacked full-width lines — .coe-donly
     is the normal desktop cell, hidden here; .triad is the mobile stand-in,
     shown here, each value with its label below it rather than beside it */
  .coe-t td.coe-donly{display:none}
  .coe-t td.triad{display:flex;gap:10px;width:100%;padding:4px 0}
  .coe-t td.triad .tc{display:flex;flex-direction:column;min-width:0}
  .coe-t td.triad .tc:first-child{flex:0 0 auto;min-width:40px}
  .coe-t td.triad .tc:not(:first-child){flex:1 1 0}
  .coe-t td.triad .tv{font-weight:600;font-size:13.5px}
  .coe-t td.triad .tl{color:var(--muted);font-size:10.5px;text-transform:uppercase;
    letter-spacing:.04em;font-weight:700;margin-top:2px}

  /* the winning bidder keeps its own full-width row, just a bit bigger and
     bolder — the one line that reads like a credit, not a data field */
  .coe-t .buyer{font-size:14.5px;font-weight:700;color:var(--ink)}
}

/* ---- lot detail ---- */
.coe-lb{position:fixed;inset:0;background:rgba(10,14,6,.74);z-index:9999;display:none;
  align-items:center;justify-content:center;padding:20px}
.coe-lb .p{background:var(--panel);border-radius:16px;max-width:980px;width:100%;
  max-height:92vh;overflow:auto;display:grid;grid-template-columns:1.05fr 1fr}
/* the host theme's header is transparent and sits fixed over the page, so a
   perfectly centered panel lands partly underneath it and clips the title —
   nudge it down clear of that on desktop only */
@media (min-width:801px){.coe-lb .p{margin-top:50px}}
@media (max-width:800px){.coe-lb .p{grid-template-columns:1fr}}
.coe-lb .shots{background:var(--land)}
/* a fixed aspect-ratio reserves the box before the image data arrives, so
   loading a photo never shifts the text below it — the story is readable
   and scrollable immediately, on a layout that doesn't move once it's up.
   The photo just fades into its already-reserved space when it's ready. */
.coe-lb .shots img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;
  opacity:0;transition:opacity .4s ease}
.coe-lb .shots img.coe-loaded{opacity:1}
.coe-lb .info{padding:22px 24px}
/* !important: the theme's own .master-holder content wrapper styles h3/p
   tags directly — a rule that targets an element itself always wins over
   inherited color from an ancestor, no matter that ancestor's specificity,
   so setting color on .story alone (below) doesn't reach its own <p> tags */
.coe-lb h3{margin:0 0 3px;font-size:22px;letter-spacing:-.01em;color:var(--ink)!important}
.coe-lb .loc{color:var(--ink2);font-size:14px;margin-bottom:14px}
.coe-lb .stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.coe-lb .stat{background:var(--bg2);border-radius:10px;padding:9px 11px}
.coe-lb .stat .l{font-size:11.5px;color:var(--muted)}
.coe-lb .stat .v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.coe-lb .lab{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;margin-top:14px}
.coe-lb .chips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0}
.coe-lb .chip{font-size:11.5px;border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;color:var(--ink2);background:var(--bg2)}
.coe-lb .story{font-size:13.5px;color:var(--ink);line-height:1.55;max-height:460px;
  overflow:auto;margin-top:7px}
.coe-lb .story p{color:var(--ink)!important}
.coe-lb .x{position:absolute;top:14px;right:18px;font-size:30px;line-height:1;color:#fff;
  background:none;border:0;cursor:pointer}
/* prev/next: step through whatever list this lot was opened from — the
   table's current rows, or the map's currently plotted markers. Hidden via
   JS (display:none) when there's nothing to step to. */
.coe-lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border-radius:50%;border:0;background:rgba(10,14,6,.45);color:#fff;font-size:26px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1}
.coe-lb .nav:hover{background:rgba(10,14,6,.65)}
.coe-lb .prev{left:14px}
.coe-lb .next{right:14px}
@media (max-width:600px){.coe-lb .nav{width:38px;height:38px;font-size:22px}}
.coe-tip{position:fixed;pointer-events:none;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);box-shadow:0 6px 22px rgba(0,0,0,.18);border-radius:10px;
  padding:8px 11px;font-size:12.5px;max-width:290px;z-index:9998;display:none;line-height:1.42}
.coe-tip .h{font-weight:700}
.coe-tip .m{color:var(--ink2)}
/* the tip itself ignores pointer events (so hovering doesn't block the map
   underneath) — this one piece opts back in so it's tappable on touch */
.coe-tip .open{pointer-events:auto;display:inline-block;margin-top:5px;
  font-weight:700;color:var(--accent-ink);cursor:pointer}
@media (prefers-color-scheme:dark){.coe-tip .open{color:var(--accent)}}