/* =============================================================================
   FARM BUDDY CONSOLE — "MY PATCH"
   =============================================================================
   The one screen a buddy actually lives in. It is opened standing in a field,
   on a phone, in sunlight, often with one hand because the other is holding a
   clipboard or a phone call with the farmer in front of them.

   Everything below answers to that sentence. Where a decision here differs
   from what a desk dashboard would do, the field is why.

   ---------------------------------------------------------------------------
   THE FIVE RULES, AND WHERE THEY COME FROM
   ---------------------------------------------------------------------------

   1. THE PRIMARY ACTION LIVES IN THE THUMB ZONE, NOT AT THE TOP.
      Registering a farmer is the reason this console exists, and it used to sit
      at the very top of the page — which on a 6" phone is the hardest place on
      the screen to reach one-handed. Field-UX guidance for outdoor operators is
      consistent on this: critical controls belong in the bottom ~40% of the
      display, and the top 25% is a dead zone that needs a wrist rotation.

      So on a phone it is now a fixed bar pinned to the bottom edge, above the
      home indicator. On a desktop, where there is no thumb and no reach
      problem, it goes back inline at the top of the content. Same element,
      same markup, two placements.

   2. TOUCH TARGETS ARE 52px, NOT 44px.
      44px is the WCAG floor for a bare fingertip indoors. Outdoors, with wet or
      dusty hands, guidance for ruggedised field apps puts the reliable range at
      48–56px. Every row, button and icon target on this screen is at least 52.

   3. STATUS IS NEVER COLOUR ALONE.
      The registration dot was a bare coloured circle — "a dot, not a word",
      which is right about scannability and wrong about accessibility: WCAG
      1.4.1 does not accept colour as the only carrier of meaning, and a buddy
      with red-green colour blindness reading a screen in glare is exactly the
      person this fails. The dot keeps its scannability and gains a shape
      difference plus a text label for screen readers.

   4. BLUE LEADS. GREEN IS NOT A FILL.
      The "Register a farmer" button was a full-width block of brand lime. The
      palette rule is explicit — green's one job is an interaction pointer, and
      #3BD304 measures 2.0:1 on white, so it can never carry a surface. The
      action is blue now, like every other primary action in the product. The
      only green left on this screen is the status green, which is a different
      colour for a different job.

   5. FIGURES ARE READ AT A GLANCE, SO THEY GET THE DISPLAY FACE.
      The four counters are the thing a buddy checks without stopping walking.
      Space Grotesk at a larger size and tabular figures, so 3/3 and 0/3 line up
      and a changing number does not shift the tile's width.
   ========================================================================== */


/* =============================================================================
   1 — THE TOP-BAR SIGN-OUT
   ========================================================================== */

.bu-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;                      /* rule 2 */
    height: 52px;
    font-size: 18px;
    /* Quieter than it was. With the topbar otherwise empty this filled tile was
       the second-loudest thing on the screen, and it signs the buddy out --
       which is rare, and not what they came here to do. The target stays 52;
       only the ink comes down. The primary action on this page is "Register a
       farmer", and nothing in the chrome should out-weigh it. */
    color: var(--nz-text-on-dark-2);
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 14px;
    cursor: pointer;
    transition: background var(--nz-fast) var(--nz-ease);
}

.bu-icon-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.bu-icon-btn:focus-visible { outline: 2px solid var(--nz-blue-lift); outline-offset: 2px; }


/* =============================================================================
   2 — THE PRIMARY ACTION
   -----------------------------------------------------------------------------
   Two placements, one element. Phone: pinned to the bottom edge inside
   `.db-actionbar`. Desktop: inline at the top of the column. See rule 1.
   ========================================================================== */

.db-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--nz-page) 88%, transparent);
    border-top: 1px solid var(--nz-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.db-primary {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 64px;
    padding: 12px 18px;
    text-decoration: none;
    color: #FFFFFF;                   /* 6.32:1 on the brand blue */
    background: var(--nz-blue);       /* rule 4 */
    border-radius: var(--nz-radius);
    box-shadow: var(--nz-shadow-lg);
    transition: background var(--nz-fast) var(--nz-ease),
                transform var(--nz-fast) var(--nz-ease),
                box-shadow var(--nz-fast) var(--nz-ease);
}

.db-primary:hover {
    background: var(--nz-blue-deep);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: var(--nz-shadow-xl);
}

.db-primary:active { transform: translateY(0); box-shadow: var(--nz-shadow); }
.db-primary:focus-visible { outline: 3px solid var(--nz-navy); outline-offset: 3px; }

.db-primary__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    font-size: 19px;
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 13px;
}

