/* =============================================================================
   NETZERO AQUA — farmer console surface
   =============================================================================
   The shared layer under every signed-in page: the layout fix that makes them
   use the screen, and the surface treatment that makes them look designed
   rather than defaulted.

   LOAD ORDER: after style.css, app-shell.css and the per-page stylesheet.
   nz-sidebar.css owns the navigation; this file owns everything to the right
   of it.


   1. THE BUG THIS FILE EXISTS FOR
   -------------------------------
   Every page in this console rendered as a narrow column in the middle of a
   1920px screen — "literally the mobile view", and that was exactly right.

   It was not a missing breakpoint. my-farm.css has had the desktop rules all
   along:

       .mf-main { max-width: 720px;  margin: 0 auto; }
       @media (min-width: 900px) { .mf-main { max-width: 1100px; } }

   The cause is one line in style.css:7852:

       .main-workspace { display: flex; flex-direction: column; }

   A flex item's default `align-self: stretch` is what normally makes a block
   child fill its container's cross axis. An `auto` margin on that axis
   OVERRIDES stretch — and once stretch is gone the item is sized shrink-to-fit,
   i.e. to its own content. So `margin: 0 auto` did not centre a 1100px column;
   it cancelled the stretch that would have made it 1100px in the first place,
   and then centred whatever the content happened to measure.

   Measured in Chromium, same markup, 1530px container:

       max-width: 1100px; margin: 0 auto;                 ->  214px
       width: 100%; max-width: 1100px; margin-inline:auto ->  1100px

   Restoring `width: 100%` on the direct children is the whole fix, and it is
   done once here rather than in thirteen page stylesheets. Every direct child
   of .main-workspace is a page-level block (header, main, div.top-bar,
   div.biz-header and so on — checked on all thirteen), so 100% is precisely
   what stretch would have given them. Their own max-width still caps them.


   2. THE SURFACE
   --------------
   Three treatments, applied where they mean something rather than everywhere:

     - A MEASURED GRID on dark surfaces. This is not a trend import: it is the
       marketing site's own motif, where it is documented as saying "this water
       is being measured". A console that measures water should carry it.

     - A GRADIENT BLOOM on the same surfaces, in the lockup's blue and green,
       low and off-centre so it reads as light rather than as a coloured panel.

     - TEXTURE: a fine noise at 2-3% over dark grounds. Flat #00243C across a
       1500px card bands visibly on a cheap panel; noise breaks the banding and
       costs one inlined SVG.

   Light surfaces get none of it. A card holding a water-quality figure has one
   job and decoration is not it — what they get instead is a real elevation
   model: a crisp hairline, a small offset shadow, and a lift on hover, so the
   page has depth without the data competing with a background.

   ON NEUBRUTALISM: deliberately not here, and the reasoning is in the note at
   the end of this file.
   ========================================================================== */

:root {
    --nzc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --nzc-out: cubic-bezier(0.33, 1, 0.68, 1);

    --nzc-green: #3BD304;
    --nzc-blue: #004AF7;
    --nzc-blue-lift: #4C82FF;
    --nzc-navy: #00243C;

    --nzc-grid: 44px;                       /* the measured grid pitch */
    --nzc-line: rgba(255, 255, 255, 0.055);
}


/* =============================================================================
   1 — LAYOUT: USE THE SCREEN
   ========================================================================== */

/* See the long note at the top. This one declaration is what stops every page
   in the console rendering as a phone column on a desktop. */
.main-workspace > * { width: 100%; }

/* netzero-loader is an overlay, not a block in the flow — it must not be
   stretched into the layout. */
.main-workspace > netzero-loader { width: auto; }

/* Centre the CONTENT, never the box.

   This was `margin-inline: auto`, to stop the console hugging the left edge of
   a wide monitor. On these pages .main-workspace and .dashboard-content are
   the SAME element, and nz-sidebar.css offsets it past the rail with

       margin: 0 0 0 var(--nzs-rail) !important;

   This file loads after it, so `margin-inline: auto` replaced that left margin.
   The auto margins then split the 72px the rail had reserved — 36px each side —
   and the workspace slid back UNDER the sidebar. Every page's first character
   was behind the rail: "India Shrimp Market Intelligence" rendered as "ndia".

   Padding does the same job and cannot reach the margin. `max()` keeps the
   normal 32px gutter until the strip is wider than the measure, then splits
   the surplus — so the content centres on a 2560px monitor and the rail offset
   is untouched at every width. */
