/* =============================================================================
   FARM FINANCIALS
   =============================================================================
   Four figures, a trend, where the money went, the ponds side by side, and
   three per-kilo comparisons — with a rail that says what it all amounts to.

   WHAT THE COLOURS MEAN HERE

   Two things on this page are coloured, and both are readings. The cost
   categories wear a validated categorical set (see
   claude/chart-series-palette.md); revenue / cost / profit wear green / red /
   blue, which is the one place a semantic pair is right — money in and money
   out are opposites, not two members of a series.

   Everything else is navy on white. The status chips in the pond table carry
   their word as well as their wash, so a colourblind farmer reads the same
   table as everyone else.

   RED IS NOT AN ALARM HERE. The Total Cost tile is red-washed because cost is
   money leaving, not because anything is wrong — the tile's own foot carries
   the judgement ("↓ 6% vs last cycle" in green when cost fell).
   ========================================================================== */

/* ------------------------------------------------------------- breadcrumb */

.fn-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--nz-text-3, #94A3B8);
}

.fn-crumbs a { color: var(--nz-text-2, #475569); text-decoration: none; }
.fn-crumbs a:hover { color: var(--nz-blue, #004AF7); text-decoration: none; }
.fn-crumbs i { font-size: 11px; color: var(--nz-text-3, #CBD5E1); }
.fn-crumbs [aria-current] { font-weight: 600; color: var(--nz-navy, #00243C); }


/* ----------------------------------------------------------------- header */

.fn-head { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }

.fn-head__ico {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    font-size: 21px;
    color: var(--nz-navy, #00243C);
}

.fn-head__copy { min-width: 0; }

.fn-head h1 {
    margin: 0;
    font-family: var(--nz-font-display);
    font-size: clamp(24px, 1.4vw + 16px, 31px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--nz-navy, #00243C);
}

.fn-head p { margin: 3px 0 0; font-size: 14.5px; color: var(--nz-text-2, #475569); }

.fn-head__pickers { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }

/* A real <select> lives on top of the card at zero opacity: the card shows
   two lines a bare <select> cannot draw, while every native behaviour
   (keyboard, mobile wheel, screen reader) stays the browser's. */
.fn-picker {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label caret" "sub caret";
    align-items: center;
    gap: 0 12px;
    min-width: 200px;
    padding: 9px 13px;
    margin: 0;
    background: var(--nz-surface, #fff);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 12px;
    cursor: pointer;
}

.fn-picker:focus-within {
    border-color: var(--nz-lime, #3BD304);
    box-shadow: 0 0 0 3px rgba(59, 211, 4, .16);
}

.fn-picker__label {
    grid-area: label;
    font-size: 14px; font-weight: 600; line-height: 1.3;
    color: var(--nz-navy, #00243C);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fn-picker__sub {
    grid-area: sub;
    display: flex; align-items: center; gap: 5px;
    font-size: 11.5px; line-height: 1.35;
    color: var(--nz-text-3, #94A3B8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fn-picker__caret { grid-area: caret; font-size: 13px; color: var(--nz-text-3, #94A3B8); }

.fn-picker select {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font: inherit;
}

.fn-error {
    margin-bottom: 16px;
    padding: 13px 16px;
    font-size: 13.5px;
    color: #9F1239;
    background: #FFF1F2;
    border: 1px solid #FBD5DC;
    border-radius: 12px;
}


/* ------------------------------------------------------------ the figures */

.fn-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.fn-kpi {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 17px;
    border-radius: 14px;
    border: 1px solid transparent;
}

.fn-kpi--green  { background: #EFF9F2; border-color: #D8EFE1; }
.fn-kpi--red    { background: #FEF1F1; border-color: #FBDADA; }
.fn-kpi--blue   { background: #EFF5FE; border-color: #DCE8FB; }
.fn-kpi--purple { background: #F4F0FE; border-color: #E6DCFB; }

.fn-kpi__ico {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    font-size: 17px;
    background: #fff;
    border-radius: 12px;
}

.fn-kpi--green  .fn-kpi__ico { color: #157F52; }
.fn-kpi--red    .fn-kpi__ico { color: #DC2626; }
.fn-kpi--blue   .fn-kpi__ico { color: #2563EB; }
.fn-kpi--purple .fn-kpi__ico { color: #7C3AED; }

.fn-kpi__body { min-width: 0; }

.fn-kpi__value {
    display: block;
    font-family: var(--nz-font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--nz-navy, #00243C);
}

/* "At harvest" — a sentence where a number belongs. It drops to label size so
   the row still scans as figures, and keeps full contrast because it is the
   answer, not a placeholder. */
.fn-kpi__value.is-absent {
    font-family: var(--nz-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    color: var(--nz-text-2, #475569);
}

.fn-kpi__label { display: block; margin-top: 2px; font-size: 12.5px; color: var(--nz-text-2, #475569); }

.fn-kpi__foot { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 600; line-height: 1.35; }

.fn-kpi__foot--ok   { color: #157F52; }
.fn-kpi__foot--warn { color: #B45309; }
.fn-kpi__foot--bad  { color: #B91C1C; }
.fn-kpi__foot--none { color: var(--nz-text-3, #94A3B8); font-weight: 500; }


/* -------------------------------------------------------------- the tabs */

.fn-tabs { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }

.fn-tabs__list {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--nz-surface, #fff);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 12px;
    overflow-x: auto;
}

.fn-tab {
    flex: none;
    padding: 8px 15px;
    font: inherit; font-size: 13px; font-weight: 600;
    white-space: nowrap;
    color: var(--nz-text-2, #475569);
    background: transparent;
    border: 0; border-radius: 9px;
    cursor: pointer;
}

.fn-tab.is-on { color: #fff; background: var(--nz-blue, #004AF7); }

/* Named because the mockup names them, disabled because they are not built.
   A tab that looks live and does nothing is the worse of the two. */
.fn-tab[disabled] { color: var(--nz-text-3, #94A3B8); cursor: not-allowed; }

.fn-range {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--nz-text-2, #475569);
    background: var(--nz-surface, #fff);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 11px;
}

.fn-range i { color: var(--nz-text-3, #94A3B8); }


/* ------------------------------------------------------------- the layout

   Three columns: the trend, the breakdown, and a rail that runs the height of
   the page beside them. The table and the three small charts take the two
   left columns; the rail keeps going. */

.fn-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.fn-card--trend { grid-column: 1; }
.fn-card--donut { grid-column: 2; }
.fn-rail        { grid-column: 3; grid-row: 1 / span 3; }
.fn-card--table { grid-column: 1 / span 2; }
.fn-row3        { grid-column: 1 / span 2; display: grid;
                  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.fn-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }


/* ------------------------------------------------------------- the card */

.fn-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px 18px;
    background: var(--nz-surface, #fff);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 36, 60, .04), 0 8px 22px rgba(0, 36, 60, .04);
}

.fn-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fn-card__head h2 {
    margin: 0;
    font-family: var(--nz-font-display);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--nz-navy, #00243C);
}

.fn-card__note { font-size: 12px; color: var(--nz-text-3, #94A3B8); text-align: right; }

.fn-lede { margin: 0 0 16px; max-width: 76ch; font-size: 13px; line-height: 1.6;
           color: var(--nz-text-2, #475569); }


/* ------------------------------------------------------------- the charts */

.fn-chart { position: relative; min-width: 0; }

.fn-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Named fn-gridline, NOT fn-grid: fn-grid is this page's layout grid and a
   stroke rule landing on it would be a silent, baffling bug. */
.fn-gridline { stroke: rgba(0, 36, 60, .09); stroke-width: 1; }

/* Sized in viewBox units: the rendered size is this times the card width over
   the viewBox width, so 12 lands near 11px on a desktop card. */
.fn-axis { font-family: var(--nz-font); font-size: 12px; fill: var(--nz-text-3, #94A3B8); }
.fn-axis--unit { font-size: 11px; letter-spacing: .02em; }

.fn-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* A 2px surface ring, so where two lines cross both stay readable. */
.fn-dot { stroke: #fff; stroke-width: 2; }

.fn-hit { fill: transparent; stroke: none; pointer-events: all; cursor: crosshair; }

.fn-bar { stroke: none; }

/* Every bar direct-labelled — three or four bars is exactly the case where a
   label on each beats a legend and an axis lookup. Navy, not the bar's
   colour: text wears text tokens. */
.fn-barlab {
    font-family: var(--nz-font);
    font-size: 13px;
    font-weight: 700;
    fill: var(--nz-navy, #00243C);
}

.fn-tip {
    position: absolute;
    z-index: 6;
    transform: translate(-50%, calc(-100% - 12px));
    padding: 7px 10px;
    border-radius: 9px;
    background: rgba(0, 24, 40, .93);
    color: #fff;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 36, 60, .22);
}

.fn-tip.is-below { transform: translate(-50%, 12px); }
.fn-tip strong { display: block; font-size: 12.5px; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; }
.fn-tip span { display: block; margin-top: 1px; font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, .72); }
.fn-tip[hidden] { display: none; }

.fn-legend {
    display: flex; flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 0 0; padding: 0;
    list-style: none;
}

.fn-legend li { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--nz-text-2, #475569); }
.fn-legend__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.fn-legend b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--nz-navy, #00243C); }

.fn-nochart {
    display: flex;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 9px;
    min-height: 160px;
    padding: 18px;
    text-align: center;
    font-size: 12.5px; line-height: 1.55;
    color: var(--nz-text-3, #94A3B8);
    background: var(--nz-surface-alt, #F7FAFD);
    border: 1px dashed var(--nz-border, #E5EAF2);
    border-radius: 12px;
}

.fn-nochart i { font-size: 19px; color: #CBD5E1; }


/* ------------------------------------------------------------- the donut */

.fn-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.fn-donut__ring { position: relative; flex: none; width: 150px; }
.fn-donut__ring svg { display: block; width: 100%; height: auto; }

/* The total belongs in the hole: it is what every slice is a share of, and a
   ring with an empty middle makes the reader hunt for it. */
.fn-donut__mid {
    position: absolute;
    inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    pointer-events: none;
}

.fn-donut__mid strong {
    font-family: var(--nz-font-display);
    font-size: 19px; font-weight: 700; line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--nz-navy, #00243C);
}

.fn-donut__mid span { margin-top: 2px; font-size: 10.5px; color: var(--nz-text-3, #94A3B8); }

.fn-donut__key { flex: 1 1 170px; margin: 0; padding: 0; list-style: none; min-width: 0; }

.fn-donut__key li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 12.5px;
    color: var(--nz-text-2, #475569);
}

.fn-donut__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-donut__pct { font-variant-numeric: tabular-nums; color: var(--nz-text-3, #94A3B8); }
.fn-donut__key b { font-variant-numeric: tabular-nums; color: var(--nz-navy, #00243C); }


/* ------------------------------------------------------- the rail: health */

.fn-health { align-items: flex-start; }

.fn-health__ico {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    margin-bottom: 11px;
    font-size: 16px;
    border-radius: 12px;
}

.fn-health__label { font-size: 12.5px; color: var(--nz-text-2, #475569); }

.fn-health__verdict {
    display: block;
    margin-top: 2px;
    font-family: var(--nz-font-display);
    font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
}

.fn-health p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--nz-text-2, #475569); }
.fn-health p b { color: var(--nz-navy, #00243C); }

.fn-health--good { background: #F1FAF4; border-color: #D5EFE0; }
.fn-health--good .fn-health__ico { color: #157F52; background: #DCF3E6; }
.fn-health--good .fn-health__verdict { color: #157F52; }

.fn-health--fair { background: #F7FAFF; border-color: #DCE8FB; }
.fn-health--fair .fn-health__ico { color: #2563EB; background: #E4EDFD; }
.fn-health--fair .fn-health__verdict { color: #2563EB; }

.fn-health--thin { background: #FFFBF2; border-color: #F6E5C6; }
.fn-health--thin .fn-health__ico { color: #B45309; background: #FBEFD9; }
.fn-health--thin .fn-health__verdict { color: #B45309; }

.fn-health--loss { background: #FFF5F5; border-color: #FBDADA; }
.fn-health--loss .fn-health__ico { color: #B91C1C; background: #FCE4E4; }
.fn-health--loss .fn-health__verdict { color: #B91C1C; }

.fn-health--idle .fn-health__ico { color: var(--nz-text-2, #475569); background: var(--nz-surface-alt, #F1F5F9); }

.fn-health--idle .fn-health__verdict {
    font-family: var(--nz-font);
    font-size: 16px;
    color: var(--nz-navy, #00243C);
}


/* ----------------------------------------------------- the rail: insights */

.fn-ins { display: flex; flex-direction: column; gap: 14px; }

.fn-ins__row { display: flex; align-items: flex-start; gap: 11px; }

.fn-ins__ico {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    font-size: 12px;
    border-radius: 10px;
}

.fn-ins__ico--up   { color: #157F52; background: #E6F6EC; }
.fn-ins__ico--down { color: #B91C1C; background: #FCE8E8; }
.fn-ins__ico--tip  { color: #B45309; background: #FEF4E2; }

.fn-ins__body { min-width: 0; }
.fn-ins__body strong { display: block; font-size: 13px; font-weight: 600; color: var(--nz-navy, #00243C); }
.fn-ins__body span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--nz-text-2, #475569); }


/* -------------------------------------------------- the rail: quick actions */

.fn-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.fn-qa {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    color: var(--nz-navy, #00243C);
    background: var(--nz-surface-alt, #F7FAFD);
    border: 1px solid var(--nz-border, #E9EEF6);
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s var(--nz-ease, ease);
}

.fn-qa:hover { background: #EDF3FB; color: var(--nz-navy, #00243C); text-decoration: none; }

.fn-qa__ico {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    font-size: 12px;
    color: var(--nz-blue, #004AF7);
    background: var(--nz-blue-soft, #EDF2FE);
    border-radius: 9px;
}


/* -------------------------------------------------------------- the table */

.fn-tblwrap { overflow-x: auto; }

.fn-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }

.fn-tbl thead th {
    padding: 0 12px 10px;
    font-size: 11.5px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    color: var(--nz-text-3, #94A3B8);
    border-bottom: 1px solid var(--nz-border, #E9EEF6);
}

.fn-tbl thead th:first-child { text-align: left; padding-left: 0; }
.fn-tbl thead th:last-child  { text-align: center; padding-right: 0; }

.fn-tbl tbody th,
.fn-tbl tbody td {
    padding: 12px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--nz-text, #0F172A);
    border-bottom: 1px solid var(--nz-border, #F1F5F9);
}

/* Kept as a table-cell. display:flex on a th drops it out of the table model
   and the column alignment goes with it — the swatch is inline instead. */
.fn-tbl tbody th {
    text-align: left;
    padding-left: 0;
    font-weight: 600;
    white-space: nowrap;
    color: var(--nz-navy, #00243C);
}

.fn-tbl tbody td:last-child { text-align: center; padding-right: 0; }

/* The pond's own colour, the same one its bar wears below — the only link
   between this row and the charts. */
.fn-sw { display: inline-block; vertical-align: middle; width: 10px; height: 10px;
         margin-right: 8px; border-radius: 3px; }

.fn-tbl .is-ok  { color: #157F52; font-weight: 600; }
.fn-tbl .is-bad { color: #B91C1C; font-weight: 600; }

.fn-tbl__total th,
.fn-tbl__total td {
    font-weight: 700;
    color: var(--nz-navy, #00243C);
    background: var(--nz-surface-alt, #F7FAFD);
    border-bottom: 0;
}

.fn-tbl__total th:first-child { border-radius: 10px 0 0 10px; }
.fn-tbl__total td:last-child  { border-radius: 0 10px 10px 0; }

.fn-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
}

.fn-chip--ok   { color: #157F52; background: #E6F6EC; }
.fn-chip--good { color: #2563EB; background: #E8F0FE; }
.fn-chip--thin { color: #B45309; background: #FEF4E2; }
.fn-chip--bad  { color: #B91C1C; background: #FCE8E8; }
.fn-chip--idle { color: var(--nz-text-2, #475569); background: var(--nz-surface-alt, #F1F5F9); }

.fn-tbl--cost tbody td:last-child { text-align: right; }
.fn-tbl--cost thead th:last-child { text-align: right; }


/* ---------------------------------------------------------- the rate card */

/* Three across, so the six rates read as two rows rather than a five-plus-one
   ragged block on a wide screen. */
.fn-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    max-width: 860px;
}

@media (min-width: 900px) {
    .fn-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fn-field { display: flex; flex-direction: column; margin: 0; min-width: 0; }

.fn-field__label { font-size: 13px; font-weight: 600; color: var(--nz-navy, #00243C); }
.fn-field__unit { margin-top: 1px; font-size: 11px; color: var(--nz-text-3, #94A3B8); }

.fn-input {
    margin-top: 7px;
    width: 100%;
    min-height: 42px;
    padding: 0 13px;
    font: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--nz-text, #0F172A);
    background: var(--nz-surface, #fff);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 11px;
}

.fn-input:focus {
    outline: none;
    border-color: var(--nz-lime, #3BD304);
    box-shadow: 0 0 0 3px rgba(59, 211, 4, .16);
}

.fn-field__hint { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--nz-text-3, #94A3B8); }

.fn-other { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--nz-border, #EEF2F7); }

.fn-other h3 {
    margin: 0;
    font-family: var(--nz-font-display);
    font-size: 14.5px; font-weight: 600;
    color: var(--nz-navy, #00243C);
}

.fn-other > p { margin: 4px 0 14px; font-size: 12.5px; color: var(--nz-text-2, #475569); }

.fn-other__row { display: grid; grid-template-columns: 220px minmax(0, 1fr);
                 gap: 16px; max-width: 860px; }

.fn-saved { margin: 14px 0 0; font-size: 12.5px; font-weight: 600; color: #157F52; }

.fn-source { margin: 16px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--nz-text-3, #94A3B8); }

.fn-rates { margin-bottom: 18px; }


/* ---------------------------------------------------- loading and nothing */

.fn-loading { padding: 30px 22px; text-align: center; font-size: 14px; color: var(--nz-text-3, #94A3B8); }

.fn-blank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 46px 28px;
    text-align: center;
    background: var(--nz-surface, #fff);
    border: 1px dashed var(--nz-border, #E5EAF2);
    border-radius: 16px;
}

.fn-blank__ico {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    font-size: 21px;
    color: var(--nz-blue, #004AF7);
    background: var(--nz-blue-soft, #EDF2FE);
    border-radius: 16px;
}

.fn-blank h2 {
    margin: 0;
    font-family: var(--nz-font-display);
    font-size: 18px; font-weight: 600;
    color: var(--nz-navy, #00243C);
}

.fn-blank p { margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.6; color: var(--nz-text-2, #475569); }

/* Inside a card, the same message without the box — the card is the box. */
.fn-blank--inline { padding: 20px 4px; border: 0; background: transparent; align-items: flex-start; text-align: left; }
.fn-blank--inline p { font-size: 12.5px; }


/* ------------------------------------------------------------------ narrow */

@media (max-width: 1400px) {
    .fn-grid { grid-template-columns: minmax(0, 1fr) 320px; }
    .fn-card--trend { grid-column: 1; }
    .fn-card--donut { grid-column: 1; }
    .fn-rail { grid-column: 2; grid-row: 1 / span 4; }
    .fn-card--table { grid-column: 1; }
    .fn-row3 { grid-column: 1; }
}

@media (max-width: 1100px) {
    .fn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fn-grid { grid-template-columns: minmax(0, 1fr); }
    .fn-rail { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; }
    .fn-rail > .fn-card { flex: 1 1 280px; }
    .fn-row3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* Below this the card is narrower than the chart needs: scaling the SVG down
   to fit would take the axis text with it. The chart keeps a readable floor
   and the card scrolls it instead. */
@media (max-width: 700px) {
    .fn-chart { overflow-x: auto; overflow-y: hidden; }
    .fn-chart > svg { min-width: 460px; }
    .fn-chart--sm > svg { min-width: 300px; }
}

@media (max-width: 900px) {
    .fn-head { flex-wrap: wrap; }
    .fn-head__copy { flex: 1 1 200px; }
    .fn-head__pickers { width: 100%; margin-left: 0; }
    .fn-picker { flex: 1 1 200px; }
    .fn-range { margin-left: 0; }
    .fn-other__row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .fn-kpis { grid-template-columns: 1fr; }
    .fn-quick { grid-template-columns: 1fr; }

    /* Title and note side by side leaves each about half a phone screen, and
       both wrap. Stacked, neither does. */
    .fn-card__head { flex-direction: column; align-items: flex-start; gap: 3px; }
    .fn-card__note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .fn-qa { transition: none; }
}


/* ------------------------------------------------------------------- print

   "Download PDF" is the browser's own print dialog, which saves to PDF on
   every platform. This strips the shell so what comes out is the figures. */
@media print {
    dashboard-sidebar, netzero-loader, .fn-head__pickers, .fn-tabs, .fn-quick,
    .fn-crumbs { display: none !important; }

    .main-workspace { margin: 0 !important; padding: 0 !important; width: auto !important; }

    .fn-card { break-inside: avoid; box-shadow: none; }
    .fn-grid { grid-template-columns: 1fr; }
    .fn-rail { grid-column: 1; grid-row: auto; }
    .fn-row3 { grid-column: 1; }
}


/* ------------------------------------------------- nothing to show, yet

   A farm whose ponds are mapped but whose first crop is not stocked is not an
   error state — it is a farm one step from being useful. So the empty state
   names the farm, the pickers stay live (two farms, one stocked, is a real
   case), and there is exactly one way forward. */

.fn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--nz-blue, #004AF7);
    border-radius: 11px;
    text-decoration: none;
}

.fn-cta:hover,
.fn-cta:focus { color: #fff; text-decoration: none; filter: brightness(1.08); }

.fn-cta i { font-size: 12px; }

/* A picker with nothing to pick still reads as a control, but an inert one. */
.fn-picker:has(select:disabled) { background: var(--nz-surface-alt, #F7FAFD); cursor: default; }
.fn-picker:has(select:disabled) .fn-picker__label { color: var(--nz-text-2, #475569); }
.fn-picker select:disabled { cursor: default; }


/* =============================================================================
   THE REBUILT FARM FINANCIALS LAYOUT
   =============================================================================
   Four bands. Appended rather than edited in, so the rules above stay readable
   as the history of how this page got here and these win by position.

   Buttons, chips, selects, card heads, tables and the focus ring are NOT set
   here: css/nz-controls.css loads after this file and owns those across every
   console page. What is here is the page's structure, its figure tiles, its
   charts and the two things only this page has — the money tiles and the rate
   editor.
   ========================================================================== */

/* ------------------------------------------------------- the six figures */

.fn-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
    align-items: stretch;
}

.fn-kpi {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 15px;
    border-radius: 16px;
}

.fn-kpi--teal  { background: #ECFAFB; border-color: #D2EDF0; }
.fn-kpi--teal  .fn-kpi__ico { color: #0E7490; }
.fn-kpi--amber { background: #FEF5EC; border-color: #F8E3CE; }
.fn-kpi--amber .fn-kpi__ico { color: #C2410C; }

.fn-kpi__body { min-width: 0; }

.fn-kpi__label {
    display: block;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--nz-text-2, #475569);
}

.fn-kpi__value {
    display: block;
    margin: 3px 0 0;
    font-size: 20px;
    line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fn-kpi__foot { margin-top: 3px; font-size: 11px; line-height: 1.35; }


/* --------------------------------------------------------- the date bar */

.fn-datebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: var(--nz-surface, #fff);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 14px;
}

.fn-datebar__cycle { font-size: 13px; color: var(--nz-text-2, #475569); }
.fn-datebar__cycle b { color: var(--nz-navy, #00243C); }


/* ------------------------------------------------------------- the rows */

.fn-row { display: grid; gap: 18px; margin-bottom: 18px; align-items: stretch; }

.fn-row--top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.fn-row--mid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fn-row--low { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.fn-row--rates { grid-template-columns: minmax(0, 1fr); }

.fn-card__head--split { flex-wrap: wrap; }
.fn-card__head--split h2 { margin-right: auto; }

.fn-chips { display: flex; gap: 7px; flex-wrap: wrap; }

.fn-note {
    margin: 10px 0 0;
    padding: 0 20px 16px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--nz-text-3, #94A3B8);
    text-wrap: pretty;
}

.fn-blank {
    padding: 22px 20px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--nz-text-3, #94A3B8);
    text-wrap: pretty;
}

.fn-blank strong { color: var(--nz-text-2, #475569); }
.fn-blank a { color: var(--nz-blue, #004AF7); font-weight: 600; }


/* ------------------------------------------------------- pondwise panel */

.fn-pondwise__body { padding: 0 20px 18px; }

.fn-pw__top { display: flex; align-items: center; gap: 9px; }
.fn-pw__swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.fn-pw__top h3 {
    margin: 0;
    font-family: var(--nz-font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--nz-navy, #00243C);
}

.fn-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
}

.fn-chip--live { color: #1D4ED8; background: #EFF5FE; }
.fn-chip--done { color: #157F52; background: #EFF9F2; }

.fn-pw__sub {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--nz-text-3, #94A3B8);
}

.fn-pw__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
}

.fn-fact {
    padding: 9px 11px;
    background: var(--nz-surface-alt, #F8FAFD);
    border: 1px solid var(--nz-border, #EDF1F7);
    border-radius: 12px;
}

.fn-fact span { display: block; font-size: 10.5px; color: var(--nz-text-3, #94A3B8); }

.fn-fact b {
    display: block;
    margin-top: 2px;
    font-family: var(--nz-font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--nz-navy, #00243C);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fn-pw__money {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.fn-money {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--nz-border, #EDF1F7);
    border-left-width: 3px;
    border-radius: 12px;
    background: var(--nz-surface-alt, #F8FAFD);
}

.fn-money--red    { border-left-color: #B91C1C; }
.fn-money--red    .fn-money__ico { color: #B91C1C; }
.fn-money--green  { border-left-color: #157F52; }
.fn-money--green  .fn-money__ico { color: #157F52; }
.fn-money--blue   { border-left-color: #2563EB; }
.fn-money--blue   .fn-money__ico { color: #2563EB; }
.fn-money--purple { border-left-color: #7C3AED; }
.fn-money--purple .fn-money__ico { color: #7C3AED; }

.fn-money__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px; height: 30px;
    font-size: 13px;
    background: #fff;
    border-radius: 9px;
}

.fn-money__body { min-width: 0; }
.fn-money__body span { display: block; font-size: 10.5px; color: var(--nz-text-3, #94A3B8); }

.fn-money__body b {
    display: block;
    margin-top: 2px;
    font-family: var(--nz-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--nz-navy, #00243C);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* A figure that does not exist is italic and smaller, so an absence can never
   be mistaken at a glance for a measurement. */
.fn-money__body b.is-absent {
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    color: var(--nz-text-3, #94A3B8);
}


/* ----------------------------------------------------------- the charts */

.fn-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
}

.fn-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.fn-grid { stroke: #EEF2F7; stroke-width: 1; }
.fn-axis { font-size: 10px; fill: #94A3B8; }

.fn-bar { fill: #DC2626; }
.fn-bar--rev { fill: #1baf7a; }

.fn-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fn-line--rev { stroke: #1baf7a; }

.fn-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    margin: 12px 0 0;
    padding: 0 20px 16px;
    font-size: 11.5px;
    color: var(--nz-text-2, #475569);
}

.fn-legend li { display: flex; align-items: center; gap: 7px; }
.fn-legend li.is-absent { color: var(--nz-text-3, #94A3B8); font-style: italic; }

.fn-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.fn-swatch--cost { background: #DC2626; }
.fn-swatch--rev  { background: #1baf7a; }


/* ------------------------------------------------------------ the donuts */

.fn-donut__wrap { padding: 0 20px 4px; }

.fn-donut { position: relative; width: 150px; margin: 2px auto 14px; }
.fn-donut svg { display: block; width: 100%; height: auto; }

.fn-donut__track { fill: none; stroke: #F1F5F9; stroke-width: 18; }

.fn-donut__seg {
    fill: none;
    stroke-width: 18;
    transform: rotate(-90deg);
    transform-origin: 70px 70px;
}

.fn-donut__mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.fn-donut__mid b {
    font-family: var(--nz-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--nz-navy, #00243C);
}

.fn-donut__mid em { font-style: normal; font-size: 10.5px; color: var(--nz-text-3, #94A3B8); }

/* The money legend is a small table, not a row of words: name, share, amount,
   with the figures right-aligned so they can be compared down the column. */
.fn-legend--money {
    display: grid;
    gap: 7px;
    padding-bottom: 18px;
}

.fn-legend--money li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 9px; }

.fn-legend__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fn-legend__pct {
    font-variant-numeric: tabular-nums;
    color: var(--nz-text-3, #94A3B8);
}

.fn-legend--money b {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--nz-navy, #00243C);
    min-width: 66px;
    text-align: right;
}


/* ------------------------------------------------------- the cost detail */

.fn-table__wrap { padding: 0 20px; overflow-x: auto; }
.fn-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fn-right { text-align: right; }

.fn-td-cat { font-weight: 600; color: var(--nz-navy, #00243C); white-space: nowrap; }
.fn-td-what { color: var(--nz-text-3, #94A3B8); min-width: 150px; }

.fn-total td {
    border-top: 1.5px solid var(--nz-border, #E5EAF2);
    border-bottom: 0;
    font-weight: 700;
    color: var(--nz-navy, #00243C);
}


/* ------------------------------------------------------------- insights */

.fn-ins { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0 20px; }

.fn-ins__row {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--nz-text-2, #475569);
    background: var(--nz-surface-alt, #F8FAFD);
    border: 1px solid var(--nz-border, #EDF1F7);
    border-left-width: 3px;
    border-radius: 11px;
    text-wrap: pretty;
}

.fn-ins__row > i { flex: none; font-size: 12px; line-height: 1.55; }

.fn-ins__row--ok   { border-left-color: #157F52; background: #F3FAF5; }
.fn-ins__row--ok   > i { color: #157F52; }
.fn-ins__row--warn { border-left-color: #C2410C; background: #FEF9F2; }
.fn-ins__row--warn > i { color: #B45309; }
.fn-ins__row--none { border-left-color: #CBD5E1; }
.fn-ins__row--none > i { color: #94A3B8; }


/* ------------------------------------------------------------------ narrow */

@media (max-width: 1360px) {
    .fn-row--mid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fn-perf { grid-column: 1 / -1; }
}

@media (max-width: 1040px) {
    .fn-row--top, .fn-row--mid, .fn-row--low { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .fn-pw__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fn-pw__money { grid-template-columns: minmax(0, 1fr); }
    .fn-legend--money li { grid-template-columns: 10px 1fr auto; }
    .fn-legend--money .fn-legend__pct { display: none; }
}


/* =============================================================================
   PASS 2 — what the rendered page showed
   ========================================================================== */

/* The pond tabs had no rule of their own and came out as plain bordered
   boxes. They are chips, the same chips the other three consoles use. */
.fn-chipbtn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    font-family: var(--nz-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--nz-text-2, #475569);
    background: var(--nz-surface-alt, #F5F8FC);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--nz-fast, .15s) var(--nz-ease),
                color var(--nz-fast, .15s) var(--nz-ease),
                border-color var(--nz-fast, .15s) var(--nz-ease);
}

.fn-chipbtn:hover { background: #EDF3FB; }

.fn-chipbtn.is-on {
    color: #fff;
    background: var(--nz-blue, #004AF7);
    border-color: var(--nz-blue, #004AF7);
}

/* The charts share one 520-unit viewBox, which is right in a half-width card
   and wrong in a third-width one: at 260px rendered, 12 viewBox units of axis
   text land at six real pixels. The narrow cards scale their type up in
   viewBox units so it comes out the same size on screen as everywhere else. */
.fn-perf .fn-axis { font-size: 19px; }
.fn-perf .fn-axis--unit { font-size: 17px; }

/* And the performance card gets the extra width, since it is the one in that
   row carrying an axis rather than a donut. */
.fn-row--mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }