/* farm.css — the farm (the terminal's farm pane, unlisted): the shapes
   js/farm.js paints, written in the store's own tokens. Loaded beside store.css and money.css, which own
   .btn, .btn-gold, .btn-quiet, .mact, .field, .mlist, .mrow, .tag and .msg.
   This sheet adds the plot card, the sprite, the pixel scene and the farm
   palette, and nothing money.css already has. */

:root {
  /* the palette the canvas reads with getComputedStyle, defined FROM the
     store's tokens so the scene recolours with the shell. Three literals, each
     a colour no store token has: tilled earth, its furrow shadow, fence wood. */
  --farm-sky: var(--store-bg);
  --farm-soil: #4a3520;          /* literal 1 of 3: tilled earth */
  --farm-furrow: #2e2013;        /* literal 2 of 3: the furrow shadow */
  --farm-grass: var(--g-deep);
  --farm-leaf: var(--g-core);
  --farm-leaf-hi: var(--g-live);
  --farm-fruit: var(--store-gold);
  --farm-wood: #7a5a2e;          /* literal 3 of 3: fence wood */
  --farm-ink: var(--store-ink);
  --farm-tape: var(--breach-red);
}

/* ── the page ─────────────────────────────────────────────────────────── */
.farm { padding-top: 10px; }
.farm-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.farm-h1 {
  font-family: var(--sg); font-weight: 700; margin: 0;
  font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.1; letter-spacing: -.01em;
}
.farm-chip { font-family: var(--mono); }

/* the scene: a pixel canvas on the sky colour, centred by margin. The module
   blits at floor(boxWidth / 176), capped at 4, so the box is sized to the
   scale the viewport can hold rather than to the wrap: a box one pixel wider
   than the canvas shows no letterbox, and a 360px phone still gets scale 2
   (354px, centred over the wrap's padding) instead of a 176px stamp. The
   breakpoints are the wrap widths at which the next scale fits: 530 + 32 and
   706 + 32. Below 354px the box falls back to the wrap and scale 1. */
.farm-sky {
  background: var(--farm-sky); border: 1px solid var(--store-line);
  border-radius: var(--r); overflow: hidden; line-height: 0; box-shadow: var(--bevel);
}
.wrap.farm > .farm-sky { width: 354px; max-width: 100vw; margin-left: calc(50% - 177px); margin-right: 0; }
@media (max-width: 353px) { .wrap.farm > .farm-sky { width: auto; max-width: none; margin-left: 0; } }
@media (min-width: 562px) { .wrap.farm > .farm-sky { width: 530px; margin-left: auto; margin-right: auto; } }
@media (min-width: 738px) { .wrap.farm > .farm-sky { width: 706px; } }
.farm-scene { display: block; margin: 0 auto; image-rendering: crisp-edges; image-rendering: pixelated; }

/* the wallet strip: sign in, or the address and the network */
.farm-wallet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; min-height: 44px; }
.farm-wallet .addr { font-family: var(--mono); font-size: .86rem; color: var(--store-ink); }
.farm-wallet .btn, .farm-wallet .btn-gold { min-height: 44px; }

/* the plots: one column on a phone, cards from 720px up */
.farm-plots, .farm-old { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 8px 0 12px; }
.farm-old[hidden] { display: none; }
@media (min-width: 720px) {
  .farm-plots { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* ── the plot card ────────────────────────────────────────────────────── */
.plot {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--store-panel); border: 1px solid var(--store-line);
  border-radius: var(--r); padding: 14px; box-shadow: var(--bevel);
}
.plot.dark { border-style: dashed; }
.plot-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plot-label { font-family: var(--sg); font-weight: 700; font-size: 1.05rem; color: var(--store-ink); }
.plot-label a, .tree a { color: var(--g-live); }
.farm-coins { display: inline-flex; align-items: center; }
.farm-coin {
  display: block; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--store-line); background: var(--store-pit); image-rendering: pixelated;
}
.farm-coin + .farm-coin { margin-left: -8px; }
/* the tag carries the one qualifier a reader must not miss — `trailing, not
   a promise` — so it sits on the 13px floor on every viewport (money.css's
   .62rem is 9.9px on a desk) and wraps instead of clipping */
.plot .tag, .tree .tag { white-space: normal; line-height: 1.4; font-size: max(13px, .7rem); letter-spacing: .08em; }
.plot-body { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
.sprite-box { display: grid; justify-items: center; gap: 4px; }
.sprite {
  display: block; width: 64px; height: 64px; image-rendering: pixelated;
  background: var(--farm-sky); border: 1px solid var(--store-line); border-radius: var(--r-sm);
}
.stage { font-family: var(--mono); font-size: max(13px, .78rem); color: var(--store-muted); letter-spacing: .04em; }
.plot .mlist { margin: 0; }
.plot .mrow { padding: 8px 0; }

/* one row per position */
.tree {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0;
  border-top: 1px solid var(--store-line);
  font-family: var(--mono); font-size: .82rem; color: var(--store-ink);
}
.tree .mv { font-family: var(--mono); font-size: .82rem; color: var(--store-muted); }
.tree .mact { flex-basis: 100%; margin: 6px 0 0; }

/* the acts: every control on the card is a 44px target */
.plot .mact { margin: 12px 0 0; }
.plot .mact button, .plot .mact .btn { min-height: 44px; }
/* the gate line, the dark reason and the disclosure: mono on the 13px floor
   on every viewport (money.css's .74rem is 11.8px on a desk, and its phone
   floor is 1em) */
.plot .mono-note { font-size: max(13px, .8rem); }
.plot > .mono-note { margin-top: 10px; }

/* the inline sheet: plant, pull */
.sheet {
  margin-top: 12px; padding: 12px; background: var(--store-pit);
  border: 1px solid var(--store-line-2); border-radius: var(--r);
}
.sheet[hidden] { display: none; }
.sheet .field { margin: 0 0 10px; }
.sheet .field-c input, .sheet .field-c .btn-quiet { min-height: 44px; }
.sheet .mact { margin: 12px 0 0; }
.chips { display: flex; gap: 8px; margin: 0 0 10px; }
.chips .btn-quiet { min-height: 44px; flex: 1; }
.btn-quiet.on { border-color: var(--g-live); color: var(--g-live); }

/* the disclosure line: last child of the card, moved above the confirm while a sheet is open */
.il { margin-top: 12px; }
.sheet .il { margin: 4px 0 0; }
.plot .msg { margin-top: 10px; }
.plot .msg:empty { display: none; }

/* ripe: a fee ratio at or above 2 percent glows gold */
.ripe { animation: farm-glow 1.6s ease-in-out infinite alternate; }
@keyframes farm-glow {
  from { box-shadow: 0 0 0 0 transparent; }
  to { box-shadow: 0 0 14px 2px color-mix(in srgb, var(--farm-fruit) 60%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .ripe { animation: none; box-shadow: 0 0 0 1px var(--farm-fruit); }
}