.main-workspace {
    max-width: none !important;
    padding-inline: max(32px, (100% - 1560px) / 2) !important;
}

@media (max-width: 900px) {
    .main-workspace { padding-inline: max(18px, (100% - 1560px) / 2) !important; }
}


/* =============================================================================
   2 — THE HERO
   -----------------------------------------------------------------------------
   HOW THIS WENT WRONG THE FIRST TIME, because the lesson is the design rule.

   The treatment below used to be applied through a list of selectors picked by
   reading class names:

       .mf-topbar, .biz-header, .welcome-card, .welcome-section, .cy-head

   Four of those five were not hero cards at all, and I had not opened the
   pages to check:

       .mf-topbar       a navy card with its own padding and radius   — correct
       .biz-header      a flex bar. No padding, no radius, no background
       .cy-head         a flex bar holding a title, a farm picker and a button
       .welcome-section `background: transparent !important; padding: 0`
       .welcome-card    a WHITE card, which this then painted navy

   Forcing a background, `overflow: hidden` and `color: #fff` onto a bare flex
   bar is what produced the stepped, full-bleed band on cycles.html with the
   button hanging off its right edge: no padding to sit inside, no radius to be
   clipped by, and children styled for a light ground suddenly on a dark one.

   So it is ONE class now, `.nzc-hero`, added to markup deliberately, page by
   page, after looking at the page. It is a complete component — its own
   padding, radius, spacing and dark-ground child styles — not a background
   sprayed onto whatever was already there. If a page has no hero card, it does
   not get one.
   ========================================================================== */

.nzc-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    /* Its own box. The bar it replaces had none of this, which is the whole
       reason the first version fell apart. */
    padding: 26px 30px;
    margin-bottom: 22px;
    border-radius: 18px;

    background: linear-gradient(135deg, #00304F 0%, #00243C 52%, #001B33 100%);
    color: #fff;
}

/* A hero that also carries controls — a farm picker, a primary action. Same
   component, one more job: keep the controls on the baseline of the title
   rather than letting flex-wrap stack them into a second band. */
.nzc-hero--bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
}

.nzc-hero__copy { min-width: 0; max-width: 62ch; }
.nzc-hero__actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* ---- the measured grid ----
   Masked to a corner rather than tiled edge to edge: a full grid is wallpaper,
   a grid that fades is a surface being read. Not a trend import — it is the
   marketing site's own motif, documented there as "this water is being
   measured". A console that measures water should carry it. */
