/* FieldMatrix landing page: chapter 03, grain (owner E4, SPEC 4.5). Every selector starts with #grain.
   Layouts: side by side >=1100 (copy cols 1-5, stage cols 6-12); stacked under 1100; compact board under 640.
   Colors keep one meaning each: neutral ink expected, water contracted, green in the bins,
   clay needs a home / trucking, lime = computed (scan line, best-check edge, the spread).
   No amber here: amber means "your field" only. */

/* JS sets these on the one element that uses each, so they need not inherit: a change then restyles that element
   alone, not the whole chapter under it. (No initial value, so each var() fallback still applies until JS sets it.) */
@property --g-footh{syntax:'*';inherits:false}
@property --g-subh{syntax:'*';inherits:false}
@property --g-lift{syntax:'*';inherits:false}

#grain{
  --g-row:64px;                  /* board row height (JS reads it) */
  --g-pad:20px;                  /* board side padding */
  /* BUYER never gets narrower than "Ethanol plant · 47 mi" (about 186px), so the miles are never cut */
  --g-cols:minmax(12rem,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
}
@media (max-height:820px){ #grain{--g-row:54px} }

/* ---------- frame ---------- */
#grain .g-grid{position:relative;height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);
  align-items:center;padding-top:var(--top-safe);padding-bottom:64px}
/* the copy column's slate sits on the same line as Together's and Compare's: var(--top-safe) + 14svh (this
   grid's padding-top is --top-safe), whatever the height of the copy under it. --g-lift (JS, side by side only)
   raises it just enough on short screens that the closing line never meets the footnote; 0 everywhere else. */
#grain .g-copy{grid-column:1 / span 5;align-self:start;margin-top:calc(14vh - var(--g-lift,0px));margin-top:calc(14svh - var(--g-lift,0px));
  position:relative;z-index:var(--z-overlay);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
/* the same size as the other chapters' H2 up to 1440 (4vw); held at that 57.6px above it, because at the .h2
   max of 60px "Know where every" (488px) no longer fits the 476px copy column and the H2 would break to 3 lines.
   The -12px lends it half the column gap as insurance against wider font rendering; the text never reaches it. */
