/* ABBI.027 Keeneland September 2026 field sheet.
   Palette and type inherited from the Saratoga sheet so the team reads a familiar page.
   Every colour is defined on bare :root first, then redefined for dark, so the
   default (system) state and the explicit toggle both resolve. */
:root{
  --paper:#E9EBEE; --surf:#FFFFFF; --surf2:#F3F5F7; --line:#CDD3D9; --line2:#E2E6EA;
  --ink:#12181D; --ink2:#4E5A63; --ink3:#7C878F;
  --claret:#7A2233; --vet:#8F5406; --buy:#1C5A3B; --open:#41505C; --gone:#9AA4AB;
  --vet-bg:#F6EDDE; --buy-bg:#E4EFE8; --against-bg:#F5E7E9; --open-bg:#E6EAEE;
  --pending:#8F5406; --pending-bg:#F6EDDE;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:Georgia,"Iowan Old Style",Palatino,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F1317; --surf:#171D22; --surf2:#1D242A; --line:#2A333B; --line2:#222A31;
  --ink:#E7EBEE; --ink2:#A9B4BC; --ink3:#7C888F;
  --claret:#D3697C; --vet:#DCA24A; --buy:#63B189; --open:#8FA0AC; --gone:#5C666D;
  --vet-bg:#241D10; --buy-bg:#13241B; --against-bg:#26161A; --open-bg:#1A2026;
  --pending:#DCA24A; --pending-bg:#241D10;
}}
:root[data-theme="dark"]{
  --paper:#0F1317; --surf:#171D22; --surf2:#1D242A; --line:#2A333B; --line2:#222A31;
  --ink:#E7EBEE; --ink2:#A9B4BC; --ink3:#7C888F;
  --claret:#D3697C; --vet:#DCA24A; --buy:#63B189; --open:#8FA0AC; --gone:#5C666D;
  --vet-bg:#241D10; --buy-bg:#13241B; --against-bg:#26161A; --open-bg:#1A2026;
  --pending:#DCA24A; --pending-bg:#241D10;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans);
     -webkit-text-size-adjust:100%;overflow-x:hidden}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:40;background:var(--surf);border-bottom:1px solid var(--line)}
.top .bar{display:flex;align-items:baseline;gap:.75rem;padding:.6rem .9rem .4rem;flex-wrap:wrap}
.top h1{margin:0;font:600 15px/1.2 var(--sans);letter-spacing:.01em}
.top .sub{color:var(--ink3);font-size:12px}
.top .spacer{flex:1}
.livedot{font:11px/1 var(--mono);color:var(--ink3);display:inline-flex;align-items:center;gap:.35rem;
         padding:.25rem .5rem;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.livedot b{width:7px;height:7px;border-radius:50%;background:var(--buy);display:inline-block}
.livedot.stale b{background:var(--vet)}
.livedot.off b{background:var(--claret)}
.livedot.off{color:var(--claret);border-color:var(--claret)}

/* ---- day tabs ---- */
.tabs{display:flex;gap:.25rem;overflow-x:auto;padding:0 .9rem .5rem;
      -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tabs button{flex:0 0 auto;background:var(--surf2);color:var(--ink2);border:1px solid var(--line);
             border-radius:7px;padding:.4rem .6rem;font:12px/1.15 var(--sans);cursor:pointer;
             text-align:left;min-width:74px}
.tabs button b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.tabs button .n{font:11px/1 var(--mono);color:var(--ink3)}
.tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink)}
.tabs button[aria-selected="true"] b,.tabs button[aria-selected="true"] .n,
.tabs button[aria-selected="true"]{color:var(--paper)}
.tabs .dark{opacity:.55;font-style:italic}

/* ---- filter bar ---- */
.filters{display:flex;gap:.4rem;flex-wrap:wrap;padding:.5rem .9rem;background:var(--surf2);
         border-bottom:1px solid var(--line)}
.filters input,.filters select{font:12px var(--sans);padding:.35rem .45rem;border:1px solid var(--line);
         border-radius:6px;background:var(--surf);color:var(--ink);min-width:0}
.filters input[type=search]{flex:1 1 160px}
.filters .clear{background:none;border:1px solid var(--line);border-radius:6px;color:var(--ink2);
         font:12px var(--sans);padding:.35rem .55rem;cursor:pointer}
.count{padding:.4rem .9rem;color:var(--ink3);font:11px/1.4 var(--mono)}