.nzc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, var(--nzc-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--nzc-line) 1px, transparent 1px);
    background-size: var(--nzc-grid) var(--nzc-grid);
    -webkit-mask-image: radial-gradient(120% 140% at 88% 8%, #000 8%, transparent 72%);
    mask-image: radial-gradient(120% 140% at 88% 8%, #000 8%, transparent 72%);
    pointer-events: none;
}

/* ---- the bloom, and the noise ----
   Two radial gradients in the lockup's colours under a fine noise. The green
   is weaker than the blue on purpose: green is the accent in this product, not
   a light source.

   The noise is an inlined feTurbulence at 2.5%. Flat #00243C across a 1500px
   card bands visibly on an 8-bit panel, which is the one place a "premium"
   surface gives itself away. */
.nzc-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(64% 130% at 6% 0%, rgba(76, 130, 255, 0.28) 0%, transparent 62%),
        radial-gradient(46% 110% at 96% 100%, rgba(59, 211, 4, 0.13) 0%, transparent 64%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* ---- type on the hero ----
   Stated rather than inherited. The pages put their own colours on these —
   .cy-head h1 is var(--shell-text), which is near-black — so a `color: #fff`
   on the parent alone leaves a black heading on a navy card. */
.nzc-hero > * { position: relative; z-index: 1; }

.nzc-hero h1, .nzc-hero h2 {
    margin: 0;
    color: #fff !important;
    font-size: clamp(22px, 1.4vw + 14px, 28px);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.nzc-hero p {
    margin: 9px 0 0;
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 14.5px;
    line-height: 1.55;
}

/* The eyebrow is the ring green — the same job it has in the sidebar: it
   labels, it never marks state. */
.nzc-hero .nzc-eyebrow,
.nzc-hero__eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--nzc-green) !important;
}

/* ---- controls on a dark ground ----
   A select and a button drawn for a white page are invisible or garish on
   navy. These are scoped INSIDE .nzc-hero, so the page's own light-ground
   versions are untouched everywhere else. */
.nzc-hero select,
.nzc-hero .cy-select {
    height: 42px;
    padding: 0 34px 0 14px !important;
    max-width: 260px;
    font: 500 14px/1 inherit;
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 10px !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.nzc-hero select:hover { background-color: rgba(255, 255, 255, 0.16) !important; }
.nzc-hero select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The options render on the OS menu, which is light. */
.nzc-hero select option { color: #0f172a; background: #fff; }

.nzc-hero .cy-btn,
.nzc-hero button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px !important;
    font: 600 14px/1 inherit;
    color: #fff !important;
    background: var(--nzc-blue-lift) !important;
    border: 0 !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: background 0.16s var(--nzc-out), transform 0.16s var(--nzc-out);
}

.nzc-hero .cy-btn:hover,
.nzc-hero button:hover { background: #6E9BFF !important; transform: translateY(-1px); }
.nzc-hero button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 720px) {
    .nzc-hero { padding: 20px 18px; border-radius: 14px; }
    .nzc-hero--bar { align-items: stretch; }
    .nzc-hero__actions { width: 100%; }
    .nzc-hero__actions > * { flex: 1; }
    .nzc-hero select, .nzc-hero .cy-select { max-width: none; }
}


/* =============================================================================
   2b — THE WELCOME CARD
   -----------------------------------------------------------------------------
   org-home.html opened with two stacked bare headers: a "NETO" bar with an
   avatar, then an h1 reading "Welcome," and a grey paragraph. Neither was a
   card, neither was on a surface, and between them they used 180px of the top
   of the page to say the user's name twice.

   This is one card doing both jobs — greeting on the left, account on the
   right, and the four places you would actually go next as chips underneath,
   so the first screen of the console offers a route rather than a sentence.

   OVERFLOW IS DELIBERATELY VISIBLE HERE, unlike .nzc-hero. The account chip
   opens a logout dropdown, which is position:absolute inside it; an
   `overflow: hidden` on the card would clip it to nothing — the same failure
   the sidebar tooltips had. The radius still has to clip the grid and the
   bloom, so those two pseudo-elements carry `border-radius: inherit` and clip
   themselves instead of relying on the parent.
   ========================================================================== */

/* app-shell.css hides the state-dependent blocks behind `html.nz-resolving`
   until the org lookup answers, by class name — and one of the names it lists
   is `.welcome-section`, which this card replaced. Without this line the
   greeting is the one thing that paints before the answer arrives, flashing
   "Welcome" and then rewriting itself to "Welcome to <org>". */
html.nz-resolving .nzc-welcome { display: none !important; }

.nzc-welcome {
    overflow: visible;                  /* see the note above */
    padding: 32px 36px 28px;
    margin-bottom: 26px;
    border-radius: 22px;
}

.nzc-welcome::before,
.nzc-welcome::after { border-radius: inherit; overflow: hidden; }

/* The ring, quartered off the bottom-right corner.
   It is the logo's arc, at the logo's 35-degree start — the same geometry the
   loader spins — drawn once, large, and faint enough to be a watermark rather
   than a graphic. The first pass had it at 0.30 and 420px, which read as a
   stray green circle sitting on the card and collided with the chips. At 0.13
   it registers as the mark only once you look for it, which is the job. */
.nzc-welcome::after {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460' viewBox='0 0 460 460'%3E%3Cg fill='none' stroke-linecap='round' transform='rotate(35 230 230)'%3E%3Ccircle cx='230' cy='230' r='168' stroke='%233BD304' stroke-opacity='0.13' stroke-width='15' stroke-dasharray='845 211'/%3E%3Ccircle cx='230' cy='230' r='206' stroke='%234C82FF' stroke-opacity='0.10' stroke-width='2' stroke-dasharray='5 15'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(64% 130% at 6% 0%, rgba(76, 130, 255, 0.30) 0%, transparent 62%),
        radial-gradient(52% 120% at 92% 104%, rgba(59, 211, 4, 0.14) 0%, transparent 64%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-position: right -150px top -120px, 0 0, 0 0, 0 0;
    background-size: 460px 460px, auto, auto, auto;
}

/* ---- the top row: greeting left, account right ---- */
.nzc-welcome__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

/* flex: 1 matters. Without it the copy column is `flex: 0 1 auto` — sized to
   its content — and the lead wrapped to three short lines with 400px of empty
   card beside it. */
.nzc-welcome__copy { flex: 1 1 auto; min-width: 0; max-width: 64ch; }

.nzc-welcome h1 {
    font-size: clamp(25px, 1.7vw + 15px, 34px);
    line-height: 1.15;
    letter-spacing: -0.022em;
}

.nzc-welcome__lead {
    margin: 11px 0 0;
    font-size: 15px !important;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72) !important;
}

/* ---- the account chip ----
   .profile-container keeps its id and its inline onclick, so the dropdown JS
   is untouched; this only restyles the two visible pieces for a dark ground. */
.nzc-welcome__account {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
    padding: 7px 9px 7px 16px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.nzc-welcome__account .page-title {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    color: #fff !important;
}

.nzc-welcome__account .profile-avatar {
    width: 34px;
    height: 34px;
    font-size: 14px;
    /* The ring green, on navy: 9.1:1 against #00243C. The blue it used —
       #081d33 — was all but invisible against this card. */
    color: #00243C !important;
    background: var(--nzc-green) !important;
    box-shadow: 0 0 0 3px rgba(59, 211, 4, 0.18);
}

.nzc-welcome__account .profile-avatar:hover { background: #57E524 !important; }

/* The dropdown is the one child allowed out of the box. */
.nzc-welcome__account .profile-dropdown { z-index: 40; }

/* ---- the chips ----
   Four links, not a nav: the pages an org owner opens on arriving. Glass
   rather than solid so they sit ON the card instead of punching holes in it,
   and the icon carries the colour so the label can stay white and readable. */
.nzc-welcome__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.nzc-welcome__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 17px 10px 13px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    transition: background 0.18s var(--nzc-out),
                border-color 0.18s var(--nzc-out),
                transform 0.18s var(--nzc-out);
}

.nzc-welcome__chip i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--nzc-green);
    background: rgba(59, 211, 4, 0.14);
    border-radius: 8px;
    transition: background 0.18s var(--nzc-out), color 0.18s var(--nzc-out);
}

.nzc-welcome__chip:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.nzc-welcome__chip:hover i { background: var(--nzc-green); color: #00243C; }
.nzc-welcome__chip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 860px) {
    .nzc-welcome { padding: 24px 20px 22px; border-radius: 18px; }
    .nzc-welcome__top { flex-direction: column-reverse; align-items: stretch; }
    .nzc-welcome__account { align-self: flex-start; }
    .nzc-welcome__links { margin-top: 20px; padding-top: 18px; }
    .nzc-welcome__chip { flex: 1 1 calc(50% - 5px); }
    .nzc-welcome::after { background-position: right -180px bottom -200px, 0 0, 0 0, 0 0; }
}


/* =============================================================================
   2b-ii — THE NO-FARM WELCOME CARD
   -----------------------------------------------------------------------------
   dashboard.html's #welcomeView. For a farmer whose buddy has not registered
   their farm yet, this card IS the product — it is the entire screen, and it
   is the first thing a new account ever sees.

   It was rendering with no card at all: no background, no border, no icon
   tile, and a white-on-white "Contact NetZero Aqua" button that could not be
   seen. Not a styling problem — dashboard.html did not link nz-palette.css,
   so every var(--nz-*) in app-shell.css resolved to nothing. Section 2d has
   the full account of that.

   With the tokens loaded the card is correct. What is below is the part that
   makes it worth looking at: an empty state is the one light surface in this
   console where decoration is the right answer, because there is no data on
   it to compete with.
   ========================================================================== */

.nofarm {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 580px;
    margin: clamp(24px, 6vh, 64px) auto;
    padding: 44px 44px 38px;
    border-radius: 24px;
    border-color: #E8EDF5;
    box-shadow: 0 1px 2px rgba(15, 30, 55, 0.04),
                0 18px 48px rgba(15, 30, 55, 0.08);
}

/* A wash off the top edge in the two brand colours, at strengths that read as
   light falling on the card rather than as a coloured panel. Plus the same
   measured grid the dark heroes carry, masked away before it reaches the
   text — this console's motif, at the strength a white ground can take. */
.nofarm::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 68% at 50% -14%, rgba(59, 211, 4, 0.13) 0%, transparent 58%),
        radial-gradient(90% 52% at 8% -6%, rgba(76, 130, 255, 0.11) 0%, transparent 62%);
    pointer-events: none;
}

