/* FieldMatrix landing page: scout, "Just ask." (E5, SPEC 4.7)
   Not pinned. One scrubbed ScrollTrigger on the input: the question types itself, "enter" pulses,
   the answer rows arrive, then the follow-ups and the closing line. The input has a fixed height and the
   answer area always reserves its space, so scrolling back up un-types with no layout jump.
   The caret blink is the page's only CSS loop, and it runs only while the input is on screen. */

/* one axis: the head is centred over the same 720px column as the input, answer and follow-ups */
#scout .sc-head{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:720px;margin-inline:auto;text-align:center}
#scout .sc-head .eyebrow{color:var(--ink-2)}
#scout .sc-head .sub{margin-top:-4px}
@media (max-width:759px){
  /* phones: the input is full width, so the head keeps its left edge on the same line */
  #scout .sc-head{align-items:flex-start;text-align:left}
}

#scout .sc-stage{width:100%;max-width:720px;margin:clamp(48px,8vh,88px) auto 0}

/* the input: 72px, night-2, 1px lime border (its own element, so the pulse is opacity only), 16px radius */
#scout .sc-input{position:relative;display:flex;align-items:center;gap:14px;height:72px;padding:0 12px 0 20px;
  background:var(--night-2);border-radius:var(--r-card)}
#scout .sc-rim{position:absolute;inset:0;border:1px solid var(--lime);border-radius:inherit;pointer-events:none}
#scout .sc-icon{flex:none;width:24px;height:24px;--mark-tile:transparent;--mark-a:var(--ink-2);--mark-b:var(--lime)}
#scout .sc-icon svg{width:24px;height:24px}
#scout .sc-field{position:relative;flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;
  font:500 1.1rem/1.3 var(--f-mono);letter-spacing:-.01em;color:var(--ink);overflow:clip}
#scout .sc-ph{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--ink-3);white-space:nowrap}
#scout .sc-text{display:block;min-width:0}
#scout .sc-caret{display:inline-block;width:2px;height:1.15em;margin-left:2px;vertical-align:-.2em;background:var(--lime);
  animation:sc-blink 1.06s steps(1,end) infinite;animation-play-state:paused}
#scout .sc-live .sc-caret{animation-play-state:running}
@keyframes sc-blink{0%{opacity:1}50%{opacity:0}}
#scout .sc-send{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;
  background:var(--night-3);border:1px solid var(--hair-2);color:var(--ink-2)}
#scout .sc-send svg{width:20px;height:20px;transform:rotate(-90deg)}
#scout .sc-send-on{position:absolute;inset:-1px;display:grid;place-items:center;border-radius:inherit;background:var(--lime);color:var(--night);opacity:0}

/* the lime line that grows under the input on "enter" */
#scout .sc-line{height:1px;margin:18px 0 0;background:var(--lime);transform-origin:0 50%}

/* the answer: reserved space, rows arrive one at a time */
#scout .sc-ans{margin-top:18px;padding:18px 24px 20px;background:var(--night-2);border:1px solid var(--hair-2);border-radius:var(--r-card)}
#scout .sc-who{display:flex;align-items:center;gap:10px;color:var(--ink-2);margin-bottom:6px}
#scout .sc-who svg{width:18px;height:18px;--mark-tile:transparent;--mark-a:var(--ink-2);--mark-b:var(--lime)}
#scout .sc-table{width:100%;border-collapse:collapse;table-layout:fixed}
#scout .sc-table th,#scout .sc-table td{padding:14px 12px 14px 0;text-align:left;border-bottom:1px solid var(--hair)}
#scout .sc-table th:first-child{width:40%}
#scout .sc-table th:last-child,#scout .sc-table td:last-child{padding-right:0;text-align:right}
#scout .sc-table td:first-child{white-space:nowrap}
#scout .sc-table th:nth-child(2),#scout .sc-table td:nth-child(2){text-align:right}
#scout .sc-table th{font:500 .875rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-top:8px}
#scout .sc-table td{font:500 1.125rem/1.3 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
#scout .sc-table td:nth-child(2){color:var(--water)}
#scout .sc-table td:nth-child(3){color:var(--ink-2)}
#scout .sc-table td>span.sc-cell{display:inline-block}
/* kept-whole phrases: a grouped field range, and each half of the source line (a narrow card breaks at its middot) */
#scout .sc-nw{white-space:nowrap}
#scout .sc-table tbody tr:last-child td{border-bottom:0}
#scout .sc-src{margin-top:12px;padding-top:14px;border-top:1px solid var(--hair);color:var(--ink-2)}
/* follow-ups: inside the 720px column, one per line (no middot needed when stacked) */
#scout .sc-follow{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:24px;color:var(--ink-2);text-align:center}
#scout .sc-follow .sc-dot{display:none}
@media (max-width:759px){
  #scout .sc-follow{align-items:flex-start;text-align:left}
}

