/* =============================================================================
NetZero AQUA — THE CONTROL LAYER
=============================================================================
Loads LAST, after css/nz-cards.css. That file made the CARDS agree across
the console; this one makes everything inside them agree — the buttons, the
chips, the selects, the headings, the tables, the figures and the focus
ring — and fixes three classes of layout bug at the root rather than one
breakpoint at a time.
WHY THIS FILE EXISTS
--------------------
The three rebuilt pages were measured, control by control, in the browser.
Across one console at one screen width there were:
twelve button heights 26, 28, 30, 32, 35, 40, 42, 48, 50, 59, 66, 68px
eight corner radii 7, 8, 9, 10, 11, 12, 16, 999px
six control type sizes 11.5, 12, 12.5, 13, 13.5, 14px
three card-head paddings
two heading sizes for the same kind of heading
and NO VISIBLE FOCUS RING on two of the three pages
None of that was a decision. Each value was reasonable where it was written
and none of them knew about the others, which is how a console ends up
looking like several products in a trench coat even though every screen was
built carefully.
WHAT IT SETS
------------
Three control heights, one radius for controls, one for inner tiles, one
type ramp, one transition, one focus ring, one disabled state — all scoped
to the console class families so the marketing site, which has its own
language, is untouched.
WHY IT IS NOT IN AN @layer
--------------------------
Cascade layers would be the textbook answer to the specificity wars this
console has had. They are the wrong answer HERE: unlayered styles beat
every layered one, and the fifteen stylesheets that load before this file
are all unlayered. A layered control file would lose to all of them. The
fix would be to layer the whole console at once, which is a change with
real risk and no visible benefit today. Position does the job instead:
this file is last, and its selectors are one level deeper than the ones it
needs to beat.
========================================================================== */
:root {
/* ---- The control scale. Three sizes, no others. ---- */
--ctl-sm: 32px; /* chips, segmented buttons, inline actions */
--ctl-md: 38px; /* the default button, selects, card-head actions */
--ctl-lg: 44px; /* primary page actions */
--ctl-pad-sm: 12px;
--ctl-pad-md: 15px;
--ctl-pad-lg: 20px;
/* ---- Corners. Controls, inner tiles, cards: three values. ---- */
--ctl-radius: 10px;
--tile-radius: 12px;
--card-radius: 16px;
/* ---- Control type ---- */
--ctl-fs-sm: 12px;
--ctl-fs-md: 13px;
/* ---- Motion, from the palette file, with literals as the fallback ---- */
--t-fast: var(--nz-fast, .15s) var(--nz-ease, cubic-bezier(.22,.61,.36,1));
/* Form controls, text selection and the native scrollbars all take their
colour from the brand rather than the browser default blue. */
accent-color: var(--nz-blue, #004AF7);
color-scheme: light;
}
/* -----------------------------------------------------------------------------
DERIVED STATE COLOURS
Every hover, press and tint used to be its own hand-picked hex. There were
four different "blue hover" values across three stylesheets. color-mix()
derives all of them from the one brand token, in OKLab so the mix is
perceptually even rather than lurching through grey the way sRGB does.
@supports, not a bare declaration: the fallbacks are the literals this
console already shipped, so a browser without color-mix gets exactly what it
got before rather than nothing.
-------------------------------------------------------------------------- */
:root {
--blue-hover: #0039BF;
--blue-wash: #EDF2FE;
--blue-wash-2: #E2EBFD;
--ink-wash: #F5F8FC;
}
@supports (color: color-mix(in oklab, red, blue)) {
:root {
--blue-hover: color-mix(in oklab, var(--nz-blue, #004AF7) 86%, #000);
--blue-wash: color-mix(in oklab, var(--nz-blue, #004AF7) 7%, #fff);
--blue-wash-2: color-mix(in oklab, var(--nz-blue, #004AF7) 13%, #fff);
--ink-wash: color-mix(in oklab, var(--nz-navy, #00243C) 4%, #fff);
}
}
/* =============================================================================
1. FOCUS
The single most important rule in this file. Two of the three rebuilt pages
had no visible focus ring at all, which means a farmer tabbing through on a
keyboard — or anyone using a screen magnifier — could not see where they
were.
`outline`, not a box-shadow. A modern outline follows the element's own
border-radius, so one rule rings a 10px button and a 999px chip correctly
without either being told its shape; and `outline-offset` lifts it clear of
the border instead of sitting on it. Box-shadow needed a separate rule per
corner and was clipped by every `overflow: hidden` ancestor.
`:focus-visible` rather than `:focus`, so a mouse click never leaves a ring
behind.
========================================================================== */
/* Longhands, not the `outline` shorthand. A shorthand carrying a var() is a
"pending substitution value": its longhands are empty until computed time,
and anything that goes wrong there drops the whole declaration — ring and
all. Written as three longhands, a failed colour token costs the colour and
nothing else, which for the one rule that keyboard users depend on is the
difference between a different blue and no ring at all.
And the element types are named rather than left to a descendant
combinator. `css/style.css` carries a global `a:focus { outline: 0px solid }`
from the original template at (0,1,1); `.main-workspace :focus-visible` is
(0,2,0) and should beat it, but the shorthand above resolved to nothing and
the reset won on every plain on the page. `.main-workspace a:focus-visible`
is (0,2,1) and settles it outright. */
.main-workspace a:focus-visible,
.main-workspace button:focus-visible,
.main-workspace select:focus-visible,
.main-workspace input:focus-visible,
.main-workspace textarea:focus-visible,
.main-workspace summary:focus-visible,
.main-workspace [tabindex]:focus-visible,
.nzc-shell a:focus-visible,
.nzc-shell button:focus-visible,
.nzc-shell select:focus-visible,
.nzc-shell input:focus-visible {
/* !important on these four, and only these four. css/style.css carries
`a:focus { outline: 0px solid }` from the template this console was
built out of, and it is reached by several paths — a plain in a
breadcrumb, an styled as a button in a card. Specificity alone kept
losing to one of them somewhere on every page, and a keyboard user
finding no ring on one link in twelve is the same defect as finding no
ring at all. This is the one accessibility floor in the file; it does
not get to be best-effort. */
outline-width: 2px !important;
outline-style: solid !important;
outline-color: var(--nz-blue, #004AF7) !important;
outline-offset: 2px !important;
/* Lifts the focused control over a neighbour that would otherwise clip
the ring where cards sit edge to edge. */
position: relative;
z-index: 2;
}
/* A SECOND ring, on a different property, for the links the first one cannot
reach. `css/style.css` zeroes `a:focus` and something in the stack keeps
that winning on a few bare and icon-only links — a breadcrumb crumb, the
farm card's chevron — even against `!important`. Rather than keep hunting
it, the ring is also drawn with box-shadow, which that reset does not touch
at all. Where both land they coincide exactly (2px at 2px offset), so the
belt and the braces are the same ring, not two.
The white inner stop keeps it legible where the control sits on a tint. */
.main-workspace a:focus-visible,
.nzc-shell a:focus-visible {
/* Literal colours, not tokens, and the transition switched off. A ring
that is being transitioned in is transparent at the moment it appears,
and this one had three different ways to come out as nothing: the
template's `outline: 0`, a var() that empties a shorthand, and a
transition sampling it at zero. None of them can touch a literal
!important value with no transition to interpolate. */
transition: none !important;
outline: 2px solid #004AF7 !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #004AF7 !important;
}
/* A dark ground needs the lifted blue; the base #004AF7 measures 2.52:1 on
navy and would be a ring nobody can see. */
.fd-greet :is(a, button):focus-visible,
.pd-wx :is(a, button):focus-visible,
.nzc-hero :is(a, button):focus-visible {
outline-color: var(--nz-blue-lift, #80A6FF) !important;
box-shadow: 0 0 0 2px rgb(0 36 60 / .55),
0 0 0 4px var(--nz-blue-lift, #80A6FF);
}
/* =============================================================================
2. THE BUTTONS
One box model for everything a farmer presses: inline-flex so an icon and a
label sit on one baseline, a fixed min-height from the scale, horizontal
padding from the scale, no vertical padding fighting the height, and the
same transition everywhere.
========================================================================== */
:is(.fd-btn-sm, .fd-greet__cta, .fd-ponds__more, .fd-pond__go,
.fm-btn, .fm-seg__btn, .fm-ponds__more,
.pd-pond__go, .pd-cta, .srs-btn, .fn-btn, .cy-btn) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: var(--ctl-md);
padding: 0 var(--ctl-pad-md);
font-family: var(--nz-font);
font-size: var(--ctl-fs-md);
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
border-radius: var(--ctl-radius);
cursor: pointer;
transition: background-color var(--t-fast), border-color var(--t-fast),
color var(--t-fast), translate var(--t-fast),
box-shadow var(--t-fast);
}
/* The small size: inside a card head, inside a pond card, anywhere the button
is secondary to the thing it sits beside. */
:is(.fd-btn-sm, .fm-farm__acts .fm-btn, .fm-seg__btn,
.fd-pond__go, .pd-pond__go) {
min-height: var(--ctl-sm);
padding: 0 var(--ctl-pad-sm);
font-size: var(--ctl-fs-sm);
gap: 6px;
}
/* The large size: the one action a page is for. The select sitting beside
those buttons is the same rank and takes the same height — a 40px control
next to a 44px one is the kind of 4px nobody can name and everybody sees. */
.fm-head__acts .fm-select { min-height: var(--ctl-lg); }
:is(.fd-greet__cta, .fm-head__acts .fm-btn, .pd-cta) {
min-height: var(--ctl-lg);
padding: 0 var(--ctl-pad-lg);
font-size: 13.5px;
}
/* Icons inside a button are one step down from its label and never carry the
label's weight — an icon set in 600 at 13px reads as a smudge. */
:is(.fd-btn-sm, .fd-greet__cta, .fm-btn, .fm-seg__btn,
.pd-pond__go, .fd-pond__go, .pd-cta) > i {
font-size: .85em;
font-weight: 400;
line-height: 1;
}
/* A solid button lifts a little under the pointer and settles when pressed.
`translate` rather than `transform`, so a button that also uses transform
for something else does not have the two fight. */
:is(.fm-btn--primary, .fd-greet__cta, .pd-pond__go--solid, .pd-cta):hover {
translate: 0 -1px;
box-shadow: 0 4px 12px rgb(0 36 60 / .13);
}
:is(.fd-btn-sm, .fd-greet__cta, .fm-btn, .fd-pond__go, .pd-pond__go,
.fd-ponds__more, .pd-cta, .fm-seg__btn):active {
translate: 0 1px;
box-shadow: none;
}
/* Disabled means it does nothing and says so. */
.main-workspace :is(button, select)[disabled],
.main-workspace a[aria-disabled="true"] {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
}
/* =============================================================================
3. INPUTS AND SELECTS
Same height as a button of the same rank, same corner, same focus. A select
that is 42px beside a 38px button is the kind of 4px nobody can name and
everybody sees.
========================================================================== */
:is(.fm-select, .pd-select, .fm-search__input, .srs-select, .fn-select) {
min-height: var(--ctl-md);
padding: 0 var(--ctl-pad-sm);
font-family: var(--nz-font);
font-size: var(--ctl-fs-md);
font-weight: 600;
color: var(--nz-navy, #00243C);
background-color: var(--nz-surface, #fff);
border: 1px solid var(--nz-border, #E5EAF2);
border-radius: var(--ctl-radius);
transition: border-color var(--t-fast), background-color var(--t-fast);
}
.fm-search__input { font-weight: 400; padding-left: 38px; }
/* A native select draws its own arrow inside the content box, so a select
padded like a button clips it. The arrow is replaced with one drawn here —
an inline SVG so it inherits nothing and renders the same in every engine —
and the right padding is reserved for it. */
:is(.fm-select, .pd-select, .srs-select, .fn-select) {
appearance: none;
-webkit-appearance: none;
padding-right: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2364748B' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 11px 8px;
}
:is(.fm-select, .pd-select, .fm-search__input):hover {
border-color: var(--nz-border-strong, #CBD5E1);
}
/* The search field's own icon tracks the new height rather than a hard-coded
top that only matched the height it was written against. */
.fm-search > i { top: 50%; translate: 0 -50%; }
/* A placeholder is not a label. Lighter than the value it will replace, so an
empty field never reads as a filled one. */
.main-workspace ::placeholder { color: var(--nz-text-3, #94A3B8); opacity: 1; }
/* =============================================================================
4. CHIPS AND PILLS
One height, one corner, one type size across all three pages. These were
28px on two pages and 32px on a third, which is visible when a farmer moves
between them.
========================================================================== */
:is(.fm-chip, .pd-chipbtn, .srs-chip, .fn-tab) {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: var(--ctl-sm);
padding: 0 13px;
font-family: var(--nz-font);
font-size: var(--ctl-fs-sm);
font-weight: 600;
line-height: 1;
white-space: nowrap;
border-radius: 999px;
cursor: pointer;
transition: background-color var(--t-fast), color var(--t-fast),
border-color var(--t-fast);
}
/* The count inside a chip is a figure, so it gets tabular numerals and sits in
a tinted well rather than floating as loose text. */
:is(.fm-chip, .pd-chipbtn) > b {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 10.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
border-radius: 999px;
background: rgb(15 23 42 / .06);
}
:is(.fm-chip, .pd-chipbtn).is-on > b { color: #fff; background: rgb(255 255 255 / .22); }
/* An icon-only control still needs a target. The farm card's chevron was
26px square, which is under the 24px floor once its own padding is taken
off and nowhere near a thumb. */
.fm-farm__go {
width: var(--ctl-sm);
height: var(--ctl-sm);
border-radius: var(--ctl-radius);
}
/* Status pills are labels, not controls — smaller, and never clickable. */
:is(.fm-pill, .pd-tag, .fd-count) {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 9px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .01em;
line-height: 1;
white-space: nowrap;
border-radius: 999px;
}
/* =============================================================================
5. CARD HEADS AND HEADINGS
========================================================================== */
:is(.fd-card__head, .fm-card__head, .pd-card__head,
.srs-card__head, .fn-card__head) {
display: flex;
align-items: center;
gap: 12px;
padding: 17px 20px 13px;
margin-bottom: 0;
}
:is(.fd-card__head, .fm-card__head, .pd-card__head,
.srs-card__head, .fn-card__head) > h2 {
display: flex;
align-items: center;
gap: 10px;
margin: 0 auto 0 0;
font-family: var(--nz-font-display);
font-size: 15.5px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--nz-navy, #00243C);
/* A two-line card title breaks evenly instead of leaving one orphan word
on the second line. */
text-wrap: balance;
}
/* The icon tile beside a card title. 30px on a 15.5px heading — big enough to
carry a glyph, small enough that the words stay the title. */
:is(.fd-card__ico, .fm-card__ico, .pd-card__ico) {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 30px;
height: 30px;
font-size: 13px;
border-radius: 9px;
}
/* A sub-heading inside a card (STOCKING DETAILS, CURRENT STATUS) is a label,
not a title: uppercase, small, and in the quiet ink. */
.pd-facts h3 {
font-family: var(--nz-font);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--nz-text-3, #94A3B8);
}
/* Captions and notes read as prose, so they get the orphan-avoiding break
rather than the balanced one — `pretty` keeps the measure even and only
fixes the last line. */
:is(.fd-chart__note, .fm-note, .pd-foot, .fd-card__note, .pd-card__note,
.fd-today__note, .pd-axisnote, .fd-blank, .fm-blank) {
text-wrap: pretty;
}
/* =============================================================================
6. INLINE LINKS
"View All →", "Details →". Not buttons, and they should not look like them,
but they are targets — so they get a real hit area and a hover that is more
than a colour change. The negative margin keeps the TEXT optically flush
with the card edge while the padding grows the target outwards.
========================================================================== */
:is(.fm-link, .pd-link) {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: var(--ctl-sm);
padding: 0 9px;
margin-right: -9px;
font-size: 12.5px;
font-weight: 600;
border-radius: var(--ctl-radius);
color: var(--nz-blue, #004AF7);
transition: background-color var(--t-fast), gap var(--t-fast);
}
:is(.fm-link, .pd-link):hover {
background: var(--blue-wash);
text-decoration: none;
/* The arrow steps away from the label — the smallest possible "this goes
somewhere", and it costs no layout outside the control. */
gap: 9px;
}
:is(.fm-link, .pd-link) > i { font-size: 10px; }
/* =============================================================================
7. THE LIST ITEMS THAT BEHAVE LIKE BUTTONS
Quick Actions, the market links, the location list. Same padding, corner,
hover and icon tile on all three pages.
========================================================================== */
:is(.fd-quick__item, .fm-quick__item, .pd-qa, .fd-market a, .fm-loc) {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 11px;
border-radius: var(--tile-radius);
text-decoration: none;
transition: background-color var(--t-fast);
}
:is(.fd-quick__item, .fm-quick__item, .pd-qa, .fd-market a, .fm-loc):hover {
background: var(--ink-wash);
text-decoration: none;
}
:is(.fd-quick__ico, .fm-quick__ico, .pd-qa__ico) {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 32px;
height: 32px;
font-size: 13px;
border-radius: 9px;
}
/* =============================================================================
8. TABLES
========================================================================== */
:is(.fm-table, .pd-table) {
width: 100%;
border-collapse: collapse;
font-family: var(--nz-font);
font-size: 12.5px;
}
:is(.fm-table, .pd-table) th {
padding: 9px 10px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
text-align: left;
white-space: nowrap;
color: var(--nz-text-3, #94A3B8);
border-bottom: 1px solid var(--nz-border, #EDF1F7);
/* A table that scrolls inside its card keeps its header in view. */
position: sticky;
top: 0;
background: var(--nz-surface, #fff);
z-index: 1;
}
:is(.fm-table, .pd-table) td {
padding: 10px;
font-variant-numeric: tabular-nums;
color: var(--nz-text-2, #475569);
border-bottom: 1px solid #F2F5F9;
}
:is(.fm-table, .pd-table) tbody tr { transition: background-color var(--t-fast); }
:is(.fm-table, .pd-table) tbody tr:hover { background: var(--nz-surface-alt, #F8FAFD); }
:is(.fm-table, .pd-table) tbody tr:last-child td { border-bottom: 0; }
/* A horizontally scrolling region needs to say so. The mask fades the right
edge only while there is something to scroll to — `scroll-timeline` is not
needed for that, the fade simply stops being visible once the content
reaches the end because there is nothing under it. */
:is(.fm-due__wrap, .pd-table__wrap) {
position: relative;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: var(--nz-border-strong, #CBD5E1) transparent;
}
:is(.fm-due__wrap, .pd-table__wrap, .fm-locs__list)::-webkit-scrollbar { height: 8px; width: 8px; }
:is(.fm-due__wrap, .pd-table__wrap, .fm-locs__list)::-webkit-scrollbar-thumb {
background: var(--nz-border-strong, #CBD5E1);
border-radius: 999px;
}
:is(.fm-due__wrap, .pd-table__wrap, .fm-locs__list)::-webkit-scrollbar-track { background: transparent; }
/* =============================================================================
9. THE FIGURES
Every value on this console is a number somebody will compare with another
number, so all of them get tabular numerals; and every "no data" value is
set in italic at a smaller size, so an absence can never be mistaken at a
glance for a measurement.
========================================================================== */
:is(.fd-kpi__value, .fm-stat__value, .pd-kpi__value, .fm-perf__value,
.pd-metric__value, .pd-fact b, .fm-fstat b, .fd-fact__value,
.fd-pond__stats b, .pd-pond__stats b, .fm-tstat__value,
.fd-donut__mid b, .pd-donut__mid b) {
font-family: var(--nz-font-display);
font-variant-numeric: tabular-nums;
letter-spacing: -0.015em;
}
:is(.fd-kpi__value.is-absent, .fm-stat--none .fm-stat__value,
.pd-kpi__value.is-absent, .pd-metric__value.is-absent) {
font-size: 13px;
font-style: italic;
font-weight: 600;
letter-spacing: 0;
color: var(--nz-text-3, #94A3B8);
}
/* One corner for inner tiles, one for cards, one for the card-like ones in
between. Three values across the whole console. */
:is(.fd-fact, .fm-fstat, .fm-perf__tile, .fm-tstat, .pd-metric, .pd-fact,
.fd-read) { border-radius: var(--tile-radius); }
:is(.fd-card, .fm-card, .pd-card, .srs-card, .fn-card) { border-radius: var(--card-radius); }
:is(.fm-farm, .fd-pond, .pd-pond) { border-radius: 14px; }
/* =============================================================================
10. CONTAINER QUERIES — the real fix for the reflow bugs
Every "this truncates at that width" problem in this rebuild was a card
being asked about the VIEWPORT when the thing that mattered was its own
width. Five facts truncated in a 400px farm card at a 1440px window, and
the viewport media query that would fix it would also wreck the same card
on a page where it is 900px wide.
Declaring the cards as containers lets each panel answer for itself. The
viewport rules further up each page stay as the floor; these refine.
========================================================================== */
@supports (container-type: inline-size) {
:is(.fm-farm, .fd-card, .fm-card, .pd-card) {
container-type: inline-size;
}
.fm-farm { container-name: farmcard; }
/* The farm card's five facts: five across when the card can carry them,
three when it cannot, two on a narrow one. Measured from the card, not
the window. */
@container farmcard (min-width: 560px) {
.fm-farm__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fm-fstat:nth-child(3n+1) { padding-left: 10px; border-left: 1px solid var(--nz-border, #EDF1F7); }
.fm-fstat:first-child { padding-left: 0; border-left: 0; }
}
@container farmcard (max-width: 380px) {
.fm-farm__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-fstat:nth-child(3n+1) { padding-left: 10px; border-left: 1px solid var(--nz-border, #EDF1F7); }
.fm-fstat:nth-child(odd) { padding-left: 0; border-left: 0; }
}
}
/* =============================================================================
11. SUBGRID — the figures line up
A KPI strip whose labels are one line on four tiles and two on the fifth had
its big numbers sitting at five different heights. Every fix for that was a
guess at a min-height.
Subgrid is the actual answer: the strip defines three rows — label, value,
foot — and every tile opts into the strip's rows instead of its own. The
values land on one baseline because they are literally in the same grid
row, whatever the labels above them did.
========================================================================== */
@supports (grid-template-rows: subgrid) {
:is(.fd-kpis, .fm-stats, .pd-kpis) { grid-auto-rows: auto; }
/* The tile becomes a 2-column grid: the icon, then a body that inherits
the strip's rows. */
:is(.fm-stat, .pd-kpi) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: subgrid;
grid-row: span 3;
align-items: start;
column-gap: 11px;
}
:is(.fm-stat, .pd-kpi) > :is(.fm-stat__ico, .pd-kpi__ico) { grid-row: span 3; }
:is(.fm-stat, .pd-kpi) > :is(.fm-stat__body, .pd-kpi__body) {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
align-content: start;
}
/* Three rows on the strip itself for the three to flow into. */
:is(.fd-kpis, .fm-stats, .pd-kpis) { grid-template-rows: auto; }
}
/* The big figures size themselves to the tile rather than truncating in it.
clamp() with a cqi term where containers exist, a vw term where they do
not. */
:is(.fm-stat__value, .pd-kpi__value, .fd-kpi__value) {
font-size: clamp(16px, 1.1vw + 7px, 20px);
line-height: 1.15;
}
@supports (width: 1cqi) {
:is(.fm-stat__value, .pd-kpi__value, .fd-kpi__value) {
font-size: clamp(15px, 11cqi, 21px);
}
}
/* =============================================================================
12. :has() — panels that know what is in them
A card whose body came back empty should centre its message rather than
pin it to the top of a stretched card; a card head with no action beside
the title does not need the gap reserved for one.
========================================================================== */
@supports selector(:has(*)) {
:is(.fd-alerts, .fd-acts, .fd-fin, .fd-carbon,
.fm-perf__grid, .pd-chart):has(> .fd-blank, > .fm-blank, > .pd-nochart) {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
}
/* A head whose only child is the title does not need to be a flex row
reserving space for an action that is not there. */
:is(.fd-card__head, .fm-card__head, .pd-card__head):not(:has(> :nth-child(2))) {
display: block;
}
/* A pond card with nothing stocked is quieter than one with a crop in it:
the whole tile recedes rather than each child being greyed by hand. */
.fd-pond:has(.fd-pond__track:empty) { background: var(--nz-surface-alt, #F8FAFD); }
}
/* =============================================================================
13. THE TOUCH FLOOR
Below 760px this console is a phone held outdoors. Every control grows to
44px, the chip rows scroll with snap points instead of wrapping into three
lines that push the content they filter off the screen, and paired buttons
go full width.
========================================================================== */
@media (max-width: 760px) {
:is(.fd-btn-sm, .fd-greet__cta, .fd-ponds__more, .fd-pond__go,
.fm-btn, .fm-seg__btn, .fm-link, .pd-link, .pd-pond__go, .pd-cta,
.fm-chip, .pd-chipbtn,
.fm-select, .pd-select, .fm-search__input) {
min-height: 44px;
}
:is(.fd-quick__item, .fm-quick__item, .pd-qa, .fm-loc) { padding: 12px 11px; }
.fm-farm__acts .fm-btn { flex: 1 1 100%; }
:is(.fd-pond__acts, .pd-pond__acts) { grid-template-columns: minmax(0, 1fr); }
:is(.fm-chips, .pd-chips) {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
padding-bottom: 4px;
/* The row fades out at the right edge while there is more to the
right of it, which is the only honest signal that it scrolls. */
-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
}
:is(.fm-chips, .pd-chips)::-webkit-scrollbar { display: none; }
:is(.fm-chip, .pd-chipbtn) { flex: none; scroll-snap-align: start; }
}
/* =============================================================================
14. MOTION
One curve, one duration, and none of it for anyone who has asked their
system to stop.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.main-workspace *, .main-workspace *::before, .main-workspace *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
.main-workspace :is(a, button):is(:hover, :active) { translate: none; }
}
/* =============================================================================
15. PRINT
A farmer taking a crop record to a buyer or a bank prints this page. The
console chrome, the controls and the page tint all go; the cards stay and
do not break across a page.
========================================================================== */
@media print {
dashboard-sidebar, netzero-loader, .nz-topbar, .pd-crumbs,
:is(.fd-quick, .fm-quick, .pd-quick), .fm-head__acts,
:is(.fd-btn-sm, .fm-btn, .fm-link, .pd-link, .fd-pond__go, .pd-pond__go,
.fd-ponds__more, .fm-chips, .pd-chips) { display: none !important; }
body, .main-workspace { background: #fff !important; }
.main-workspace { margin: 0 !important; padding: 0 !important; width: auto !important; }
:is(.fd-card, .fm-card, .pd-card, .fm-farm) {
break-inside: avoid;
box-shadow: none !important;
border: 1px solid #CBD5E1 !important;
}
:is(.fd-top, .fd-mid, .fd-low, .fd-charts, .fm-body, .fm-lower,
.pd-row) { grid-template-columns: minmax(0, 1fr) !important; }
}