/* ==========================================================================
   The farm readings section: "A living view of the farm".

   Four panels, one per display group, each drawn after what it measures - the
   three nutrients as three soil cores, the tank line as its three stations,
   the water level as tank outlines, the weather station around the two
   readings people look for first. They share one ground, one type scale and
   one way of saying how current a reading is:

     fresh     a small sage dot; the time appears when asked for
     delayed   an ochre ring and the words "Delayed - 12:05"
     awaiting  a dashed ring, a dash for the value and "Awaiting data"

   Colour never carries a state alone; there is always a word beside it. The
   only movement is a slow ring on things that are live, and a short fade when
   a value changes - both gone for anyone who asked for less motion.
   ========================================================================== */

/* The section also sits on the product pages (farm-live/section.html), whose
   drawings use .fl and .fl-v as their own class names. So nothing here may be
   keyed on .fl alone, and the reading value is always .fl-vw .fl-v. */
.fl-head{max-width:780px}

.fl-board{margin-top:clamp(34px,5vh,58px);position:relative;
  --fl-late:#7A5418;               /* delayed: an ochre dark enough for small text on both grounds */
  --fl-well:#F3ECDF;               /* the inset ground inside a panel */
}

/* ---------------------------------------------------------------- the bar */
.fl-bar{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:14px 30px;
  padding:16px clamp(18px,2vw,26px);background:var(--paper);border:1px solid var(--line);border-radius:20px;
  min-height:78px}
.fl-farm{display:flex;flex-direction:column;gap:3px;min-width:0}
.fl-k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-2)}
.fl-name{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,1.7vw,1.55rem);line-height:1.05;
  color:var(--text);letter-spacing:.01em}
.fl-c{font-size:.84rem;color:var(--text-2)}

.fl-live{display:flex;align-items:center;gap:12px;padding-left:28px;border-left:1px solid var(--line);min-width:0}
.fl-dot{position:relative;width:12px;height:12px;border-radius:50%;flex:none;background:var(--line-strong)}
.fl-lt{display:flex;flex-direction:column;gap:2px;min-width:0}
.fl-lt b{font-weight:600;font-size:1rem;line-height:1.2;color:var(--text)}
.fl-lt span{font-size:.84rem;line-height:1.3;color:var(--text-2)}

.fl-when{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;
  font-size:.84rem;line-height:1.3;color:var(--text-2)}
.fl-when time{font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;color:var(--text)}

.fl-tog{appearance:none;-webkit-appearance:none;cursor:pointer;min-height:44px;padding:0 18px;
  border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--forest-2);
  font:500 .84rem/1 var(--body);white-space:nowrap;transition:border-color .25s var(--ease-soft),background .25s var(--ease-soft)}
.fl-tog:hover{border-color:var(--sage);background:rgba(124,145,77,.07)}
.fl-tog[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.fl-tog:focus-visible,.fl-board :focus-visible{outline:2px solid var(--forest-2);outline-offset:3px}

/* the state dots, shared by the bar and the panel headers */
[data-s="live"]>.fl-dot,.fl-gs[data-s="live"] i{background:var(--sage)}
[data-s="partial"]>.fl-dot,.fl-gs[data-s="partial"] i{background:conic-gradient(var(--sage) 0 50%,var(--line-2) 50% 100%)}
[data-s="delayed"]>.fl-dot,.fl-gs[data-s="delayed"] i{background:transparent;box-shadow:inset 0 0 0 2px var(--fl-late)}
[data-s="awaiting"]>.fl-dot,.fl-gs[data-s="awaiting"] i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
[data-s="demo"]>.fl-dot,.fl-gs[data-s="demo"] i{background:var(--sand)}
.fl-live[data-s="live"] b,.fl-gs[data-s="live"] b{color:var(--forest-2)}
.fl-live[data-s="delayed"] b,.fl-gs[data-s="delayed"] b{color:var(--fl-late)}
/* live, and only live, breathes */
.fl-live[data-s="live"] .fl-dot::after,.fl-gs[data-s="live"] i::after{content:"";position:absolute;inset:-5px;
  border-radius:50%;border:1.5px solid var(--sage);opacity:0;animation:flPulse 2.6s var(--ease-soft) infinite}
.fl-gs[data-s="live"] i::after{inset:-4px}

.fl-note{margin:12px 2px 0;font-size:.88rem;color:var(--fl-late)}
.fl-note:empty{display:none}
.fl-msg,.fl-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ------------------------------------------------------------- the panels */
.fl-grid{margin-top:16px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
/* The board is not a scroll-in block: on a phone held sideways it is many screens
   tall and could sit invisible under its own heading. It arrives with its data
   instead, from a quiet placeholder. */
.fl-board .fl-grid,.fl-board .fl-bar{transition:opacity .6s var(--ease-soft)}
.fl-board[aria-busy="true"] .fl-grid,.fl-board[aria-busy="true"] .fl-bar{opacity:.5}
.fl-panel{grid-column:span 6;position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,2vw,28px);min-height:300px}
.fl-panel[data-group="water"]{grid-column:span 4}
.fl-panel[data-group="weather"]{grid-column:span 8}
.fl-panel[aria-busy="true"]{background:linear-gradient(180deg,var(--paper),var(--fl-well))}
:where(.fl-panel ul){list-style:none;margin:0;padding:0}

.fl-ph{display:flex;align-items:center;gap:12px;min-width:0}
.fl-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--text-3)}
.fl-pt{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.22rem,1.55vw,1.46rem);line-height:1.15;
  color:var(--text);min-width:0}
