/* =============================================================================
   CONSOLE CARD LAYER
   =============================================================================
   One rule set that makes every farmer-console page agree about what a card is
   and how a row of them lines up. Loaded LAST, after each page's own sheet, so
   it wins on the selectors they share — no !important anywhere, the cascade
   does it.

   WHY THIS FILE EXISTS

   Every page grew its own grid, and thirteen of them set `align-items: start`.
   That is what made a row of cards look dropped in rather than laid out: each
   card took its own height, so the bottoms never met. On the dashboard, Your
   Farm Map ended 72px above Current Crop Progress beside it.

   A card is a cell in a grid. Cells in a row share a baseline. `start` was the
   wrong instinct — it avoids a short card looking empty at the cost of the
   whole page looking unaligned, and the second cost is much larger.

   THE LIST BELOW IS NOT A GUESS. The first version of this file was, and it
   missed .fd-top, .fd-mid and .fd-low — which is every grid on the dashboard,
   the one page the problem was reported from. These thirteen selectors were
   extracted by walking every stylesheet the console pages actually load and
   collecting each rule that declared `display: grid` together with
   `align-items: start`. If a new page adds a grid, it belongs here too.

   WHAT THIS FILE DELIBERATELY DOES NOT TOUCH

   Padding, colour, type, and anything that sets a width. Those vary between
   pages for reasons this file cannot see — a settings form card wants 35px of
   padding and a KPI tile wants 16px, and flattening that would be a worse
   inconsistency than the one being fixed.
   ========================================================================== */

/* -------------------------------------------------------------- 1. the row

   Every page-level grid that was ragging. Alphabetical by stylesheet, so the
   next person can diff this against the source. */

.sales-grid,      /* business.css          */
.carbon-grid,     /* carbon.css            */
.cy-layout,       /* cycles.css            */
.dash-grid,       /* dashboard.css         */
.fd-top,          /* farmer-dashboard.css  */
.fd-mid,
.fd-low,
.fm-body,         /* farms.css             */
.fm-rail,
.fn-grid,         /* finance.css           */
.pd-row,          /* production.css        */
.st-grid,         /* settings.css          */
.srs-grid {       /* srs.css               */
    align-items: stretch;
}


/* -------------------------------------------------------------- 2. the card

   A card is a column: heading at the top, content under it. Several of these
   were plain blocks, so stretching them left the content at its natural height
   with dead space beneath. As a flex column they absorb the extra height
   through whichever child is allowed to grow (see 3).

   height:100% as well as the stretch above, because several of these sit one
   level inside a rail or a wrapper, where the grid's own stretch cannot reach
   them. */

.fd-card,
.fm-card,
.fm-farm,
.pd-card,
.fn-card,
.srs-card,
.dash-card,
.biz-card,
.co-card,
.mf-row {
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* ----------------------------------------------------- 3. what absorbs it

   The dashboard's map is a fixed 268px box inside its card. Once the card
   stretches to match its neighbours, that fixed height is exactly where the
   dead space would appear — so the map grows into it instead, and the row
   aligning makes the map BIGGER rather than leaving a hole. 268px stays as
   the floor it already was. */

.fd-map__canvas {
    flex: 1;
    min-height: 268px;
}


/* --------------------------------------------------------------- 4. corners

   16px. That is what the three pages built from the supplied mockups already
   use, and a console that mixes 12, 13, 14, 16 and 18px corners reads as
   several products in a trench coat. The dashboard's own card was 18px, which
   is why it never quite matched Production or Money beside it.

   Smaller radii INSIDE a card — chips, inputs, icon tiles, tab pills — are
   left alone. A 16px corner on a 28px icon tile is a circle. */

.fd-card,
.fd-area,
.fd-kpi,
.fm-card,
.fm-farm,
.pd-card,
.fn-card,
.srs-card,
.srs-kpi,
.dash-card,
.kpi-card,
.biz-card,
.co-card,
.mf-row,
.mf-stat,
.settings-card,
.org-card,
.members-card,
.feature-item {
    border-radius: 16px;
}


/* ------------------------------------------------------------------ 5. gap

   18px between cards at page level, 14px between tiles in a figure row. Two
   values, where nine were in use. */

.sales-grid,
.carbon-grid,
.cy-layout,
.cy-logs,
.dash-grid,
.fd-top,
.fd-mid,
.fd-low,
.fd-side,
.fm-body,
.fm-grid,
.fn-grid,
.fn-row3,
.pd-row,
.st-grid,
.srs-grid {
    gap: 18px;
}

.cy-kpis,
.fd-kpis,
.fm-stats,
.fn-kpis,
.kpi-row,
.mf-stats,
.pd-kpis,
.srs-kpis {
    gap: 14px;
}


/* --------------------------------------------------------- 6. narrow screens

   Below the point where the grids collapse to one column there is no row left
   to align. Everything above is harmless at that width, but the gap tightens,
   because 18px between full-width cards on a 390px screen is most of a thumb.
   The map goes back to its fixed height — there is no neighbour to match, so
   growing it would only push the rest of the page down. */

@media (max-width: 760px) {
    .sales-grid, .carbon-grid, .cy-layout, .dash-grid,
    .fd-top, .fd-mid, .fd-low, .fd-side, .fm-body,
    .fn-grid, .pd-row, .st-grid, .srs-grid { gap: 14px; }

    .cy-kpis, .fd-kpis, .fm-stats, .fn-kpis,
    .kpi-row, .mf-stats, .pd-kpis, .srs-kpis { gap: 12px; }

    .fd-map__canvas { flex: none; height: 268px; }
}