.db-primary__body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.db-primary__body strong {
    font-family: var(--bu-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* 0.82 alpha on white over the blue is 5.1:1 — still AA for this size, where
   a flat `opacity: 0.8` on the whole line would have dropped the heading too. */
.db-primary__body span { font-size: 13px; color: rgba(255, 255, 255, 0.82); }

.db-primary > .fa-arrow-right { font-size: 17px; opacity: 0.9; }


/* =============================================================================
   3 — THE COUNTERS
   ========================================================================== */

.db-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}

@media (max-width: 560px) {
    .db-stats { grid-template-columns: repeat(2, 1fr); }
}

.db-stat {
    padding: 16px 12px;
    text-align: center;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius);
    box-shadow: var(--nz-shadow-sm);
}

.db-stat__value {
    display: block;
    font-family: var(--bu-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--nz-navy);
    /* Tabular, so 0/3 and 3/3 occupy the same width and the tile does not
       twitch when the number changes under a refresh. */
    font-variant-numeric: tabular-nums;
}

.db-stat__label {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nz-text-2);          /* 7.4:1, up from --nz-text-3's 4.8:1 */
}

/* Tinted tiles carry state. The border tints are derived from the status
   token rather than hand-picked hexes, so a change to the traffic light
   carries here automatically. */
.db-stat--warn {
    background: var(--nz-warn-soft);
    border-color: color-mix(in srgb, var(--nz-warn) 34%, transparent);
}
.db-stat--warn .db-stat__value { color: var(--nz-warn); }

.db-stat--ok {
    background: var(--nz-ok-soft);
    border-color: color-mix(in srgb, var(--nz-ok) 30%, transparent);
}
.db-stat--ok .db-stat__value { color: var(--nz-ok); }


/* =============================================================================
   4 — SECTIONS
   ========================================================================== */

.db-section { margin-bottom: 30px; }

.db-section h2 {
    margin: 0 0 13px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nz-text-2);
}

.db-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 13px;
}

.db-section__head h2 { margin: 0; }

.db-search {
    max-width: 260px;
    min-height: 52px;                 /* rule 2 */
    font-size: 16px;                  /* below 16 iOS zooms on focus */
}

@media (max-width: 560px) {
    .db-search { max-width: none; width: 100%; }
}


/* =============================================================================
   5 — WORK OUTSTANDING
   -----------------------------------------------------------------------------
   Above the farmer list on purpose: a buddy with thirty farmers needs the four
   that need something, not an alphabetical roll.
   ========================================================================== */

/* The layout of these rows now lives in the "ATTENTION PANEL, COMPACTED"
   block at the end of this file: one card with divided rows, rather than the
   separate tinted boxes that used to be here. What is kept from the original
   is the rule it was written to enforce —

   Red means exactly one thing on this screen: something is wrong and a person
   has to act. It is not used for navigation, emphasis or category anywhere
   else here, which is what keeps it meaning that.

   — and that survives intact; the tint simply moved from a filled background
   to the row's left edge, because four filled boxes stacked in a side column
   read as four emergencies regardless of which tint each one carries. */


/* =============================================================================
   6 — THE FARMER LIST
   ========================================================================== */

.db-farmer {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;                 /* a full row is the target, not the chevron */
    padding: 13px 16px;
    margin-bottom: 10px;
    text-decoration: none;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-sm);
    transition: border-color var(--nz-fast) var(--nz-ease),
                box-shadow var(--nz-fast) var(--nz-ease),
                transform var(--nz-fast) var(--nz-ease);
}

.db-farmer:hover {
    border-color: var(--nz-blue);     /* rule 4: blue is the interaction colour */
    box-shadow: var(--nz-shadow);
    text-decoration: none;
}

.db-farmer:active { transform: scale(0.995); }
.db-farmer:focus-visible { outline: 2px solid var(--nz-blue); outline-offset: 2px; }

.db-farmer__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    font-family: var(--bu-display);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: var(--nz-navy);
    border-radius: 13px;
}

.db-farmer__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.db-farmer__name {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--nz-text);
}

.db-farmer__farm { font-size: 13px; color: var(--nz-text-2); }
.db-farmer__phone { font-size: 13px; color: var(--nz-text-3); font-variant-numeric: tabular-nums; }

/* ---- registration state ----
   Still a dot, because four rows of the words "CAA registered" is noise and a
   column of dots with one amber in it is readable at arm's length. But colour
   is not the only signal any more: each state has a different ring weight, and
   dashboard.js writes a visually-hidden label beside it. See rule 3. */