#scout .sc-close{max-width:30ch;margin:clamp(40px,7vh,72px) auto 0;font-size:1.6rem;line-height:1.25;text-align:center;color:var(--ink)}
#scout .sc-foot{margin-top:18px;text-align:center}
/* a phone breaks the footnote into two even lines (never "farm." alone); one line on desktop */
#scout [data-k=foot]{text-wrap:balance}

@media (max-width:759px){
  #scout .sc-input{height:60px;padding:0 8px 0 14px;gap:10px}
  #scout .sc-field{font-size:.875rem;line-height:1.25}   /* a three-line question still fits the 60px input */
  #scout .sc-send{width:42px;height:42px}
  #scout .sc-ans{padding:14px 16px 16px}
  #scout .sc-table th{letter-spacing:.06em}
  #scout .sc-table td{font-size:.9375rem;padding-block:12px}
  /* every cell stays on one line: the columns size to their content (the field column takes about half) */
  #scout .sc-table{table-layout:auto}
  #scout .sc-table th:first-child{width:auto}
  #scout .sc-table th,#scout .sc-table td{white-space:nowrap;padding-right:10px}
  #scout .sc-table th:nth-child(2),#scout .sc-table td:nth-child(2){padding-right:16px}   /* keeps rain and normal apart */
  #scout .sc-close{font-size:1.4rem;margin-left:0;text-align:left}
  #scout .sc-foot{text-align:left}
  /* phones: tighter gaps around the exchange (the scrub window follows the input, not the section height) */
  #scout .sc-stage{margin-top:clamp(36px,5vh,48px)}
  #scout .sc-follow{margin-top:20px}
  #scout .sc-close{margin-top:clamp(32px,5vh,44px)}
}
/* phones: grouped names ("Lindgren 3-10, 13") sit at the 14px floor, and the rain header is the one-word
   "Rain" (the question above already says "since planting"), so nothing wraps down to 360px */
@media (max-width:519px){
  #scout .sc-table td:first-child{font-size:.875rem}
  #scout .sc-th-l{display:none}
  #scout th .sc-th-s[hidden]{display:inline !important}   /* beats base.css [hidden]; hidden keeps it out if this sheet fails */
  /* the no-JavaScript fallback table follows the same one-line rule */
  #scout .sec-static th,#scout .sec-static td{white-space:nowrap;padding-right:10px}
  #scout .sec-static td{font-size:.875rem}
  #scout .sec-static th:last-child,#scout .sec-static td:last-child{padding-right:0}
}
@media (max-width:399px){
  #scout .sc-ans{padding-inline:12px}
  #scout .sc-table td{font-size:.875rem}
}
@media (max-width:379px){
  #scout .sc-icon{display:none}
}
/* below the page's 360px floor a grouped name may wrap, only after its comma (scout.js keeps "3-10," whole) */
@media (max-width:359px){
  #scout .sc-table td:first-child{white-space:normal;line-height:1.3}
}