.nofarm::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, rgba(0, 36, 60, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 36, 60, 0.05) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 46%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 46%);
    pointer-events: none;
}

.nofarm > * { position: relative; z-index: 1; }

/* The icon tile, with the ring around it rather than on it. A flat lime
   square is a placeholder; a tile inside a lime halo is the mark. */
.nofarm__icon {
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
    font-size: 29px;
    border-radius: 22px;
    background: linear-gradient(160deg, #EBFBE6 0%, #DCF7D2 100%);
    box-shadow: 0 0 0 1px rgba(59, 211, 4, 0.20),
                0 0 0 9px rgba(59, 211, 4, 0.07),
                0 8px 18px rgba(33, 122, 0, 0.12);
}

.nofarm h1 {
    font-size: clamp(23px, 1.4vw + 15px, 28px);
    letter-spacing: -0.02em;
}

/* No max-width: the card is already 492px of content, and a 44ch cap on top
   of that broke a three-line paragraph into four with "lot." alone on the last. */
.nofarm__lead { margin-bottom: 24px; }

/* The primary action. It was a flat navy rectangle; this gives it the depth
   every other interactive surface in the console has, and a press. */
.nofarm__call,
.nofarm__btn {
    background: linear-gradient(180deg, #00365A 0%, #00243C 100%) !important;
    box-shadow: 0 1px 2px rgba(0, 36, 60, 0.20),
                0 10px 22px rgba(0, 36, 60, 0.22);
    transition: transform 0.18s var(--nzc-out), box-shadow 0.18s var(--nzc-out);
}

.nofarm__call:hover,
.nofarm__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 36, 60, 0.20),
                0 16px 30px rgba(0, 36, 60, 0.26);
}