#grain .g-copy .h2{font-size:clamp(2rem,4vw,3.6rem);margin-right:-12px}
#grain .g-copy .sub{margin-top:-2px}
#grain .g-close{margin-top:10px;max-width:30ch;padding-top:18px;border-top:1px solid var(--hair-2);color:var(--ink);font-size:1.1875rem;line-height:1.45}
#grain .g-stage{grid-column:6 / span 7;position:relative;z-index:var(--z-stage);height:min(calc(100vh - var(--top-safe) - 120px),660px)}
@supports (height:1svh){ #grain .g-stage{height:min(calc(100svh - var(--top-safe) - 120px),660px)} }
#grain .g-act{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
/* side by side, JS starts Act A level with the H2's second line (padding-top) where the stage has the room */
#grain .g-a.g-a--top{justify-content:flex-start}

/* ---------- Act A: readout ---------- */
#grain .g-a-in{width:100%;max-width:100%}          /* JS sets the meter's exact width inline */
#grain .g-read{display:flex;flex-direction:column;justify-content:flex-end;gap:12px;margin-bottom:24px}
#grain .g-read-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px}
#grain .g-rl{display:grid;color:var(--ink-2);white-space:nowrap}
#grain .g-rl>span{grid-area:1/1}
#grain .g-per{color:var(--ink-3);white-space:nowrap}
#grain .g-rv{display:grid}
#grain .g-rv>span{grid-area:1/1;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:14px;row-gap:4px}
#grain .g-num{font:500 clamp(2.5rem,4.6vw,4.25rem)/1 var(--f-mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
#grain .g-u{font:500 clamp(1.125rem,1.7vw,1.5rem)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink-2)}
#grain .g-rv2 .g-num,#grain .g-rv2 .g-u{color:var(--clay)}

/* ---------- Act A: the tick meter (canvas) ---------- */
#grain .g-meter{position:relative;height:120px}
#grain .g-scan{top:-10px;height:calc(100% + 20px);opacity:0}

/* segment labels: a 2px rule in the segment's color, the number, the words.
   JS sets the three column widths to each segment's exact tick span (whole columns on the phone grid). */
#grain .g-segs{display:grid;grid-template-columns:40% 27.7% 32.3%;margin-top:14px}
#grain .g-seg{position:relative;min-width:0;padding:12px 10px 0 0;display:flex;flex-direction:column;gap:3px}
#grain .g-seg::before{content:"";position:absolute;left:0;right:4px;top:0;height:2px;border-radius:2px;background:var(--c)}
#grain .g-seg b{font:500 1.125rem/1.2 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--c)}
#grain .g-seg span{font:400 1rem/1.3 var(--f-sans);color:var(--ink-2)}
#grain .g-seg--water{--c:var(--water)}
#grain .g-seg--green{--c:var(--green)}
#grain .g-seg--clay{--c:var(--clay)}

/* ---------- Act A: trucks ---------- */
/* trucks left, words right; the words drop under the trucks when they would get narrower than 200px */
#grain .g-haul{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:30px}
#grain .g-trucks{flex:none;display:grid;grid-template-columns:repeat(var(--cols,7),28px);gap:7px 9px;color:var(--clay)}
#grain .g-truck{display:block;width:28px;height:17px;overflow:visible}
#grain .g-trk-rest{opacity:.3}                    /* the part of the last icon that holds no load */
#grain .g-haul-t{flex:1 1 200px;max-width:30ch;font:400 1.125rem/1.5 var(--f-sans);color:var(--ink-2)}
#grain .g-haul-t b{font-weight:600;color:var(--ink)}
#grain .g-tper{margin-bottom:6px;color:var(--ink-3);white-space:nowrap}

/* ---------- Act B: the buyers board ---------- */
#grain .g-title{margin-bottom:10px;color:var(--ink)}
/* the sort label (left) and the board's scope (right); when they do not fit on one line the scope wraps above
   the sort label (wrap-reverse), so it still reads as the board's caption */
#grain .g-sort{display:flex;flex-wrap:wrap-reverse;justify-content:space-between;align-items:baseline;gap:2px 20px;margin-bottom:22px}
#grain .g-sortl{display:grid;color:var(--ink-2)}
#grain .g-sortl>span{grid-area:1/1}
#grain .g-scope{color:var(--ink-3)}
#grain .g-board{width:min(720px,100%)}
#grain .g-head,#grain .g-row{display:grid;grid-template-columns:var(--g-cols);align-items:center;column-gap:12px;padding-inline:var(--g-pad)}
#grain .g-head{padding-bottom:12px;border-bottom:1px solid var(--hair-2);font:500 .875rem/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
#grain .g-head>span{white-space:nowrap}
#grain .g-head>span:not(:first-child){text-align:right}
#grain .g-h-t{color:var(--clay)}
#grain .g-h-bp{display:none}
#grain .g-arr{display:inline-block;margin-left:6px;font-style:normal;letter-spacing:0;color:var(--lime)}
#grain .g-rows{position:relative}
#grain .g-row{position:absolute;left:0;right:0;top:0;height:var(--g-row);background:var(--night-2);border-bottom:1px solid var(--hair)}
#grain .g-edge{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--lime);opacity:0}
/* never an ellipsis: if the cell is ever too narrow, the miles wrap onto their own line instead */
#grain .g-buy{min-width:0;font:400 1.125rem/1.3 var(--f-sans);color:var(--ink)}
#grain .g-bt,#grain .g-bm{white-space:nowrap}
#grain .g-sep{margin-left:.3em}                    /* the break space is sans; this evens it with the mono space after the dot */
#grain .g-bm{font:500 1rem/1.3 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}
#grain .g-bp{display:none}
#grain .g-c.num{font:500 1.25rem/1 var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}
#grain .g-post{color:var(--ink-2)}
#grain .g-trk{display:grid;justify-items:end;color:var(--clay)}
#grain .g-trk>span{grid-area:1/1}
#grain .g-dash{color:var(--ink-3)}
#grain .g-keep{color:var(--ink)}
/* inline-block so it can rise as it fades in; a row shows its final value only once its trucking has landed */
#grain .g-kv{display:inline-block}
#grain .g-kv.is-dash{color:var(--ink-3)}
/* the annotation opens under the top row after the re-sort; its lime edge continues the row's */
#grain .g-strip{position:absolute;left:0;right:0;top:var(--g-row);min-height:36px;display:flex;align-items:center;
  padding:7px var(--g-pad);background:var(--night-2);border-bottom:1px solid var(--hair);opacity:0;z-index:1}
#grain .g-strip .g-edge{opacity:1}
#grain .g-note{font:600 1rem/1.3 var(--f-sans);color:var(--lime)}
#grain .g-ns{display:inline-block}                /* one per sentence: a narrow strip breaks between them */

/* payoff */
#grain .g-pay{display:flex;align-items:center;gap:24px;margin-top:30px}
#grain .g-pay-n{flex:none;font-size:clamp(3rem,6.2vw,5.5rem);color:var(--lime)}
#grain .g-pay-t{display:flex;flex-direction:column;gap:4px;max-width:36ch}
#grain .g-pay-t .h3{color:var(--ink)}
#grain .g-pay-t .body{color:var(--ink-2)}
#grain .g-close-s{display:none}