/* ---- board ---- */
.boardwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.board{border-collapse:collapse;width:100%;min-width:640px;background:var(--surf)}
.board th{position:sticky;top:0;z-index:5;background:var(--surf2);text-align:left;
          font:600 10px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;
          color:var(--ink3);padding:.45rem .5rem;border-bottom:1px solid var(--line);cursor:pointer;
          white-space:nowrap}
.board th[aria-sort]:after{content:"";margin-left:.25rem}
.board th[aria-sort="ascending"]:after{content:"\25B2"}
.board th[aria-sort="descending"]:after{content:"\25BC"}
.board td{padding:.45rem .5rem;border-bottom:1px solid var(--line2);font-size:13px;vertical-align:top}
.board tr.brow{cursor:pointer}
.board tr.brow:hover td{background:var(--surf2)}
.board .hip{font:600 13px var(--mono);white-space:nowrap}
.board .ped{font-family:var(--serif);line-height:1.25}
.board .ped em{font-style:normal;color:var(--ink3);font-size:11px;display:block}
.board .num{font-family:var(--mono);text-align:right;white-space:nowrap;font-size:12px}
.board .marks{white-space:nowrap;font:11px var(--mono)}
.chip{display:inline-block;padding:.05rem .3rem;border-radius:4px;font:10px/1.5 var(--mono);
      border:1px solid var(--line);color:var(--ink2)}
.chip.vet{background:var(--vet-bg);color:var(--vet);border-color:var(--vet)}
.chip.buy{background:var(--buy-bg);color:var(--buy);border-color:var(--buy)}
.chip.out{background:var(--against-bg);color:var(--claret);border-color:var(--claret)}
.chip.pending{background:var(--pending-bg);color:var(--pending);border-color:var(--pending);
              animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.chip.pending{animation:none}}
tr.isout td{opacity:.45;text-decoration:line-through}

/* ---- drawer (the per-hip brief) ---- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;
       transition:opacity .18s;z-index:50}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--paper);
        transform:translateX(100%);transition:transform .2s;z-index:51;display:flex;flex-direction:column}
.drawer.on{transform:none}
@media (prefers-reduced-motion:reduce){.drawer,.scrim{transition:none}}
.drawer header{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;background:var(--surf);
        border-bottom:1px solid var(--line);position:sticky;top:0}
.drawer header .hipno{font:700 15px var(--mono)}
.drawer header .nm{font-family:var(--serif);font-size:14px;flex:1;min-width:0;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer header button{background:none;border:1px solid var(--line);border-radius:6px;color:var(--ink2);
        font:12px var(--sans);padding:.3rem .5rem;cursor:pointer}
.dbody{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.9rem;flex:1}
.dbody h3{font:600 11px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);
        margin:1.2rem 0 .4rem;padding-bottom:.25rem;border-bottom:1px solid var(--line)}
.dbody h3:first-child{margin-top:0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.2rem .7rem;font-size:13px}
.kv dt{color:var(--ink3);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.kv dd{margin:0}
.prose{font-family:var(--serif);font-size:13.5px;line-height:1.45}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.9rem;padding:0 .9rem}
.dbody table{border-collapse:collapse;width:100%;font-size:12px;min-width:340px}
.dbody th{text-align:left;font:600 10px var(--sans);letter-spacing:.05em;text-transform:uppercase;
        color:var(--ink3);border-bottom:1px solid var(--line);padding:.3rem .35rem}
.dbody td{padding:.3rem .35rem;border-bottom:1px solid var(--line2)}
.bt{font-weight:700;text-transform:uppercase;font-size:11.5px}
.btp{font-style:italic}
.pedgrid{font:11.5px/1.35 var(--mono);white-space:pre;overflow-x:auto;
        -webkit-overflow-scrolling:touch;background:var(--surf);padding:.6rem;border-radius:7px;
        border:1px solid var(--line)}
.absent{color:var(--ink3);font-style:italic;font-size:12px}
.src{color:var(--ink3);font:10px var(--mono);margin-top:.2rem}
.ctl{display:flex;gap:.5rem;flex-wrap:wrap;padding:.7rem .9rem;background:var(--surf);
     border-top:1px solid var(--line)}
.ctl button{flex:1 1 auto;border:1px solid var(--line);border-radius:7px;background:var(--surf2);
     color:var(--ink);font:13px var(--sans);padding:.55rem .4rem;cursor:pointer;min-height:44px}
.ctl button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ctl button.v[aria-pressed="true"]{background:var(--vet);border-color:var(--vet);color:#fff}
.ctl button.b[aria-pressed="true"]{background:var(--buy);border-color:var(--buy);color:#fff}

.banner{padding:.55rem .9rem;font:12px var(--sans);background:var(--vet-bg);color:var(--vet);
        border-bottom:1px solid var(--vet)}
.banner.err{background:var(--against-bg);color:var(--claret);border-color:var(--claret)}
.banner button{margin-left:.5rem;font:12px var(--sans);background:none;border:1px solid currentColor;
        border-radius:5px;color:inherit;padding:.15rem .45rem;cursor:pointer}
.empty{padding:2rem .9rem;text-align:center;color:var(--ink3);font-size:13px}
@media (max-width:520px){
  .board .hide-s{display:none}
  .drawer{width:100%}
}

/* ---------------------------------------------------------------------------
   The "show your working" strip, carried over from the live Saratoga sheet.
   Each tile is a label + a number, and pressing it opens the reasoning and the
   actual lots the number was built from. This is the part of that sheet the team
   uses most: it lets a buyer argue with a figure instead of just reading it.
   --------------------------------------------------------------------------- */
