/* =============================================================================
   PRODUCTION
   =============================================================================
   Four figures, four charts, the ponds, and what was logged — one crop at a
   time.

   THE PALETTE IS NOT A TASTE DECISION. The four series colours were run
   through the colourblind separation check before anything was drawn:

       #2563EB  blue     pond 1 / growth
       #1baf7a  green    pond 2 / feed
       #EA580C  orange   pond 3
       #7C3AED  purple   pond 4

   The green started as #15803D, matching the rest of the console, and FAILED —
   against #EA580C it sits 3.3 apart under protanopia, where 8 is the floor.
   #1baf7a moves it to 10.4 and passes on both the white card and the dark
   weather panel. That is the only reason this one green differs from the
   console's; everything that is not a data mark still uses the house colour.

   COLOUR FOLLOWS THE POND, NOT ITS RANK. js/production.js assigns a colour
   once, on a sorted pond list, so filtering never repaints the survivors —
   which means these hexes appear as inline styles from the script, and the
   only colours hard-coded here are the ones that belong to the chrome.

   TEXT NEVER WEARS A SERIES COLOUR. Values, labels and legend text stay navy
   or slate; the swatch beside them carries the identity.
   ========================================================================== */

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

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

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


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

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

/* ---- the header, as a photograph ---------------------------------------

   The page was a column of white cards on a white page and read as a form.
   One image carries the whole thing: a wide, dark band at the top that the
   cards then sit against, so the eye has somewhere to start.

   The photo is decorative and the text above it is real text — with images
   off the scrim's own gradient still carries white type. */

.pd-head--hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 168px;
    padding: 26px 28px;
    border-radius: 18px;
    background: var(--nz-navy, #00243C);
}

.pd-head__media { position: absolute; inset: 0; z-index: -2; }

.pd-head__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
}

/* Dark on the left where the words are, clearing to the right so the water
   is still visible. The second layer is a flat wash, because a gradient
   alone left the right-hand pickers short of contrast. */
.pd-head__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(0, 24, 40, .93) 0%, rgba(0, 24, 40, .74) 42%,
                                rgba(0, 24, 40, .34) 78%, rgba(0, 24, 40, .22) 100%),
        linear-gradient(rgba(0, 24, 40, .18), rgba(0, 24, 40, .18));
}

.pd-head--hero .pd-head__ico {
    width: 46px; height: 46px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
}

/* .pd-head__copy in the selector on purpose: `.pd-head--hero h1` ties with
   the base `.pd-head h1` on specificity and loses on source order, which
   left a navy headline on a navy photograph. */
.pd-head--hero .pd-head__copy h1 { color: #fff; }
.pd-head--hero .pd-head__copy p { color: rgba(255, 255, 255, .82); }

/* The pickers go to glass so they read as controls on the photograph rather
   than as two white cards dropped on it. */
.pd-head--hero .pd-picker {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .26);
    backdrop-filter: blur(6px);
}

.pd-head--hero .pd-picker__label { color: #fff; }
.pd-head--hero .pd-picker__sub,
.pd-head--hero .pd-picker__caret { color: rgba(255, 255, 255, .72); }
.pd-head--hero .pd-picker:hover { background: rgba(255, 255, 255, .2); }

.pd-head--hero .pd-picker select option { color: var(--nz-navy, #00243C); }

@media (max-width: 760px) {
    .pd-head--hero { min-height: 0; padding: 20px; }
    .pd-head__scrim {
        background: linear-gradient(rgba(0, 24, 40, .88), rgba(0, 24, 40, .82));
    }
}

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

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

.pd-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);
}

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

/* The two pickers sit at the far right of the header, as in the mockup. */
.pd-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 the
   farm's name and where it is — two lines a bare <select> cannot draw — while
   every native behaviour (keyboard, mobile wheel, screen reader) stays the
   browser's. Nothing here is a scripted dropdown. */
.pd-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: 196px;
    padding: 9px 13px;
    margin: 0;
    background: var(--nz-surface, #fff);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 12px;
    cursor: pointer;
}

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

.pd-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;
}

.pd-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;
}

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

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


