/* ============ Round 8: icons (29 Oct 2026, the owner found two sets "AI generated") ============
   The four points of "the technology behind every granule" (Front/Blocks/Explainer.php) and the download card of the sample soil report
   (Front/Blocks/SoilReport.php): a fine-line Hugeicons icon (Ph::line) over a soft earth-toned blob, the recipe of round 4 (design.css section L).
   They replace Phosphor duotone glyphs in pastel squares and a hand-drawn sheet. Plain rules, no !important: nothing older fights them. */

/* The four points of the CRF explainer: the line is the meaning, the blob is the colour (one tint per property, as the squares had). */
.crf-ic { --crf-tone: var(--m-butter); --hi-w: 1.25; position: relative; display: block; flex: none; width: 60px; height: 60px; color: var(--green-ink); }
.crf-ic::before { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--crf-tone); }
.crf-ic svg { position: absolute; right: 0; top: 0; width: 46px; height: 46px; }
.crf-ic[data-season="spring"] { --crf-tone: var(--m-mint); }
.crf-ic[data-season="summer"] { --crf-tone: var(--m-butter); }
.crf-ic[data-season="winter"] { --crf-tone: var(--season-winter-bg); }
.crf-ic[data-season="autumn"] { --crf-tone: var(--m-peach); }
@media (max-width: 520px) {
  /* The points swipe as cards here: the icon sits above the text so the words get the whole card width (they were a narrow column beside it). */
  .crf-point { flex-direction: column; gap: 12px !important; }
  .crf-ic { width: 52px; height: 52px; }
  .crf-ic::before { width: 38px; height: 38px; }
  .crf-ic svg { width: 40px; height: 40px; }
}

/* The sample report card: a report page with a chart on it, in the same style, a little larger because it is the card's only picture. */
.lr-sheet { --lr-tone: var(--m-mint); --hi-w: 1.15; position: relative; display: block; flex: none; width: 76px; height: 76px; color: var(--green-ink); }
.lr-sheet::before { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--lr-tone); }
.lr-sheet svg { position: absolute; right: 0; top: 0; width: 60px; height: 60px; overflow: visible; }