.db-farmer__state {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--nz-border-strong);
    box-shadow: 0 0 0 2px var(--nz-surface), 0 0 0 3px var(--nz-border-strong);
}

.db-farmer__state--ok {
    background: var(--nz-ok);
    box-shadow: 0 0 0 2px var(--nz-surface), 0 0 0 3px color-mix(in srgb, var(--nz-ok) 45%, transparent);
}

.db-farmer__state--warn {
    background: var(--nz-warn);
    box-shadow: 0 0 0 2px var(--nz-surface), 0 0 0 4px color-mix(in srgb, var(--nz-warn) 55%, transparent);
}

.db-farmer__state--bad {
    background: var(--nz-danger);
    box-shadow: 0 0 0 2px var(--nz-surface), 0 0 0 5px color-mix(in srgb, var(--nz-danger) 60%, transparent);
}

.db-farmer .fa-angle-right { color: var(--nz-text-3); font-size: 19px; flex-shrink: 0; }

/* A farmer who has not signed in yet still holds the password their buddy
   handed them — worth seeing without opening the record. Amber, because it is
   an outstanding task rather than a fault. */
.db-farmer__pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    padding: 2px 8px;
    width: fit-content;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nz-warn);
    background: var(--nz-warn-soft);
    border-radius: var(--nz-radius-pill);
}

.db-farmer__pending i { font-size: 10.5px; }


/* =============================================================================
   7 — DISTRICT CHIPS, EMPTY AND LOADING
   ========================================================================== */

.db-chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* Coastal districts were lime. That put brand green on a light ground at
   2.0:1 and gave the brand colour a categorising job it does not have. These
   are two categories, so they are the two neutrals a category is allowed:
   the info blue and the page grey. */
.db-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 15px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nz-info);
    background: var(--nz-info-soft);
    border: 1px solid color-mix(in srgb, var(--nz-info) 26%, transparent);
    border-radius: var(--nz-radius-pill);
}

.db-chip--inland {
    color: var(--nz-text-2);
    background: var(--nz-surface-alt);
    border-color: var(--nz-border);
}

.db-chip i { font-size: 11.5px; opacity: 0.85; }

.db-empty,
.db-loading {
    padding: 30px 20px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--nz-text-2);
    background: var(--nz-surface);
    border: 1px dashed var(--nz-border-strong);
    border-radius: var(--nz-radius);
}

.db-empty p { margin: 0 0 7px; }
.db-empty p:last-child { margin: 0; }
.db-note { margin: 0; font-size: 13px; color: var(--nz-text-3); }


/* =============================================================================
   8 — DESKTOP
   -----------------------------------------------------------------------------
   The console is phone-first and stays that way; this is the one place it stops
   pretending a 1440px window is a large phone.

   Above 1100px the fixed bottom bar is wrong — there is no thumb to reach with
   and a bar pinned across a desktop window reads as a cookie banner. The action
   returns inline at the top, and the single 780px column becomes two: work
   outstanding and the district chips on the right, where they can be read
   without scrolling past the farmer list, and the list itself on the left where
   it has room to breathe.
   ========================================================================== */

@media (min-width: 1100px) {

    /* buddy.css caps .bu-main at 780px, which is right for the forms on the
       other pages — a register-farmer field set wider than that is harder to
       read, not easier. This screen is a list beside a column of alerts, so it
       is the one that wants the room.

       SCOPED TO .bu-body--dash, and it has to stay that way. The original said
       "dashboard.css is loaded by index.html alone, so widening here cannot
       leak onto the forms" — that stopped being true when farmer.html started
       loading this file for .db-stat and .db-primary. It was getting the
       1160px column with none of the .db-grid placement below, so on a desktop
       the contact strip, the area rows and the removal box each stretched into
       one very long line. The class is on index.html's <body> only. */
    .bu-body--dash .bu-main { max-width: 1160px; }

    .db-actionbar {
        position: static;
        padding: 0;
        margin-bottom: 24px;
        background: none;
        border-top: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .db-primary { box-shadow: var(--nz-shadow); }

    .db-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 30px;
        align-items: start;
    }

    .db-grid > * > .db-section { margin-bottom: 26px; }

    /* Explicit placement, because the DOM order is aside-then-list: on a phone
       the work outstanding has to come BEFORE the farmer list, and source order
       is what a screen reader and a narrow viewport both follow. The desktop
       grid then puts it back on the right without a second copy of the markup. */
    .db-col        { grid-column: 1; grid-row: 1 / span 2; }
    .db-attention  { grid-column: 2; grid-row: 1; }
    .db-districts  { grid-column: 2; grid-row: 2; }

    /* Attention items are the thing a buddy is scanning for, so on a wide
       screen they sit beside the list rather than above it — visible at the
       same time as the farmer they refer to. */
    .db-attention { position: sticky; top: 96px; }
}