.fl-gs{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-2);
  white-space:nowrap;flex:none}
.fl-gs i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.fl-gs b{font-weight:500}
.fl-pm{margin:6px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-2);min-height:1.3em}

/* ---- one reading, wherever it sits ---- */
.fl-s{position:relative;min-width:0}
.fl-l{display:flex;align-items:center;gap:7px;font-size:.86rem;line-height:1.3;color:var(--text-2)}
.fl-l::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.fl-s[data-st="fresh"] .fl-l::before{background:var(--sage)}
.fl-s[data-st="delayed"] .fl-l::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--fl-late)}
.fl-s[data-st="awaiting"] .fl-l::before{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.fl-s[data-st="demo"] .fl-l::before{background:var(--sand)}
.fl-vw{display:flex;align-items:baseline;gap:6px;min-width:0}
.fl-vw .fl-v{font-family:var(--display);font-weight:400;line-height:1.02;color:var(--text);white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums;font-size:1.5rem;display:inline-block}
.fl-u{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--text-2)}
.fl-u:empty{display:none}
.fl-m{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;line-height:1.35;letter-spacing:.05em;
  color:var(--text-2);min-height:1.35em;visibility:hidden}
.fl-times .fl-m,.fl-s[data-st="delayed"] .fl-m,.fl-s[data-st="awaiting"] .fl-m{visibility:visible}
.fl-m span{white-space:nowrap}
.fl-s[data-st="delayed"] .fl-m{color:var(--fl-late)}
.fl-s[data-st="delayed"] .fl-v{color:var(--text-2)}
.fl-s[data-st="awaiting"] .fl-v{color:var(--text-3)}
.fl-v.is-new{animation:flTick .6s var(--ease) both}
.fl-ic{display:block;color:var(--forest-2)}
.fl-ic svg{display:block;width:100%;height:100%}

