/* Farm check: the card of the token screen (public/js/farmcard.js). One word, one sentence, two waffles
   where a square is 1% of the supply, two facts, and the wallets behind a tap. A filled square is grey;
   it turns amber on a launch the word FARMED starts at, and red on a share still held that the word
   FARMING starts at. */
.fm-line { margin: 0 0 14px; color: var(--text); font-size: var(--t-lead); line-height: 1.4; text-wrap: pretty; }
.fm-note { text-wrap: pretty; }
.fm-waffles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 420px; margin: 0 0 10px; }
.fm-waffles figure { margin: 0; display: grid; gap: 8px; min-width: 0; }
.fm-waffles figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fm-waffles figcaption span { color: var(--dim); font-size: var(--t-small); }
.fm-waffles figcaption b { color: var(--ink); font-size: var(--t-big); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.fm-waffles .fm-hot figcaption b { color: var(--warn); }
.fm-waffles .fm-live figcaption b { color: var(--down); }
.fm-waffles svg { width: 100%; height: auto; display: block; }
.fm-sq { fill: var(--track); }
.fm-sq.fm-on { fill: var(--dim); }
.fm-hot .fm-sq.fm-on { fill: var(--flag-amber); }
.fm-live .fm-sq.fm-on { fill: var(--flag-red); }
.fm-facts { margin: 14px 0 0; }
.fm-act { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.fm-list { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.fm-list summary { cursor: pointer; color: var(--dim); font-size: var(--t-small); }
.fm-rows { margin-top: 10px; max-height: 320px; overflow-y: auto; scrollbar-gutter: stable; padding-right: 6px; }
.fm-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 62px 66px 54px; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); align-items: center; color: var(--text); }
.fm-nonow .fm-row { grid-template-columns: 22px minmax(0, 1fr) 62px 66px; }
.fm-row.fm-head { color: var(--faint); font-size: var(--t-label); }
.fm-w { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; min-height: 24px; color: var(--dim); text-decoration: none; overflow-wrap: anywhere; }
.fm-n { text-align: right; }
/* On a phone the place of a wallet in the list is left out: the order says it, and the address needs the room. */
@media (max-width: 480px) {
  .fm-row { grid-template-columns: minmax(0, 1fr) 54px 58px 48px; gap: 6px; }
  .fm-nonow .fm-row { grid-template-columns: minmax(0, 1fr) 54px 58px; }
  .fm-row > span:first-child { display: none; }
}