.brief-head{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.7rem}
.brief-head .who{flex:1;min-width:0}
.brief-head .who h3{margin:0;font-family:var(--serif);font-size:16px;line-height:1.25;font-weight:600}
.brief-head .who .x{color:var(--ink3);font-weight:400}
.brief-head .meta{margin:.2rem 0 0;font-size:11.5px;color:var(--ink3)}
.pill{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;background:var(--open-bg);color:var(--open);
  white-space:normal;line-height:1.35;max-width:45%;text-align:center}
.t-vet .pill{background:var(--vet-bg);color:var(--vet)}
.t-buy .pill{background:var(--buy-bg);color:var(--buy)}
.t-out .pill{background:var(--against-bg);color:var(--claret)}

.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px;
  align-content:start;margin-bottom:1rem}
.why{position:relative;display:block;min-width:0}
.whyb{display:flex;flex-direction:column;gap:2px;background:var(--surf2);
  border:1px solid var(--line);border-radius:4px;padding:6px 8px;cursor:pointer;
  text-align:left;font:inherit;width:100%;min-width:0;color:var(--ink)}
.whyb:hover{border-color:var(--claret)}
.whyb:focus-visible{outline:2px solid var(--claret);outline-offset:1px}
.whyb em{font:500 9.5px/1.25 var(--sans);font-style:normal;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink3);overflow-wrap:anywhere}
.whyb b{font:600 13px/1.2 var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.whyb[aria-expanded="true"]{border-color:var(--claret);background:var(--surf)}
.whyp{display:block;margin:.5rem 0 1rem;padding:.7rem;background:var(--surf);
  border:1px solid var(--line);border-radius:5px;font-size:13px;line-height:1.45}
.whyp[hidden]{display:none}
.whyp>b{display:block;color:var(--claret);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.35rem}
.whyp p{margin:.35rem 0}
.whyp .cav{font-size:12px;color:var(--ink2);border-left:2px solid var(--vet);padding-left:.5rem}
.whyp .sub{margin-top:.6rem}
.whyp .sub>b{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:.2rem}
.whyp table{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:.3rem}
.whyp th{text-align:left;font:600 9.5px var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink3);border-bottom:1px solid var(--line);padding:.25rem .3rem}
.whyp td{padding:.25rem .3rem;border-bottom:1px solid var(--line2)}
.whyp td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.whyp tr.rna td{color:var(--ink3);font-style:italic}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:4px;margin-top:.3rem}
.board .tick{font:10px var(--mono);color:var(--ink2)}

/* the cross-cutting panels (Our data, Market, First-crop sires) */
.panel{padding:.9rem;max-width:44rem}
.panel h3{font:600 11px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 .6rem;padding-bottom:.25rem;border-bottom:1px solid var(--line)}
.panel p{font-size:13.5px;line-height:1.5;margin:.5rem 0}
.panel p.absent{color:var(--ink2);border-left:2px solid var(--vet);padding-left:.55rem;font-style:normal}
.panel p.src{font:10px var(--mono);color:var(--ink3)}
.panel table{border-collapse:collapse;width:100%;font-size:12px;min-width:340px}
.panel th{text-align:left;font:600 10px var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink3);border-bottom:1px solid var(--line);padding:.3rem .35rem}
.panel td{padding:.3rem .35rem;border-bottom:1px solid var(--line2);vertical-align:top}
.panel td.num{text-align:right;font-family:var(--mono)}