/* A read that failed. Not styled as a card — it is not content. */
.pd-error {
    margin-bottom: 16px;
    padding: 13px 16px;
    font-size: 13.5px;
    color: #9F1239;
    background: #FFF1F2;
    border: 1px solid #FBD5DC;
    border-radius: 12px;
}


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

   Three readings and the weather across one row. The weather is part of this
   row and not a card of its own because it is the fourth thing a farmer checks
   before deciding anything, and it earns the dark surface: it is the only
   panel on the page that is not about what has already been logged. */

.pd-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 1.18fr;
    gap: 14px;
    margin-bottom: 18px;
    align-items: stretch;
}

/* A flat tint read as a disabled field. The gradient is two steps of the
   same hue — the tile is lighter where the figure sits and deepens under
   it — and the hover lift is the only movement on the page. */
.pd-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 17px;
    border-radius: 14px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 36, 60, .04);
    transition: transform .16s var(--nz-ease, ease), box-shadow .16s var(--nz-ease, ease);
}

.pd-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 36, 60, .09);
}

/* The icon sits on a ring of its own colour rather than a white square. */
.pd-kpi__ico { box-shadow: 0 0 0 1px rgba(0, 36, 60, .05), 0 1px 2px rgba(0, 36, 60, .06); }

.pd-kpi--green  { background: linear-gradient(160deg, #F4FBF7 0%, #E6F6ED 100%); border-color: #D8EFE1; }
.pd-kpi--blue   { background: linear-gradient(160deg, #F4F8FE 0%, #E4EEFC 100%); border-color: #DCE8FB; }
.pd-kpi--purple { background: linear-gradient(160deg, #F8F5FE 0%, #EDE4FC 100%); border-color: #E6DCFB; }

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

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

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

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

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

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

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

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


/* ---- weather ---- */

.pd-wx {
    position: relative;
    display: flex;
    overflow: hidden;
    min-height: 132px;
    border-radius: 14px;
    background: #0B2B3E;
    isolation: isolate;
}

/* Child combinator, deliberately. `.nzc-hero > *` in nz-console.css loads
   after this file and wins at equal specificity, which has put a hero photo
   back in flow three times on other pages. This cannot be `.pd-wx__media`. */
.pd-wx > .pd-wx__media { position: absolute; inset: 0; z-index: -2; }

.pd-wx > .pd-wx__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 62%;
}

.pd-wx > .pd-wx__scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, rgba(4, 26, 40, .92) 0%,
                                        rgba(4, 26, 40, .78) 52%,
                                        rgba(4, 26, 40, .52) 100%);
}

.pd-wx__inner {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    padding: 15px 17px;
}

.pd-wx__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
}

.pd-wx__now { display: flex; align-items: center; gap: 13px; min-height: 44px; }

.pd-wx__glyph { font-size: 27px; color: #FCD34D; }

.pd-wx__temp {
    font-family: var(--nz-font-display);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.pd-wx__desc { min-width: 0; }
.pd-wx__desc strong { display: block; font-size: 13.5px; font-weight: 600; color: #fff; }
.pd-wx__desc span { display: block; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, .74); }

.pd-wx__advice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: auto;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
}

.pd-wx__advice i { margin-top: 2px; font-size: 13px; color: #86EFAC; }
.pd-wx__advice strong { display: block; font-size: 12.5px; font-weight: 600; color: #fff; }
.pd-wx__advice > span > span { display: block; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, .76); }

/* Rain, heat, or hot-and-still. Amber, not red — it is a forecast, not a
   reading, and the farm is not in trouble yet. */
.pd-wx__advice.is-warn { background: rgba(245, 158, 11, .17); border-color: rgba(252, 211, 77, .38); }
.pd-wx__advice.is-warn i { color: #FCD34D; }


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

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

.pd-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;
}

.pd-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;
}

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

/* 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. */
.pd-tab[disabled] { color: var(--nz-text-3, #94A3B8); cursor: not-allowed; }
.pd-tab[disabled]:hover { background: transparent; }

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

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


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

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

/* Two charts and the actions rail. */
.pd-row--charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px; }

/* The ponds take the width; the log is a column beside them. */
.pd-row--ponds { grid-template-columns: minmax(0, 1fr) 340px; }

.pd-row--low { grid-template-columns: repeat(2, minmax(0, 1fr)); }


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

/* Eleven white cards on a white page had nothing separating one from the
   next but a hairline border. The gradient is almost invisible on its own —
   two percent of warmth at the top — but it gives each card a top edge the
   eye can find, and the hover shadow says the card is a surface rather than
   a region of the page. */
.pd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px 18px;
    background:
        linear-gradient(var(--nz-surface, #fff), var(--nz-surface, #fff)) padding-box,
        linear-gradient(180deg, #FBFCFE 0%, var(--nz-surface, #fff) 92px) padding-box;
    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);
    transition: box-shadow .18s var(--nz-ease, ease), border-color .18s var(--nz-ease, ease);
}

.pd-card:hover {
    border-color: #DCE4F0;
    box-shadow: 0 1px 2px rgba(0, 36, 60, .05), 0 14px 32px rgba(0, 36, 60, .08);
}

/* The sample-data notice. Blue rather than amber: it is a statement about
   where the numbers came from, not a warning about the crop. */
.pd-sample {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #BFDBFE;
    border-left: 4px solid #2563EB;
    border-radius: 14px;
    background: linear-gradient(160deg, #F5F9FF 0%, #E8F1FE 100%);
}

.pd-sample__ico { flex: none; font-size: 16px; line-height: 1.4; color: #1D4ED8; }
.pd-sample__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-sample__body strong { font-size: 14px; color: #1E3A8A; }
.pd-sample__body span { font-size: 13px; line-height: 1.55; color: #1E40AF; }

@media (prefers-reduced-motion: reduce) {
    .pd-card, .pd-kpi { transition: none; }
    .pd-kpi:hover { transform: none; }
}

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

.pd-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);
}

/* "14 samples", "2,480 kg total" — the count the chart is drawn from, so the
   shape on screen can be trusted or discounted at a glance. */
.pd-card__note { font-size: 12px; color: var(--nz-text-3, #94A3B8); white-space: nowrap; }

.pd-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--nz-blue, #004AF7);
    text-decoration: none;
}

.pd-link:hover { color: var(--nz-blue, #004AF7); text-decoration: underline; }
.pd-link i { font-size: 11px; }


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

   Recessive frame, thin marks, one direct label. The grid is a hairline at 6%
   ink: it exists to let the eye carry a value across, not to be looked at. */

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

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

.pd-grid { stroke: rgba(0, 36, 60, .09); stroke-width: 1; }

/* Sized in viewBox units, so the rendered size is this times the card's width
   over 520. At 12px that lands near 11px on a desktop card and stays legible
   down to the 460px floor the narrow rule sets below. */
.pd-axis {
    font-family: var(--nz-font);
    font-size: 12px;
    fill: var(--nz-text-3, #94A3B8);
}

.pd-axis--unit { font-size: 11px; letter-spacing: .02em; }

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

.pd-area { stroke: none; }

.pd-dot { stroke: #fff; stroke-width: 1.5; }

/* Where two ponds cross, a 2px surface ring keeps both readable. */
.pd-dot--ring { stroke-width: 2; }

.pd-bar { stroke: none; }

/* The bar chart's one direct label — navy, not the series green, so the value
   reads as text and the bar keeps the colour. */
.pd-barlab {
    font-family: var(--nz-font);
    font-size: 12.5px;
    font-weight: 700;
    fill: var(--nz-navy, #00243C);
}

/* The hover targets: ≥8px across, invisible, and they must take pointer
   events even though nothing is painted. */
.pd-hit { fill: transparent; stroke: none; pointer-events: all; cursor: crosshair; }

.pd-chart:hover .pd-line { stroke-width: 2; }

/* ---- tooltip ---- */
.pd-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);
}

.pd-tip.is-below { transform: translate(-50%, 12px); }

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

/* ---- the one direct label ----

   nowrap is load-bearing: an absolutely positioned label at left:96% has four
   per cent of the card to wrap into, which turns "278 kg / latest week" into a
   column of single characters. */
.pd-callout {
    position: absolute;
    z-index: 4;
    transform: translate(-50%, calc(-100% - 10px));
    padding: 5px 9px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 36, 60, .18);
}

/* Near the right edge it hangs off the point rather than straddling it; near
   the top of the plot it sits under the point instead of above. */
.pd-callout.is-right { transform: translate(calc(-100% + 8px), calc(-100% - 10px)); text-align: right; }
.pd-callout.is-below { transform: translate(-50%, 17px); }
.pd-callout.is-right.is-below { transform: translate(calc(-100% + 8px), 17px); }

/* Explicit line heights: style.css sets a reading line-height on body, which
   turned a two-line badge into 62px and pushed it off its own point. */
.pd-callout b { display: block; font-size: 12px; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-callout em { display: block; font-style: normal; font-size: 10px; line-height: 1.3; color: rgba(255, 255, 255, .82); }

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

.pd-legend li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--nz-text-2, #475569);
}

.pd-legend__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* The value beside the name — so identity never rests on colour alone. */
.pd-legend b {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--nz-navy, #00243C);
}

/* ---- horizontal bars ---- */
.pd-hbars { display: flex; flex-direction: column; gap: 13px; padding: 4px 0 2px; }

.pd-hbar {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.pd-hbar__name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nz-text-2, #475569);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pd-hbar__track { height: 12px; border-radius: 999px; background: #F1F5F9; overflow: hidden; }

/* 4px rounded data-end, anchored square to the baseline at the left. */
.pd-hbar__fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }

.pd-hbar__val {
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--nz-navy, #00243C);
}

/* ---- a chart with nothing to draw ---- */
.pd-nochart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 186px;
    padding: 20px;
    text-align: center;
    font-size: 13px;
    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;
}

.pd-nochart i { font-size: 20px; color: #CBD5E1; }


/* ---------------------------------------------------------- quick actions */

.pd-quick__grid { display: flex; flex-direction: column; gap: 8px; }

.pd-qa {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nz-navy, #00243C);
    border-radius: 11px;
    text-decoration: none;
    transition: background .16s var(--nz-ease, ease);
}

.pd-qa:hover { background: var(--nz-surface-alt, #F5F8FC); color: var(--nz-navy, #00243C); text-decoration: none; }

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


/* ------------------------------------------------------- pond performance */

.pd-ponds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 14px;
}

.pd-pond {
    display: flex;
    flex-direction: column;
    padding: 14px 15px 15px;
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 14px;
}

.pd-pond__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* The pond's own colour, the same one its line and bar wear — the only link
   between this card and the charts below it. */
.pd-pond__swatch { width: 11px; height: 11px; border-radius: 4px; flex: none; }

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

/* Status wears an icon as well as a colour, always. */
.pd-chip--ok   { color: #157F52; background: #E6F6EC; }
.pd-chip--warn { color: #B45309; background: #FEF4E2; }

.pd-pond h3 {
    margin: 10px 0 0;
    font-family: var(--nz-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--nz-navy, #00243C);
}

.pd-pond__stats { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; }

.pd-pond__stats span { display: flex; flex-direction: column; min-width: 0; }

.pd-pond__stats b {
    font-family: var(--nz-font-display);
    font-size: 14.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--nz-navy, #00243C);
}

.pd-pond__stats em {
    font-style: normal;
    margin-top: 1px;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--nz-text-3, #94A3B8);
}

.pd-pond__day { margin-top: 13px; font-size: 11.5px; font-weight: 600; color: var(--nz-text-2, #475569); }

.pd-pond__track {
    height: 6px;
    margin-top: 6px;
    border-radius: 999px;
    background: #F1F5F9;
    overflow: hidden;
}

.pd-pond__track span { display: block; height: 100%; border-radius: 999px; }

.pd-pond__go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nz-blue, #004AF7);
    text-decoration: none;
}

.pd-pond__go:hover { color: var(--nz-blue, #004AF7); text-decoration: underline; }
.pd-pond__go i { font-size: 11px; }


/* ------------------------------------------------------- recent activity */

.pd-acts { display: flex; flex-direction: column; }

.pd-act {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--nz-border, #EEF2F7);
}

.pd-act:last-child { border-bottom: 0; padding-bottom: 0; }
.pd-act:first-child { padding-top: 0; }

.pd-act__ico {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    font-size: 13px;
    border-radius: 10px;
}

.pd-act__ico--green { color: #157F52; background: #E6F6EC; }
.pd-act__ico--amber { color: #B45309; background: #FEF4E2; }
.pd-act__ico--blue  { color: #2563EB; background: #EAF1FE; }

.pd-act__body { flex: 1; min-width: 0; }
.pd-act__body strong { display: block; font-size: 13px; font-weight: 600; color: var(--nz-navy, #00243C); }

.pd-act__body > span {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--nz-text-2, #475569);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pd-act__when { flex: none; font-size: 11px; color: var(--nz-text-3, #94A3B8); white-space: nowrap; }


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

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

.pd-loading--dark { padding: 0; text-align: left; font-size: 13px; color: rgba(255, 255, 255, .7); }

.pd-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;
}

.pd-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;
}

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

.pd-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. */
.pd-blank--inline { padding: 24px 6px; border: 0; background: transparent; }


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

@media (max-width: 1360px) {
    .pd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Weather drops to its own full-width band rather than squeezing a
       fourth column out of three readings. */
    .pd-wx { grid-column: 1 / -1; min-height: 0; }
    .pd-wx__inner { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 18px; }
    .pd-wx__advice { margin-top: 0; margin-left: auto; }
}

@media (max-width: 1240px) {
    .pd-row--charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pd-quick { grid-column: 1 / -1; }
    .pd-quick__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .pd-row--ponds { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .pd-head { flex-wrap: wrap; }
    .pd-head__copy { flex: 1 1 200px; }
    .pd-head__pickers { width: 100%; margin-left: 0; }
    .pd-picker { flex: 1 1 200px; }
    .pd-row--charts, .pd-row--low { grid-template-columns: 1fr; }
    .pd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pd-range { margin-left: 0; }
}

/* 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) {
    .pd-chart { overflow-x: auto; overflow-y: hidden; }
    .pd-svg { min-width: 460px; }
}

@media (max-width: 560px) {
    .pd-kpis { grid-template-columns: 1fr; }
    .pd-hbar { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 9px; }
    .pd-wx__inner { flex-direction: column; align-items: flex-start; }
    .pd-wx__advice { margin-left: 0; }
}

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


/* ------------------------------------------------- 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. */

.pd-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;
}

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

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

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


/* =============================================================================
   THE REBUILT PRODUCTION LAYOUT
   =============================================================================
   Six 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.

   Several declarations below replace ones further up the file; they are
   repeated here rather than edited in place, because the column counts changed
   with the layout and the old values are worth being able to see.

   Note on specificity: css/nz-cards.css loads after this file and sets
   `.pd-card { display: flex; flex-direction: column; height: 100% }` for every
   console at once. That is wanted here — these rows do align — so nothing
   below fights it; the panels simply say which of their children absorbs the
   spare height.
   ========================================================================== */

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

.pd-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
    align-items: stretch;
}

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

.pd-kpi--red { background: #FEF3F3; border-color: #F6D9D9; }
.pd-kpi--red .pd-kpi__ico { color: #B91C1C; }

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

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

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

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

/* The arrow shows which way the number moved; the colour says whether that is
   good news. They disagree on FCR, which is the whole reason the two are
   separate — a green down-arrow there is an improvement. */
.pd-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-delta--good { color: #157F52; }
.pd-delta--bad  { color: #B91C1C; }


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

.pd-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;
}

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


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

.pd-row--top   { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.pd-row--mid   { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .85fr); }
.pd-row--cycle { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .7fr); }
.pd-row--rec   { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }

.pd-card__head--split {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pd-card__head--split h2 { margin-right: auto; }

.pd-foot {
    margin: auto 0 0;
    padding: 12px 20px 18px;
    font-size: 11.5px; line-height: 1.5;
    color: var(--nz-text-3, #94A3B8);
}

.pd-axisnote {
    margin: 2px 0 0;
    font-size: 10.5px;
    text-align: right;
    color: var(--nz-text-3, #B4C0CE);
}


/* ------------------------------------------------------------ the chips */

.pd-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pd-chips--tabs { padding: 0 20px 12px; }

.pd-chipbtn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px;
    padding: 0 11px;
    font-size: 12px; font-weight: 600;
    color: var(--nz-text-2, #475569);
    background: var(--nz-surface-alt, #F5F8FC);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 999px;
    cursor: pointer;
}

.pd-chipbtn b { font-size: 10.5px; font-weight: 700; color: var(--nz-text-3, #94A3B8); }
.pd-chipbtn:hover { background: #EDF3FB; }

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

.pd-chipbtn.is-on b { color: rgba(255, 255, 255, .78); }

.pd-select {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12.5px; font-weight: 600;
    color: var(--nz-navy, #00243C);
    background: var(--nz-surface-alt, #F5F8FC);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 9px;
}


/* --------------------------------------------------- pondwise production

   Content only, no photograph. A farm with a hundred ponds is a hundred
   images nobody looks at, and the picture tells a farmer nothing their own
   pond number does not. */

/* auto-fit, not auto-fill: auto-fill keeps the empty columns, so a farm with
   one pond in the water drew one small card against three columns of nothing.
   auto-fit collapses them and the card takes the width it is given. */
.pd-ponds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: 12px;
    padding: 0 20px 20px;
}

.pd-pond {
    display: flex;
    flex-direction: column;
    padding: 13px 14px 14px;
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 14px;
}

.pd-pond__top { display: flex; align-items: center; gap: 8px; }
.pd-pond__swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.pd-pond h3 {
    margin: 0;
    font-size: 13.5px; font-weight: 600;
    color: var(--nz-navy, #00243C);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pd-pond__day { margin-top: 9px; font-size: 11.5px; font-weight: 600; color: var(--nz-text-2, #475569); }

.pd-pond__track { height: 6px; margin-top: 6px; border-radius: 999px; background: #F1F5F9; overflow: hidden; }
.pd-pond__track span { display: block; height: 100%; border-radius: 999px; }

.pd-pond__stats { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; }
.pd-pond__stats span { display: flex; flex-direction: column; min-width: 0; }

.pd-pond__stats b {
    font-family: var(--nz-font-display);
    font-size: 13px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--nz-navy, #00243C);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pd-pond__stats em {
    font-style: normal;
    margin-top: 1px;
    font-size: 10px; line-height: 1.3;
    color: var(--nz-text-3, #94A3B8);
}

.pd-pond__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }

.pd-pond__go {
    padding: 7px 0;
    font-size: 11.5px; font-weight: 600; text-align: center;
    color: var(--nz-blue, #004AF7);
    background: var(--nz-surface-alt, #F7FAFD);
    border: 1px solid var(--nz-border, #E9EEF6);
    border-radius: 9px;
}

.pd-pond__go:hover { background: #EDF3FB; color: var(--nz-blue, #004AF7); text-decoration: none; }

.pd-pond__go--solid { color: #fff; background: var(--nz-blue, #004AF7); border-color: var(--nz-blue, #004AF7); }
.pd-pond__go--solid:hover { color: #fff; background: var(--nz-blue-deep, #0039BF); }


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

.pd-growth .pd-chart, .pd-trend .pd-chart, .pd-input .pd-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pd-target { stroke: #94A3B8; stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.pd-targetlab { font-size: 10px; font-weight: 600; fill: #64748B; }

/* `.pd-bar` further up this file only clears the stroke, so each chart names
   its own fill. Green for harvested weight, blue for feed — the first two of
   the validated series order. */
.pd-trend .pd-bar { fill: #1baf7a; }
.pd-bar--feed { fill: #2563EB; }


/* --------------------------------------------------- production metrics */

.pd-metrics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 20px;
}

.pd-metric {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    background: var(--nz-surface-alt, #F8FAFD);
    border: 1px solid var(--nz-border, #EDF1F7);
    border-radius: 12px;
}

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

.pd-metric__ico--green  { color: #157F52; }
.pd-metric__ico--blue   { color: #2563EB; }
.pd-metric__ico--purple { color: #7C3AED; }
.pd-metric__ico--amber  { color: #C2410C; }
.pd-metric__ico--red    { color: #B91C1C; }

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

.pd-metric__value {
    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 set in italic at a smaller size, so it can
   never be mistaken at a glance for one that does. */
.pd-metric__value.is-absent {
    font-size: 12.5px; font-style: italic; font-weight: 600; color: #94A3B8;
}


/* ----------------------------------------------------- production by pond */

.pd-share__wrap { padding: 0 20px 4px; }

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

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

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

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

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

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


/* ---------------------------------------------------------- cycle timeline */

.pd-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0 20px 16px;
}

.pd-step { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }

.pd-step__dot {
    display: flex; align-items: center; justify-content: center;
    flex: none;
    width: 24px; height: 24px;
    font-size: 11px; font-weight: 700;
    color: var(--nz-text-3, #94A3B8);
    background: var(--nz-surface-alt, #F1F5F9);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 50%;
}

.pd-step__body { min-width: 0; }

.pd-step__body strong {
    display: block;
    font-size: 12px; font-weight: 600;
    color: var(--nz-navy, #00243C);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pd-step__body em {
    display: block;
    font-style: normal;
    margin-top: 1px;
    font-size: 10.5px; line-height: 1.35;
    color: var(--nz-text-3, #94A3B8);
}

.pd-step--done .pd-step__dot { color: #fff; background: #157F52; border-color: #157F52; }
.pd-step--now  .pd-step__dot { color: #fff; background: var(--nz-blue, #004AF7); border-color: var(--nz-blue, #004AF7); }
.pd-step--now  .pd-step__body strong { color: var(--nz-blue, #004AF7); }

/* A stage nobody records is greyed and says so, rather than being filled in
   with a plausible week. */
.pd-step--none .pd-step__body strong { color: var(--nz-text-3, #94A3B8); }
.pd-step--none .pd-step__body em { font-style: italic; }

.pd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 20px; }

.pd-facts h3 {
    margin: 0 0 9px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--nz-text-3, #94A3B8);
}

.pd-facts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

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

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

.pd-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;
}


/* ----------------------------------------------------------- quick actions */

.pd-quick__grid { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 0 16px 16px; }

.pd-qa { padding: 9px 10px; }
.pd-qa__ico { width: 30px; height: 30px; font-size: 13px; }


/* ----------------------------------------------------- production records */

.pd-table__wrap { padding: 0 20px; overflow-x: auto; }

.pd-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.pd-table th {
    padding: 8px 9px;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    text-align: left;
    color: var(--nz-text-3, #94A3B8);
    border-bottom: 1px solid var(--nz-border, #EDF1F7);
    white-space: nowrap;
}

.pd-table td {
    padding: 9px;
    color: var(--nz-text-2, #475569);
    border-bottom: 1px solid var(--nz-border, #F2F5F9);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pd-table tr:last-child td { border-bottom: 0; }

.pd-td-date { font-weight: 600; color: var(--nz-navy, #00243C); }
.pd-td-note { white-space: normal; min-width: 130px; color: var(--nz-text-3, #94A3B8); }

.pd-tag {
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    font-size: 10.5px; font-weight: 700;
    border-radius: 999px;
    color: var(--nz-text-2, #475569);
    background: var(--nz-surface-alt, #F1F5F9);
}

.pd-tag--sampling     { color: #157F52; background: #EFF9F2; }
.pd-tag--waterquality { color: #0E7490; background: #ECFAFB; }
.pd-tag--harvest      { color: #7C3AED; background: #F4F0FE; }


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

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

.pd-ins {
    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;
}

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

.pd-ins--ok   { border-left-color: #157F52; background: #F3FAF5; }
.pd-ins--ok   > i { color: #157F52; }
.pd-ins--warn { border-left-color: #C2410C; background: #FEF9F2; }
.pd-ins--warn > i { color: #B45309; }
.pd-ins--bad  { border-left-color: #B91C1C; background: #FEF4F4; }
.pd-ins--bad  > i { color: #B91C1C; }
.pd-ins--none { border-left-color: #CBD5E1; }
.pd-ins--none > i { color: #94A3B8; }


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

/* Bounded at both ends. Written open-ended at 1480 it fired on the very
   screen the six-up strip was designed for — the console content is about
   1300px at a 1440px window — and wrapped it 3+3. */
@media (min-width: 821px) and (max-width: 1180px) {
    .pd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1360px) {
    .pd-row--mid, .pd-row--cycle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pd-quick { grid-column: 1 / -1; }
    .pd-quick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
    .pd-row--top, .pd-row--mid, .pd-row--cycle,
    .pd-row--rec { grid-template-columns: minmax(0, 1fr); }
    .pd-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Four stages across a 400px card is 100px each, which fits a dot, a gap and
   about nine characters. Two by two from the width where the row narrows. */
@media (max-width: 1360px) {
    .pd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 10px; }
}

@media (max-width: 820px) {
    .pd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .pd-kpis { grid-template-columns: minmax(0, 1fr); }
    .pd-metrics__grid, .pd-two, .pd-facts__grid { grid-template-columns: minmax(0, 1fr); }
    .pd-steps { grid-template-columns: minmax(0, 1fr); }
    .pd-ponds { grid-template-columns: minmax(0, 1fr); }
    .pd-quick__grid { grid-template-columns: minmax(0, 1fr); }
}