.nofarm__call:active,
.nofarm__btn:active { transform: translateY(0); }

.nofarm__call:focus-visible,
.nofarm__btn:focus-visible { outline: 3px solid rgba(0, 74, 247, 0.5); outline-offset: 3px; }

/* The buddy's number, when there is one, is the single most useful thing on
   this screen — so the panel holding it gets a lime edge rather than the same
   grey hairline as everything else. */
.nofarm__buddy {
    border-color: rgba(59, 211, 4, 0.28);
    background: linear-gradient(180deg, #FBFEFA 0%, #F5FBF2 100%);
}

.nofarm__note {
    padding-top: 18px;
    border-top: 1px solid #EDF1F7;
}

@media (max-width: 620px) {
    .nofarm { padding: 32px 22px 26px; border-radius: 18px; }
    .nofarm__icon { width: 62px; height: 62px; font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
    .nofarm__call, .nofarm__btn { transition: none !important; }
    .nofarm__call:hover, .nofarm__btn:hover { transform: none; }
}


/* -----------------------------------------------------------------------------
   `.main-workspace > * { width: 100% }` in section 1 is what fixed the
   shrink-to-fit bug. On org-home it exposed a second one that the old narrow
   layout had been hiding: two blocks carry symmetric pixel margins —

       .org-overview { margin: 35px; }
       .features-grid { margin: 20px; padding: 20px; }

   width:100% plus a 35px margin each side is 100% + 70px, so the members card
   ran off the right edge of the screen and the feature grid sat 20px off
   centre. Margin-box, not content-box: this is the standard CSS trap, and the
   fix is to keep the vertical rhythm and drop the horizontal halves rather
   than to reach for box-sizing, which does not apply to margins.
   ========================================================================== */

/* =============================================================================
   2d — THE MISSING PALETTE  (a markup fix, recorded here because this is
        where anyone chasing "why did that card have no background" will look)
   -----------------------------------------------------------------------------
   css/nz-palette.css defines every --nz-* token, and re-points the older
   --shell-* names at the sampled logo values. It is tokens only — no element
   selectors, no layout — so it is safe to load before anything else, which is
   exactly what it was written for.

   Twelve of the thirteen console pages never linked it. Only my-farm.html
   did. So on every other page:

       app-shell.css         29 uses of var(--nz-*)   -> nothing
       farmer-dashboard.css  30 uses                  -> nothing
       cycles.css            22 uses                  -> nothing

   An unresolvable var() with no fallback makes the declaration invalid at
   computed-value time, so each one fell back to the INHERITED value, not to a
   sensible default. In practice: `background: var(--nz-surface)` on a card
   inherited transparent, `background: var(--nz-navy)` on a button inherited
   transparent and left white text on a white page, and `color:
   var(--nz-lime-text)` on the icon inherited near-black.

   That is the real reason my-farm.html looked finished and the rest of the
   console looked unstyled. No amount of work on the components would have
   fixed it, because the components were already right.

   The fix is one line in the <head> of each page, ahead of every other
   stylesheet:

       <link rel="stylesheet" href="css/nz-palette.css">

   If a new console page ever looks flat and grey, check that line first.
   ========================================================================== */


/* =============================================================================
   2e — LEGACY MARGINS THAT SECTION 1 TURNED INTO OVERFLOW (org-home)
   ========================================================================== */

.main-workspace > .org-overview { margin: 0 0 24px; }
.main-workspace > .features-grid { margin: 0; padding: 0; gap: 18px; }

/* Raised from 280px. Recovering that 80px of margin widened the grid enough
   for auto-fit to take a fifth column, and at 280px the cards were too narrow
   for their own headings: "Scenario Builder" and "Carbon Footprint" wrapped
   onto two lines beside the Explore link and the row lost its baseline.
   320 gives four across at every desktop width and two on a tablet. */
.features-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* The heading row is `justify-content: space-between` with no basis on either
   side, so the title and the link negotiated width between them and the title
   lost. The title takes the slack; the link never shrinks. */
.feature-item .feature-title-wrap { flex: 1 1 auto; min-width: 0; }
.feature-item .explore-link,
.feature-item .coming-soon { flex: none; }
.feature-item .feature-title { line-height: 1.3; }


/* =============================================================================
   3 — LIGHT SURFACES: ELEVATION, NOT DECORATION
   -----------------------------------------------------------------------------
   A card holding a water-quality figure has one job. What it gets is depth —
   a hairline, a small offset shadow, and a lift when it is something you can
   click — and nothing that competes with the number on it.
   ========================================================================== */

.biz-card,
.kpi-card,
.dash-card,
.settings-card,
.farm-card,
.product-card,
.mf-stat,
.co-card {
    border: 1px solid #E5EAF2;
    border-radius: 14px;
    background: #fff;
    /* Two shadows: a hairline that sharpens the edge against the page tint,
       and a soft drop that does the lifting. One shadow doing both is either
       too hard at the edge or too vague underneath. */
    box-shadow: 0 1px 2px rgba(15, 30, 55, 0.05),
                0 6px 18px rgba(15, 30, 55, 0.05);
    transition: transform 0.22s var(--nzc-out),
                box-shadow 0.22s var(--nzc-out),
                border-color 0.22s var(--nzc-out);
}

/* Only things you can actually go to lift. A stat tile that rises under the
   cursor is promising a click it does not have. */
a.mf-row:hover,
a.farm-card:hover,
a.product-card:hover,
.mf-cta:hover {
    transform: translateY(-2px);
    border-color: rgba(76, 130, 255, 0.42);
    box-shadow: 0 2px 4px rgba(15, 30, 55, 0.06),
                0 14px 30px rgba(15, 30, 55, 0.10);
}

/* The page tint gets the same grid, at a twentieth of the strength. It is
   below the threshold of "I can see a grid" and above the threshold of "this
   is a flat grey rectangle", which is the whole point. */
.dashboard-content {
    background-image:
        linear-gradient(to right, rgba(0, 74, 247, 0.028) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 74, 247, 0.028) 1px, transparent 1px);
    background-size: var(--nzc-grid) var(--nzc-grid);
}


/* =============================================================================
   4 — SECTION HEADINGS
   ========================================================================== */

.nzc-eyebrow,
.mf-section-label,
.farms-header h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


/* =============================================================================
   5 — MOTION
   -----------------------------------------------------------------------------
   js/nz-console.js registers cards with an IntersectionObserver and stamps a
   transition-delay for the stagger. This restores behaviour that used to live
   in sidebar-pro.js and was lost when that file was rewritten — it belongs
   here, because it is page chrome, not navigation.

   Everything animates transform and opacity only.
   ========================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.42s var(--nzc-out), transform 0.42s var(--nzc-out);
}

[data-reveal].reveal-in { opacity: 1; transform: none; }

/* The hero lifts off the page as soon as anything scrolls under it, so the
   surface says "there is more above" without a rule or a label. Scoped to
   .nzc-hero, not to a guessed list of page class names — see section 2. */
.nzc-hero { transition: box-shadow 0.28s var(--nzc-ease); }

body.is-scrolled .nzc-hero { box-shadow: 0 18px 40px rgba(0, 18, 34, 0.16); }


/* =============================================================================
   6 — ON NEUBRUTALISM
   -----------------------------------------------------------------------------
   It was asked for and it is deliberately not here, so the reasoning is on
   record rather than left as an omission someone "fixes" later.

   Neubrutalism is hard black borders, offset solid shadows, clashing flat
   fills, and type that crowds its box. It works — genuinely — where friction
   is the point: a portfolio, a launch page, a product that wants to feel
   made-by-hand. Its whole mechanism is that every element shouts equally.

   This console is read by a farmer checking whether a CAA registration has
   lapsed and whether the water in pond 7 is where it should be. Two things
   break under that treatment:

     - SCANNING. A 3px black border on every card removes the hierarchy that
       makes a page scannable, because nothing can recede. The eye has no
       cheap way to find the one card that matters.
     - STATUS. The aesthetic wants saturated flats. This product spends
       saturated colour on meaning: red is an expired registration, amber is
       outstanding work, green is the brand. A neubrutalist palette would have
       to borrow those, and then a decorative yellow panel and a real warning
       look the same.

   It would also be the only surface in the product wearing it — the marketing
   site, the buddy console and the admin console are all one system now.

   If the look is wanted, the right home for it is a marketing page, where it
   can shout and nothing depends on reading it correctly under pressure.
   ========================================================================== */


/* =============================================================================
   7 — REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .biz-card, .kpi-card, .dash-card, .settings-card,
    .farm-card, .product-card, .mf-stat, .co-card,
    .nzc-hero { transition: none !important; }
    a.mf-row:hover, a.farm-card:hover, a.product-card:hover, .mf-cta:hover { transform: none; }
}


/* =============================================================================
   8 — THE LOADER
   -----------------------------------------------------------------------------
   The mark that sits over the workspace while a page resolves. js/netzero-
   loading.js writes the markup; this styles it.

   What it replaces: a CSS border-circle in #8add62, "NET ZERO" in Segoe UI,
   and an "AQUA" assembled from the characters "ΛQ U Λ" in #022442. Three
   colours the brand does not own and a wordmark that is not the wordmark — on
   the first thing a farmer sees on every page load.

   It is the real artwork now. The lettering is the source file with the ring
   erased; the ring is one SVG circle redrawn from geometry measured off that
   same file, so it can turn without going soft at any size.

   #49D50D, not #3BD304. The palette's brand green is sampled from the NET ZERO
   text, which is #39D206; the RING is #49D50D — a shade brighter. Here the arc
   sits directly against lettering cut from the same PNG, so it has to match
   that lettering rather than the token, or the join shows.
   ========================================================================== */

#loading-overlay {
    position: fixed !important;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--shell-page, #F4F7FC) !important;
    opacity: 1;
    transition: opacity 0.45s var(--nzc-out);

    /* app-shell.css sets `left: 100px !important` and a matching width — the
       rail's width BEFORE it was rebuilt at 72. An `inset` shorthand cannot
       beat an !important longhand, so these are longhands too. Left stale, the
       overlay had a 28px strip of bare page down its left edge. */
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: var(--nzs-rail, 72px) !important;
    width: auto !important;
    height: auto !important;
}