@media (max-width: 1099px) {
    /* The fixed bar overlays the end of the page; the padding is what stops it
       covering the last district chip. Scoped for the same reason as the rule
       above: farmer.html has no .db-actionbar, so it was getting 104px of dead
       scroll below the removal box for a bar that is not there. */
    .bu-body--dash .bu-main { padding-bottom: 104px; }
}


/* =============================================================================
   9 — REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .db-primary:hover,
    .db-farmer:active { transform: none; }
}


/* =============================================================================
   THE PATCH BAND
   -----------------------------------------------------------------------------
   The page opened on three stacked full-width blocks — a navy topbar, a blue
   action bar, four white tiles — before any content, and none of them said
   where the patch is or what the console is for.

   The photograph is the sign-in page's, deliberately: a buddy who signed in
   thirty seconds ago arrives somewhere they recognise, and it costs nothing
   because the browser already has it cached.
   ========================================================================== */

.db-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 30px 32px 32px;
    border-radius: var(--nz-radius);
    background: var(--nz-navy);
    color: #fff;
}

.db-hero__media { position: absolute; inset: 0; z-index: -2; }

.db-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
}

/* Two layers, not one. A flat wash dark enough for white type kills the
   photograph; a gradient keeps the water readable on the right while the
   left stays dark enough to carry the heading at 15.9:1. */
.db-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(0, 24, 48, 0.94) 0%,
                                rgba(0, 24, 48, 0.82) 42%,
                                rgba(0, 24, 48, 0.42) 100%),
        linear-gradient(0deg, rgba(0, 24, 48, 0.35), rgba(0, 24, 48, 0.35));
}

.db-hero__copy { position: relative; max-width: 46ch; }

.db-hero__eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nz-lime);
}

.db-hero h2 {
    margin: 0;
    font-family: var(--bu-display);
    font-size: clamp(26px, 2.2vw + 16px, 38px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
}

.db-hero__where {
    margin: 10px 0 0;
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}

.db-hero__where i { margin-right: 7px; color: var(--nz-lime); }

.db-hero__line {
    margin: 12px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 620px) {
    .db-hero { padding: 22px 18px 24px; }
    /* The photograph earns its place on a desktop, where there is room for it
       to be a picture. At phone width it is 40px of texture behind a heading,
       so it goes and the navy stays. */
    .db-hero__media { display: none; }
}


/* =============================================================================
   STAT TILE ICONS
   ========================================================================== */

.db-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 auto 8px;
    font-size: 15px;
    color: var(--nz-blue);
    background: var(--nz-blue-soft);
    border-radius: 11px;
}

.db-stat--ok .db-stat__icon {
    color: var(--nz-ok);
    background: color-mix(in srgb, var(--nz-ok) 12%, #fff);
}

.db-stat--warn .db-stat__icon {
    color: var(--nz-warn);
    background: color-mix(in srgb, var(--nz-warn) 14%, #fff);
}


/* =============================================================================
   THE ATTENTION PANEL, COMPACTED
   -----------------------------------------------------------------------------
   Every item was a tall tinted card with a heading and a full sentence, so
   four of them filled the column and a buddy with a dozen farmers scrolled
   past the list they came for. Same information, two lines, and each row is
   now a link to the farm it is about.
   ========================================================================== */

.db-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--nz-warn);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.db-todo {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    text-decoration: none;
    transition: background var(--nz-fast) var(--nz-ease);
}

.db-todo + .db-todo { border-top: 1px solid var(--nz-border); }

.db-todo:hover { text-decoration: none; background: var(--nz-surface-alt); }
.db-todo:focus-visible { outline: 2px solid var(--nz-blue); outline-offset: -2px; }

.db-todo i { margin-top: 2px; font-size: 15px; flex-shrink: 0; }

.db-todo__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.db-todo strong { font-size: 13.5px; font-weight: 600; }

.db-todo span span,
.db-todo__body > span {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--nz-text-2);
    /* Two lines, then an ellipsis. The full sentence is on the farm page, and
       a four-line alert in a side column is a paragraph nobody reads. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.db-todo__go { color: var(--nz-text-3); font-size: 15px; align-self: center; }

/* The panel is one card with divided rows now, not four tinted boxes, so the
   tint moves to a 3px edge — enough to sort at a glance, quiet enough that
   four of them do not read as four warnings shouting. */
.db-todo { border-left: 3px solid transparent; background: transparent; }
.db-todo--bad  { border-left-color: var(--nz-danger); }
.db-todo--warn { border-left-color: var(--nz-warn); }
.db-todo--info { border-left-color: var(--nz-info); }

.db-todo--bad i,  .db-todo--bad strong  { color: var(--nz-danger); }
.db-todo--warn i, .db-todo--warn strong { color: var(--nz-warn); }
.db-todo--info i, .db-todo--info strong { color: var(--nz-info); }

#dbTodo {
    overflow: hidden;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius);
    box-shadow: var(--nz-shadow-sm);
}