/* ---------- footnotes: bottom-left of the frame ---------- */
#grain .g-foot{position:absolute;left:0;right:0;bottom:24px;z-index:var(--z-overlay);pointer-events:none}
#grain .g-foot-in{display:grid;max-width:46ch}
#grain .g-foot-in>p{grid-area:1/1;align-self:end}
/* side by side, the footnote keeps to the copy column (cols 1-5), so it never runs under the payoff */
@media (min-width:1100px){ #grain .g-foot-in{max-width:calc((5 * 100% - 7 * var(--gap)) / 12)} }

/* ---------- stacked: copy above the stage (< 1100) ---------- */
@media (max-width:1099px){
  #grain .g-grid{display:flex;flex-direction:column;align-items:stretch;padding-top:calc(var(--top-safe) + 20px);padding-bottom:calc(var(--g-footh,36px) + 44px)}
  #grain .g-copy{gap:10px;padding-right:0;margin-top:0;align-self:auto}
  #grain .g-copy .h2{margin-right:0}
  /* the subline shows only in the opening 12%, over the top of the stage, where the readout arrives next */
  #grain .g-sub{position:absolute;left:0;right:0;top:calc(100% + 22px);margin:0;max-width:52ch}
  #grain .g-close{display:none}
  #grain .g-stage{flex:1 1 auto;height:auto;min-height:0;margin-top:22px}
  #grain .g-act{justify-content:flex-start}
  #grain .g-a{padding-top:var(--g-subh,0px)}         /* Act A waits under the subline, then glides up (JS, 9-13) */
  /* the title keeps the closing line's height (JS min-height) and sits at the bottom of it, so it stays with the
     board it names, and the closing line that takes its place at 92 ends on the same line, clear of the sort label */
  #grain .g-title{display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:14px}
  #grain .g-close-s{display:block;position:absolute;left:0;right:0;top:0;max-width:40ch;font-size:1.1875rem;line-height:1.4;color:var(--ink)}
  #grain .g-foot-in{max-width:60ch}
}

/* ---------- phones (< 760) ---------- */
@media (max-width:759px){
  #grain .g-grid{padding-top:calc(var(--top-safe) + 16px);padding-bottom:calc(var(--g-footh,54px) + 30px)}
  #grain .g-copy .h2{font-size:clamp(1.9rem,8vw,2.4rem)}
  #grain .g-sub{top:calc(100% + 16px)}
  #grain .g-stage{margin-top:16px}
  #grain .g-read{gap:8px;margin-bottom:16px}
  #grain .g-num{font-size:clamp(2.1rem,10vw,2.75rem)}
  #grain .g-u{font-size:1.125rem}
  #grain .g-segs{margin-top:12px}
  #grain .g-haul{gap:12px 16px;margin-top:20px;align-items:flex-start}
  #grain .g-trucks{grid-template-columns:repeat(var(--cols,7),18px);gap:5px 6px}
  #grain .g-truck{width:18px;height:11px}
  #grain .g-haul-t{font-size:1rem;line-height:1.45}
  #grain .g-title{font-size:1.25rem;margin-bottom:12px}
  #grain .g-sort{margin-bottom:14px;row-gap:0}
  #grain .g-sort .label{line-height:1.25}          /* the scope and the sort label: two lines here, kept close */
  #grain .g-pay{flex-direction:column;align-items:flex-start;gap:8px;margin-top:18px}
  #grain .g-pay-n{font-size:3rem}
  #grain .g-pay-t .h3{display:none}
  #grain .g-pay-n::after{content:" a bushel";font:600 1.25rem/1 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
  #grain .g-close-s{font-size:1.0625rem}
  #grain .g-foot{bottom:16px}
}
/* narrow phones: a little less tracking, so the scope keeps to one line (360px leaves it about 17px to spare) */
@media (max-width:419px){ #grain .g-sort .label{letter-spacing:.1em} }

/* ---------- compact board (< 640): BUYER (miles · posted) / TRUCKING / YOU KEEP ----------
   (the 4-column board needs about 600px once BUYER keeps its 12rem) */
@media (max-width:639px){
  #grain{--g-row:60px;--g-pad:14px;--g-cols:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
  #grain .g-post,#grain .g-h-p{display:none}
  #grain .g-h-bp{display:inline}
  #grain .g-head{letter-spacing:.03em;column-gap:8px;padding-bottom:10px}
  #grain .g-row{column-gap:8px}
  #grain .g-arr{display:none}
  #grain .g-buy{font-size:1rem;line-height:1.3}
  #grain .g-bm{display:block;font-size:.875rem}
  #grain .g-sep{display:none}
  #grain .g-bp{display:inline}
  #grain .g-c.num{font-size:1.0625rem}
  #grain .g-note{font-size:.9375rem}
  #grain .g-strip{min-height:34px}
}

/* ---------- short stacked screens: JS adds .g-tight when an act would not fit the frame ---------- */
#grain.g-tight{--g-row:50px}
#grain.g-tight .g-read{gap:6px;margin-bottom:12px}
#grain.g-tight .g-num{font-size:2.125rem}
#grain.g-tight .g-u{font-size:1.0625rem}
#grain.g-tight .g-segs{margin-top:10px}
#grain.g-tight .g-seg{padding-top:9px}
#grain.g-tight .g-seg b{font-size:1rem}
#grain.g-tight .g-seg span{font-size:.9375rem;line-height:1.25}
#grain.g-tight .g-haul{margin-top:14px}
#grain.g-tight .g-haul-t{font-size:.9375rem;line-height:1.4}
#grain.g-tight .g-title{font-size:1.125rem}
#grain.g-tight .g-sort{margin-bottom:10px}
#grain.g-tight .g-head{padding-bottom:8px}
#grain.g-tight .g-strip{min-height:30px;padding-block:5px}
#grain.g-tight .g-note{font-size:.875rem}
#grain.g-tight .g-pay{flex-direction:row;align-items:center;gap:14px;margin-top:14px}
#grain.g-tight .g-pay-n{font-size:2.5rem}
#grain.g-tight .g-pay-n::after{content:none}
#grain.g-tight .g-pay-t .h3{display:block;font-size:1.0625rem}
#grain.g-tight .g-pay-t .body{font-size:.9375rem;line-height:1.4}
#grain.g-tight .g-close-s{font-size:1rem}
/* tight phones: "a bushel" leads the payoff sentence on its first line instead of taking a line of its own
   (inline, so these two only fade; the number beside them still rises) */
/* short phones: the scope label's second line is paid for by 2px a row and a little spacing */
@media (max-width:639px){ #grain.g-tight{--g-row:48px} }
@media (max-width:759px){
  #grain.g-tight .g-title{margin-bottom:10px}
  #grain.g-tight .g-sort{margin-bottom:8px}
  #grain.g-tight .g-pay-t{display:block;font-size:.9375rem;line-height:1.4;text-wrap:pretty}
  #grain.g-tight .g-pay-t .h3,#grain.g-tight .g-pay-t .body{display:inline}
  #grain.g-tight .g-pay-t .h3{margin-right:.3em}
}

/* short side-by-side screens (a 1080p laptop at 150% leaves about 1280 x 620): with the footnote in the copy
   column, the stage can use the frame down to 24px above the bottom. JS adds .g-tight if an act still does
   not fit, and lifts the copy column (--g-lift) if its closing line would meet the footnote. */
@media (min-width:1100px) and (max-height:760px){
  #grain .g-grid{padding-bottom:24px}
  #grain .g-stage{height:calc(100vh - var(--top-safe) - 40px)}
  @supports (height:1svh){ #grain .g-stage{height:calc(100svh - var(--top-safe) - 40px)} }
  #grain.g-tight .g-pay-n{font-size:3.25rem}
  #grain.g-tight .g-pay-t .h3{font-size:1.25rem}
  #grain.g-tight .g-pay-t .body{font-size:1rem}
}

/* ---------- the meter as a 15 x 10 tick grid (JS sets .is-grid when it has under 480px) ----------
   The grid fills column by column, so each label sits under the columns its color fills. */
#grain.is-grid .g-seg{padding-right:6px}
#grain.is-grid .g-seg span{font-size:.9375rem;line-height:1.25}
#grain.is-grid .g-scan{display:none}

/* ---------- static (?static=1, reduced motion): Act A's final meter above Act B's final board ---------- */
#grain.is-static .g-grid{height:auto;align-items:start;padding-block:calc(var(--top-safe) + 24px) 32px}
#grain.is-static .g-copy{margin-top:0}
#grain.is-static .g-stage{height:auto;margin-top:0}
#grain.is-static .g-act{position:relative;inset:auto}
#grain.is-static .g-b{margin-top:72px}
#grain.is-static .g-rv1,#grain.is-static .g-rl1,#grain.is-static .g-s1,#grain.is-static .g-arr1,
#grain.is-static .g-fa,#grain.is-static .g-scan{display:none}
#grain.is-static .g-foot{position:relative;bottom:auto;padding-bottom:64px}
@media (max-width:1099px){
  #grain.is-static .g-grid{align-items:stretch}      /* the board uses the full stage width */
  #grain.is-static .g-sub{position:static;margin-top:4px}
  #grain.is-static .g-stage{margin-top:40px}
  #grain.is-static .g-read{min-height:0}
  #grain.is-static .g-close-s{position:static;margin-top:28px}
}