body:not(:has(dashboard-sidebar)) #loading-overlay { left: 0 !important; }

@media (max-width: 768px) { #loading-overlay { left: 0 !important; } }

#loading-overlay.loader-hidden { opacity: 0; pointer-events: none; }

.nzl { display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* One box, two layers, same scale and origin as the source artwork — which is
   what puts the arc exactly where the erased ring was. Square, because the
   loader is the ring and NET ZERO only; the AQUA wordmark that made the box
   wide is cropped out of the image. */
.nzl__mark {
    position: relative;
    width: clamp(160px, 22vw, 240px);
    aspect-ratio: 1 / 1;
}

.nzl__ring,
.nzl__word {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.nzl__ring circle {
    fill: none;
    stroke: #49D50D;
    stroke-width: 13.0;
    stroke-linecap: round;          /* the drawn ring's ends are tapered, not cut */
    transform-box: view-box;
    transform-origin: 148.5px 149.5px;
    animation: nzl-spin 1.45s linear infinite;
}

/* A FULL TURN, and it has to be written as both ends.

   This was `{ to { transform: rotate(395deg) } }` — 35 plus a full circle,
   with the 35 assumed to be coming from the transform="rotate(35 ...)"
   attribute on the <circle>. It was not. A CSS `transform` overrides an SVG
   transform PRESENTATION ATTRIBUTE completely, so the implicit `from` was
   0deg, not 35deg: the ring swept 395 degrees and then snapped back 35 at
   every loop boundary. Which is exactly what a rotation is not — it read as
   the gap sliding round and catching, rather than as a wheel turning.

   from and to are both declared now, exactly 360 apart, starting at the 28
   degrees that puts the gap where the logo actually has it. The attribute on
   the element is what holds that position before the animation starts and if
   the animation never runs at all. */
@keyframes nzl-spin {
    from { transform: rotate(28deg); }
    to   { transform: rotate(388deg); }
}

.nzl__sr {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* The old vocabulary, in case a cached netzero-loading.js is still serving the
   previous markup. Brand colours rather than the three it used to use. */
.spinning-ring { border-color: #49D50D !important; border-right-color: transparent !important; }
.net-zero-text { color: #39D206 !important; }
.aqua-text     { color: #004AF7 !important; }

@media (prefers-reduced-motion: reduce) {
    /* Still turning, because a still spinner reads as a frozen page — just
       slowly enough not to be a trigger. */
    .nzl__ring circle { animation-duration: 3.2s; }
    #loading-overlay { transition: none; }
}


/* =============================================================================
   TYPE
   =============================================================================
   One family across the console, set here because this sheet loads last on
   every console page and therefore beats css/style.css — which puts Nunito on
   the body for the marketing site and was reaching the console through the
   same file.

   The stack itself lives in css/nz-palette.css, with the reasoning for the
   choice. This is only the application of it.

   `font-family: inherit` on the form controls is not incidental: a select and
   an input do NOT inherit the page font on their own, and an unstyled select
   in the middle of a styled page is one of the two or three things that most
   reliably makes an interface look unfinished.
   ========================================================================== */

body,
.main-workspace,
.dashboard-content {
    font-family: var(--nz-font);
    /* Plex's figures are tabular by design, but the lining/oldstyle default
       varies by renderer. Pinning it here means a column of hectares lines up
       without a per-rule override. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prose keeps proportional figures — tabular numerals in a sentence look like
   a spreadsheet leaked into it. The tabular default above is for the tables,
   tiles and value columns that actually need to align. */
p, li, .nzc-hero p, .fd-empty p, .srs-says {
    font-variant-numeric: normal;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--nz-font-display); }

input, select, textarea, button { font-family: inherit; }