/* =============================================================================
   FARMER ROWS — FIGURES AND A WORDED STATUS CHIP
   ========================================================================== */

.db-farmer__figs {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
    padding-right: 4px;
}

.db-farmer__fig {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11.5px;
    color: var(--nz-text-3);
}

.db-farmer__fig b {
    font-family: var(--bu-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--nz-navy);
    font-variant-numeric: tabular-nums;
}

/* Replaces .db-farmer__state, the coloured dot. The dot needed a title for the
   pointer and an .bu-sr label for the reader, and still left a buddy on a
   phone — where nothing hovers — reading colour alone. */
.db-farmer__chip {
    flex-shrink: 0;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
}

.db-farmer__chip--ok   { color: var(--nz-ok);     background: var(--nz-ok-soft); }
.db-farmer__chip--warn { color: var(--nz-warn);   background: var(--nz-warn-soft); }
.db-farmer__chip--bad  { color: var(--nz-danger); background: var(--nz-danger-soft); }

/* Under about 760px the row is already carrying a name, a farm, a village and
   a phone number, so the figures and the chip drop to a second line.

   GRID, not flex-wrap. The first attempt set the body to `flex: 1 1 100%`,
   which does move the figures down — but it also pushes the body off the
   avatar's line, leaving a 52px initial sitting alone above the name it
   belongs to. Named areas say what is wanted instead of arranging it by
   side effect. */
@media (max-width: 760px) {
    .db-farmer {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas:
            'avatar body body body'
            'figs   figs chip go';
        align-items: center;
        gap: 4px 12px;
    }

    .db-farmer__avatar { grid-area: avatar; align-self: start; }
    .db-farmer__body   { grid-area: body; }
    .db-farmer__figs   { grid-area: figs; gap: 20px; padding: 8px 0 0; }
    .db-farmer__chip   { grid-area: chip; justify-self: end; }
    .db-farmer .fa-angle-right { grid-area: go; }
}


/* =============================================================================
   THE TOP BAR — final layer
   =============================================================================
   Shared by every buddy page. It was a flat navy rectangle with a drop shadow:
   correct, and the same bar any admin template would give you.

   Three small changes:
     1. A gradient rather than a flat fill, so the bar has a direction and the
        page below reads as lighter rather than merely different.
     2. A 2px lime rule along the bottom — the one place the brand colour lands
        on a screen that is otherwise navy and white, doing the job a plain
        border was doing anyway.
     3. The sign-out button gets the back chevron's treatment. It was a bare
        glyph on navy, which outdoors is a 19px target with no edge; the two
        controls that live in this bar should look like the same kind of thing.

   This block is in dashboard.css rather than buddy.css because .bu-icon-btn is
   defined here, and both pages load buddy.css BEFORE this file.
   ========================================================================== */

.bu-topbar {
    background: linear-gradient(160deg,
                var(--nz-navy-soft, #002448) 0%,
                var(--nz-navy, #00243C) 52%,
                var(--nz-navy-deep, #001830) 100%);
    border-bottom: 2px solid var(--nz-lime, #3BD304);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04),
                0 10px 26px rgba(0, 24, 48, .22);
}

.bu-topbar h1 {
    font-size: 20px;
    /* A long farm name on a narrow phone truncates rather than wrapping the
       bar onto two lines and pushing the whole page down. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bu-topbar__logo { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }

.bu-back,
.bu-icon-btn {
    border: 1px solid rgba(255, 255, 255, .16);
    transition: background .16s var(--nz-ease, ease),
                border-color .16s var(--nz-ease, ease);
}

.bu-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    font-size: 19px;
    color: var(--nz-text-on-dark, #fff);
    background: rgba(255, 255, 255, .10);
    border-radius: 13px;
    cursor: pointer;
}

.bu-icon-btn:hover,
.bu-back:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.bu-back:focus-visible,
.bu-icon-btn:focus-visible {
    outline: 3px solid var(--nz-lime, #3BD304);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .bu-back, .bu-icon-btn { transition: none; }
}