/* ---- 01 NPK + weight: three soil cores, the probe's other readings, the scale ---- */
.fl-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.fl-nut{display:flex;flex-direction:column;min-height:176px;padding:16px 16px 14px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#F8F2E7 0%,#EFE5D2 100%);border:1px solid rgba(201,169,107,.3)}
.fl-nut::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(169,155,128,.10) 0 1px,transparent 1px 9px);
  -webkit-mask:linear-gradient(0deg,#000,transparent);mask:linear-gradient(0deg,#000,transparent)}
.fl-sym{order:0;font-family:var(--display);font-weight:300;font-size:clamp(3.2rem,4.6vw,4.4rem);line-height:.82;
  color:rgba(124,145,77,.62);letter-spacing:-.02em}
.fl-nut .fl-vw{order:2;margin-top:auto;padding-top:14px;position:relative;z-index:1}
.fl-nut .fl-v{font-size:clamp(1.8rem,2.8vw,2.5rem)}
.fl-nut .fl-l{order:3;margin-top:4px;position:relative;z-index:1}
.fl-nut .fl-m{order:4;position:relative;z-index:1;min-height:2.7em}
.fl-npk-foot{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center}
.fl-aux{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 16px;align-items:stretch}
.fl-auxi{display:flex;flex-direction:column}
.fl-auxi .fl-vw{margin-top:auto;padding-top:4px}
.fl-auxi .fl-v{font-size:1.4rem}
.fl-weight{display:grid;grid-template-columns:auto auto;grid-template-areas:"ic label" "ic value" "ic meta";
  column-gap:14px;align-items:center;padding:12px 18px 10px 14px;border-radius:14px;background:var(--fl-well)}
.fl-weight .fl-ic{grid-area:ic;width:38px;height:38px}
.fl-weight .fl-l{grid-area:label}
.fl-weight .fl-vw{grid-area:value;margin-top:2px}
.fl-weight .fl-v{font-size:1.7rem}
.fl-weight .fl-m{grid-area:meta;margin-top:3px}

/* ---- 02 the tank line: three stations and the one reading without a place ---- */
.fl-stations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.fl-sta{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:16px;background:var(--fl-well);min-width:0}
.fl-sta-h{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.fl-sta-h .fl-ic{width:30px;height:30px;flex:none}
.fl-sta-h h4{margin:0;font-family:var(--body);font-weight:600;font-size:.92rem;line-height:1.25;color:var(--text)}
.fl-sta-r{display:flex;flex-direction:column;gap:12px}
.fl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label value" "meta meta";
  align-items:baseline;column-gap:10px}
.fl-row .fl-l{grid-area:label}
.fl-row .fl-vw{grid-area:value;justify-self:end}
.fl-row .fl-m{grid-area:meta;margin-top:2px}
.fl-loose{margin-top:12px;padding:14px 16px;border-radius:14px;border:1px dashed var(--line-2)}
.fl-loose-i{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic label value" "ic meta meta";align-items:center}
.fl-loose-i .fl-ic{grid-area:ic;width:26px;height:26px;margin-right:4px}

/* ---- 03 water level: tank outlines with the reading inside ---- */
.fl-tanks{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px;align-items:start;align-content:center}
.fl-tank{display:grid;grid-template-areas:"tank" "label" "meta";justify-items:center;text-align:center}
.fl-tank-w{grid-area:tank;display:block;width:min(100%,112px)}
.fl-tank-g{display:block;width:100%;height:auto}
.fl-tank-body{fill:var(--fl-well);stroke:var(--line-strong);stroke-width:1.5}
.fl-tank-cap{fill:var(--paper);stroke:var(--line-strong);stroke-width:1.5}
.fl-tank-fill{fill:rgba(124,145,77,.30)}
.fl-tank-tick{stroke:var(--line-2);stroke-width:1.5}
.fl-tank .fl-vw{grid-area:tank;align-self:center;justify-content:center;margin-top:14%;z-index:1;padding:0 6px}
.fl-tank .fl-v{font-size:clamp(1.5rem,2.2vw,1.95rem)}
.fl-tank .fl-l{grid-area:label;margin-top:10px;justify-content:center}
.fl-tank .fl-m{grid-area:meta}
.fl-tank[data-st="fresh"] .fl-tank-body{stroke:var(--sage)}

/* ---- 04 weather station: the two readings people look for, then the rest ---- */
.fl-wx-lead{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.fl-wx-big{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic label" "ic value" "ic meta";
  column-gap:16px;align-items:center;padding:16px 18px 12px;border-radius:16px;background:var(--fl-well)}
.fl-wx-big .fl-ic{grid-area:ic;width:42px;height:42px}
.fl-wx-big .fl-l{grid-area:label}
.fl-wx-big .fl-vw{grid-area:value;margin-top:4px}
.fl-wx-big .fl-v{font-size:clamp(2rem,3vw,2.6rem)}
.fl-wx-big .fl-m{grid-area:meta}
.fl-wx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 18px;margin-top:20px}
.fl-wx-i{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic label" "ic value" "ic meta";
  column-gap:12px;align-items:start}
.fl-wx-i .fl-ic{grid-area:ic;width:28px;height:28px;margin-top:1px;color:var(--text-2)}
.fl-wx-i .fl-l{grid-area:label}
.fl-wx-i .fl-vw{grid-area:value;margin-top:3px}
.fl-wx-i .fl-v{font-size:1.45rem}
.fl-wx-i .fl-m{grid-area:meta}

.fl-foot{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);line-height:1.6}

/* when nothing could be loaded at all, say so plainly instead of drawing empty boxes */
.fl-board[data-s="down"] .fl-grid,.fl-board[data-s="down"] .fl-bar{display:none}
.fl-board[data-s="down"] .fl-note{margin-top:0;padding:22px 24px;border:1px dashed var(--line-2);border-radius:20px;
  color:var(--text-2);background:var(--paper)}

@keyframes flPulse{0%{transform:scale(.55);opacity:.6}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
@keyframes flTick{0%{opacity:.15;transform:translateY(.24em)}100%{opacity:1;transform:none}}

/* ------------------------------------------------------------- colour
   The board takes the site's own colours instead of one cream: the bar is the
   forest band the rest of the site uses for its dark moments, and each group
   carries one hue from the palette - forest for the soil, sand-gold for the
   tank line, sage for water, the company orange for the weather. The hue marks
   the panel's top edge, its number, its icons and the wash behind its readings.
   Readings stay in the ink colour, and the reading-state dots are untouched:
   colour here says which group you are in, never how current a value is. */
.fl-panel[data-group="npk"]{--gc:#4A5C28;--gc-ink:#36441D;--gc-wash:#EEF1E3;--gc-well:#E5EBD4}
.fl-panel[data-group="tanks"]{--gc:#C09340;--gc-ink:#7E5D1E;--gc-wash:#F8F0DF;--gc-well:#F3E7CD}
.fl-panel[data-group="water"]{--gc:#7C914D;--gc-ink:#4F6329;--gc-wash:#F0F3E6;--gc-well:#E6ECD6}
.fl-panel[data-group="weather"]{--gc:#E05616;--gc-ink:#A93F0E;--gc-wash:#FCEFE6;--gc-well:#F9E3D4}

/* the bar: the forest band */
.fl-bar{background:linear-gradient(115deg,#26311A 0%,var(--forest) 58%,#44552A 100%);border-color:transparent;
  color:var(--bone);box-shadow:0 26px 50px -34px rgba(36,40,24,.75)}
.fl-bar .fl-k{color:var(--sage-soft)}
.fl-bar .fl-name{color:var(--bone)}
.fl-bar .fl-c,.fl-bar .fl-lt span,.fl-bar .fl-when{color:rgba(245,239,229,.74)}
.fl-bar .fl-lt b,.fl-bar .fl-when time{color:var(--bone)}
.fl-bar .fl-live{border-left-color:rgba(245,239,229,.18)}
.fl-bar .fl-live[data-s="live"] b{color:var(--sage-soft)}
.fl-bar .fl-live[data-s="delayed"] b{color:#E7C88A}
.fl-bar [data-s="delayed"]>.fl-dot{box-shadow:inset 0 0 0 2px #E7C88A}
.fl-bar [data-s="awaiting"]>.fl-dot{box-shadow:inset 0 0 0 1.5px rgba(245,239,229,.5)}
.fl-bar .fl-tog{border-color:rgba(245,239,229,.34);color:var(--bone)}
.fl-bar .fl-tog:hover{border-color:var(--sand);background:rgba(201,169,107,.14)}
.fl-bar .fl-tog[aria-pressed="true"]{background:var(--sand);border-color:var(--sand);color:var(--olive-ink)}
.fl-bar :focus-visible{outline-color:var(--sand)}
@media (max-width:1180px){.fl-bar .fl-when{border-top-color:rgba(245,239,229,.18)}}
@media (max-width:680px){.fl-bar .fl-live{border-top-color:rgba(245,239,229,.18)}}

/* each panel: its hue on the top edge, the number and a wash that fades into paper */
.fl-panel[data-group]{border-top:4px solid var(--gc);
  background:linear-gradient(180deg,var(--gc-wash) 0,var(--paper) 170px)}
.fl-panel[data-group] .fl-no{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--gc-ink);color:var(--paper);letter-spacing:.04em;font-size:10.5px}
.fl-panel[data-group] .fl-ic{color:var(--gc-ink)}

/* 01 the three soil cores, one hue each: nitrogen green, phosphorus gold, potassium terracotta */
.fl-nut[data-key]{border-width:1px;border-style:solid}
.fl-nut[data-key="nitrogen"]{background:linear-gradient(180deg,#F0F4E4 0%,#DCE5C3 100%);border-color:rgba(74,92,40,.28)}
.fl-nut[data-key="phosphorus"]{background:linear-gradient(180deg,#FAF2E0 0%,#EEDAAE 100%);border-color:rgba(176,138,62,.34)}
.fl-nut[data-key="potassium"]{background:linear-gradient(180deg,#FCEEE4 0%,#F3D3BD 100%);border-color:rgba(192,80,26,.26)}
.fl-nut[data-key="nitrogen"] .fl-sym{color:rgba(74,92,40,.82)}
.fl-nut[data-key="phosphorus"] .fl-sym{color:rgba(160,118,40,.86)}
.fl-nut[data-key="potassium"] .fl-sym{color:rgba(192,80,26,.8)}
.fl-npk-foot{border-top-color:rgba(74,92,40,.18)}
.fl-weight{background:var(--gc-well)}

/* 02 the tank line: each station a warm well headed by its icon in a gold disc */
.fl-panel[data-group="tanks"] .fl-sta{background:linear-gradient(180deg,var(--gc-well) 0,#F8F1E3 100%);
  box-shadow:inset 0 0 0 1px rgba(192,147,64,.22)}
.fl-sta-h{border-bottom-color:rgba(192,147,64,.3)}
.fl-panel[data-group="tanks"] .fl-sta-h .fl-ic{box-sizing:border-box;width:36px;height:36px;padding:7px;border-radius:50%;
  background:var(--gc-ink);color:var(--paper)}
.fl-panel[data-group="tanks"] .fl-loose{border-color:rgba(192,147,64,.5);background:rgba(248,240,223,.6)}

/* 03 water: tanks drawn in sage */
.fl-panel[data-group="water"] .fl-tank-body{fill:#EEF2E3;stroke:#8FA262}
.fl-panel[data-group="water"] .fl-tank-cap{fill:var(--paper);stroke:#8FA262}
.fl-panel[data-group="water"] .fl-tank-tick{stroke:#AEBE8C}
.fl-panel[data-group="water"] .fl-tank-fill{fill:rgba(124,145,77,.34)}

/* 04 weather: the two lead readings in warm and cool wells, the rest with orange icons */
.fl-wx-big[data-key="air_temp"]{background:linear-gradient(135deg,#FBE9DC 0%,#F5D5BF 100%)}
.fl-wx-big[data-key="humidity"]{background:linear-gradient(135deg,#EEF2E3 0%,#DCE5C3 100%)}
.fl-wx-big[data-key="air_temp"] .fl-ic{color:#C0501A}
.fl-wx-big[data-key="humidity"] .fl-ic{color:var(--forest-2)}
.fl-panel[data-group="weather"] .fl-wx-i .fl-ic{color:#C0501A}
.fl-panel[data-group="weather"] .fl-wx-i{padding:12px 12px 10px;border-radius:14px;background:rgba(252,239,230,.7)}

/* ------------------------------------------------------------- narrower */
@media (max-width:1180px){
  .fl-panel{grid-column:1/-1}
  .fl-panel[data-group="water"]{grid-column:span 5}
  .fl-panel[data-group="weather"]{grid-column:span 7}
  .fl-bar{grid-template-columns:auto 1fr auto}
  .fl-when{grid-column:1/-1;grid-row:2;justify-self:start;align-items:flex-start;text-align:left;flex-direction:row;
    flex-wrap:wrap;gap:4px 18px;padding-top:12px;border-top:1px solid var(--line);width:100%}
  .fl-wx{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .fl-grid{grid-template-columns:1fr}
  .fl-panel,.fl-panel[data-group="water"],.fl-panel[data-group="weather"]{grid-column:1/-1}
  .fl-wx{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fl-tank-w{width:min(100%,96px)}
}
@media (max-width:680px){
  .fl-bar{grid-template-columns:1fr auto;gap:14px 16px}
  .fl-live{grid-column:1/-1;grid-row:2;padding:14px 0 0;border-left:0;border-top:1px solid var(--line)}
  .fl-when{grid-row:3}
  .fl-tog{grid-column:1/-1;grid-row:4;justify-self:start}
  .fl-stations{grid-template-columns:1fr}
  .fl-aux{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fl-npk-foot{grid-template-columns:1fr}
  .fl-weight{justify-self:stretch}
  .fl-wx-lead{grid-template-columns:1fr}
  .fl-wx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fl-nut{min-height:150px;padding:14px 12px 12px}
}
/* On a narrow phone three columns would cut "Phosphorus" short, so the cores
   lie down: the letter on the left, the reading beside it. */
@media (max-width:440px){
  .fl-trio{grid-template-columns:1fr;gap:8px}
  .fl-nut{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"sym value" "sym label" "sym meta";
    column-gap:16px;align-items:center;min-height:0;padding:12px 16px}
  .fl-nut::after{height:100%;-webkit-mask:linear-gradient(90deg,transparent 40%,#000);mask:linear-gradient(90deg,transparent 40%,#000)}
  .fl-sym{grid-area:sym;font-size:2.6rem;width:1.1em;text-align:center}
  .fl-nut .fl-vw{grid-area:value;padding-top:0}
  .fl-nut .fl-v{font-size:1.7rem}
  .fl-nut .fl-l{grid-area:label}
  .fl-nut .fl-m{grid-area:meta;min-height:0;margin-top:2px}
  .fl-tanks{gap:6px}
  .fl-tank .fl-v{font-size:1.35rem}
}

@media (prefers-reduced-motion:reduce){
  .fl-live .fl-dot::after,.fl-gs i::after{animation:none!important;opacity:0!important}
  .fl-v.is-new{animation:none}
  .fl-tog{transition:none}
  .fl-board .fl-grid,.fl-board .fl-bar{transition:none}
}