/* =============================================================================
   Farm Buddy console
   =============================================================================
   Its own stylesheet, not the admin shell. A buddy works on a phone standing in
   a field; an admin works at a desk. Different constraints, so:

     - single column, no collapsing sidebar to fight with one thumb
     - 16px minimum on inputs (below that, iOS Safari zooms on focus and the
       layout jumps mid-form)
     - 52px minimum touch targets. 44px is the WCAG floor for a bare
       fingertip indoors; guidance for outdoor field apps puts the reliable
       range at 48-56, and hands here are wet, dusty or gloved. If you are
       about to type 44 into this file, that is the number this line exists
       to stop you using.
     - amber accent (--nz-role-buddy), so a screenshot is instantly placeable
       and nobody acts on the wrong console

   Consumes the sampled tokens from nz-palette.css. Deliberately does NOT load
   style.css — that file's global `appearance: none` on every input is the bug
   that has bitten this project three times.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The display face, matched to the marketing site so a buddy moving between
   netzeroaqua.blue and this console is looking at one product. Body copy stays
   Inter: Space Grotesk is a display face and a form full of it reads as a
   poster rather than as a tool. */
:root { --bu-display: 'Space Grotesk', Inter, system-ui, sans-serif; }

/* Visually hidden, still announced. Used for the labels beside the status dots
   in the farmer list — colour is not allowed to be the only carrier of meaning
   (WCAG 1.4.1) and a dot is exactly that without this. */
.bu-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

[hidden] { display: none !important; }

.bu-body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--nz-text);
    background: var(--nz-page);
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ topbar */

.bu-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    color: var(--nz-text-on-dark);
    background: var(--nz-navy);
    box-shadow: var(--nz-shadow);
}

.bu-back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;          /* 48-56px is the reliable range outdoors */
    height: 52px;
    font-size: 22px;
    color: var(--nz-text-on-dark);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 11px;
}

.bu-back:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

.bu-topbar__title { flex: 1; min-width: 0; }

.bu-topbar__eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nz-lime);
}

.bu-topbar h1 {
    margin: 1px 0 0;
    font-family: var(--bu-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--nz-text-on-dark);
}

.bu-role {
    flex-shrink: 0;
    padding: 5px 11px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: #422006;
    background: var(--nz-role-buddy);
    border-radius: var(--nz-radius-pill);
}

/* -------------------------------------------------------------------- main */

.bu-main {
    max-width: 780px;
    margin: 0 auto;
    padding: 20px 18px 60px;
}

/* ------------------------------------------------------------------- steps */

.bu-steps {
    display: flex;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.bu-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nz-text-3);
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-sm);
}

.bu-steps li span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    font-size: 11px;
    font-weight: 700;
    color: var(--nz-text-3);
    background: var(--nz-surface-alt);
    border: 1px solid var(--nz-border);
    border-radius: 50%;
}

.bu-steps li.is-current {
    color: var(--nz-text);
    border-color: var(--nz-navy);
    box-shadow: 0 0 0 2px rgba(0, 36, 60, 0.08);
}

.bu-steps li.is-current span {
    color: #fff;
    background: var(--nz-navy);
    border-color: var(--nz-navy);
}

.bu-steps li.is-done { color: var(--nz-ok); }

.bu-steps li.is-done span {
    color: #fff;
    background: var(--nz-ok);
    border-color: var(--nz-ok);
}

@media (max-width: 560px) {
    /* The labels wrap badly at this width; the numbers still tell you where
       you are, and the card heading says what the step is. */
    .bu-steps li { font-size: 0; justify-content: center; padding: 10px; }
    .bu-steps li span { font-size: 12px; }
}

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

.bu-card {
    padding: 22px;
    margin-bottom: 18px;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius);
    box-shadow: var(--nz-shadow-sm);
}

.bu-card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--nz-text);
}

.bu-card__sub {
    margin: 7px 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nz-text-2);
}

/* ------------------------------------------------------------------ fields */

.bu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.bu-field { display: flex; flex-direction: column; min-width: 0; }
.bu-field--wide { grid-column: 1 / -1; }

.bu-field label {
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nz-text);
}

.bu-field label b { color: var(--nz-danger); font-weight: 600; }

/* 16px is not a style choice: below it, iOS Safari zooms the viewport on
   focus and the whole form jumps.

   52px, not 46: a field is a tap target before it is a field, and the three
   registration steps are the longest stretch of tapping in the console. The
   dashboard's one input has been 52 since the restyle -- this is the shell
   catching up with it, not a new rule. */
.bu-input {
    width: 100%;
    min-height: 52px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 16px;
    color: var(--nz-text);
    background: var(--nz-surface);
    border: 1px solid var(--nz-border-strong);
    border-radius: var(--nz-radius-sm);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--nz-fast) var(--nz-ease),
                box-shadow var(--nz-fast) var(--nz-ease);
}

.bu-input:focus {
    outline: none;
    border-color: var(--nz-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nz-blue) 18%, transparent);
}

select.bu-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 34px;
}

.bu-prefix { display: flex; align-items: stretch; }

.bu-prefix span {
    display: flex;
    align-items: center;
    padding: 0 13px;
    font-size: 15px;
    font-weight: 600;
    color: var(--nz-text-2);
    background: var(--nz-surface-alt);
    border: 1px solid var(--nz-border-strong);
    border-right: 0;
    border-radius: var(--nz-radius-sm) 0 0 var(--nz-radius-sm);
}

.bu-prefix .bu-input { border-radius: 0 var(--nz-radius-sm) var(--nz-radius-sm) 0; }

.bu-hint {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--nz-text-3);
}

.bu-hint--ok { color: var(--nz-ok); font-weight: 600; }
.bu-hint--warn { color: var(--nz-warn); font-weight: 600; }

/* ---- checkbox ----
   Drawn rather than native. Every other console on this project inherits an
   `appearance: none` from style.css that erases checkboxes entirely; this file
   doesn't load style.css, but drawing it keeps them identical across all
   three sites. */
/* The whole label is the target, not the 20px box -- and on the registration
   form one of these decides where every future password reset for that farmer
   is sent, so it is not a control to miss with a wet thumb. */
.bu-check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 0;
    margin-top: 11px;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--nz-text-2);
    cursor: pointer;
}

.bu-check input {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    background: var(--nz-surface);
    border: 1.5px solid var(--nz-border-strong);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.bu-check input:checked {
    background: var(--nz-navy);
    border-color: var(--nz-navy);
}

.bu-check input:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.bu-geo {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 9px;
}

@media (max-width: 560px) {
    .bu-geo { grid-template-columns: 1fr 1fr; }
    .bu-geo .bu-btn { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------------- buttons */

.bu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;          /* 48-56px is the reliable range outdoors */
    padding: 12px 20px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--nz-radius-sm);
    cursor: pointer;
    transition: background var(--nz-fast) var(--nz-ease),
                color var(--nz-fast) var(--nz-ease);
}

/* Blue, not navy.

   These two were navy and blue respectively, and there was a logic to it --
   navy to step through a form, blue for the one action that actually creates
   something. But it put the dashboard's primary ("Register a farmer", blue)
   and the form's primary ("Continue", navy) in different colours on two
   consecutive screens of the same flow, and the palette's own rule is that
   blue owns every primary action.

   So both are blue and --go is kept as an alias, because four HTML files and
   farmer.js write these class names as strings. What separates "Continue" from
   "Create the account" is the label and the review step in front of it, not a
   colour a buddy has to have learned. */
.bu-btn--primary,
.bu-btn--go { color: #fff; background: var(--nz-blue); border-color: var(--nz-blue); }

.bu-btn--primary:hover,
.bu-btn--go:hover { background: var(--nz-blue-deep); color: #fff; }

.bu-btn--ghost {
    color: var(--nz-text-2);
    background: var(--nz-surface);
    border-color: var(--nz-border-strong);
}

.bu-btn--ghost:hover { color: var(--nz-text); background: var(--nz-surface-alt); }
.bu-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.bu-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--nz-border);
}

/* ------------------------------------------------------------------ errors */

.bu-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--nz-danger);
    background: var(--nz-danger-soft);
    border: 1px solid #FECACA;
    border-left: 3px solid var(--nz-danger);
    border-radius: var(--nz-radius-sm);
}

.bu-error i { margin-top: 2px; flex-shrink: 0; }

/* -------------------------------------------------------------- compliance */

.bu-compliance {
    margin-top: 24px;
    padding: 18px;
    background: var(--nz-surface-alt);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-sm);
}

.bu-compliance__title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nz-text-2);
}

.bu-comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 11px;
}

.bu-comp {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 15px;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-left: 3px solid var(--nz-border-strong);
    border-radius: var(--nz-radius-sm);
}

.bu-comp__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nz-text-3);
}

.bu-comp__value { font-size: 15px; font-weight: 700; color: var(--nz-text); }
.bu-comp__detail { font-size: 12px; line-height: 1.5; color: var(--nz-text-2); }

.bu-comp--ok { border-left-color: var(--nz-ok); }
.bu-comp--ok .bu-comp__value { color: var(--nz-ok); }
.bu-comp--warn { border-left-color: var(--nz-warn); background: var(--nz-warn-soft); }
.bu-comp--warn .bu-comp__value { color: var(--nz-warn); }
.bu-comp--bad { border-left-color: var(--nz-danger); background: var(--nz-danger-soft); }
.bu-comp--bad .bu-comp__value { color: var(--nz-danger); }
.bu-comp--info { border-left-color: var(--nz-info); }
.bu-comp--info .bu-comp__value { color: var(--nz-info); }

.bu-comp-note {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--nz-warn-soft);
    border: 1px solid #FDE68A;
    border-radius: var(--nz-radius-sm);
}

.bu-comp-note strong { display: block; margin-bottom: 7px; font-size: 13.5px; }
.bu-comp-note ul { margin: 0; padding-left: 18px; }
.bu-comp-note li { font-size: 13px; line-height: 1.6; color: var(--nz-text-2); }

/* ------------------------------------------------------------------ review */

.bu-review { margin-bottom: 22px; }

.bu-review h3 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nz-text-2);
}

.bu-review__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--nz-border);
}

.bu-review__row span { color: var(--nz-text-2); }
.bu-review__row strong { color: var(--nz-text); text-align: right; }
.bu-review__row.is-warn strong { color: var(--nz-warn); }

.bu-missing {
    padding: 16px 18px;
    margin-bottom: 18px;
    background: var(--nz-warn-soft);
    border: 1px solid #FDE68A;
    border-radius: var(--nz-radius-sm);
}

.bu-missing strong { display: block; font-size: 14px; color: var(--nz-warn); }
.bu-missing p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--nz-text-2); }
.bu-missing__list { font-weight: 600; color: var(--nz-warn) !important; }

.bu-complete {
    padding: 14px 17px;
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--nz-ok);
    background: var(--nz-ok-soft);
    border: 1px solid #BBF7D0;
    border-radius: var(--nz-radius-sm);
}

/* ------------------------------------------------------------------- modal */

.bu-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow-y: auto;
    background: rgba(0, 24, 48, 0.68);
}

.bu-modal__box {
    width: 100%;
    max-width: 440px;
    margin: auto;
    padding: 26px;
    text-align: center;
    background: var(--nz-surface);
    border-radius: var(--nz-radius);
    box-shadow: var(--nz-shadow-xl);
}

.bu-modal__box h2 { margin: 0; font-size: 22px; font-weight: 700; }

.bu-modal__sub {
    margin: 9px 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nz-text-2);
}

.bu-modal__actions { display: flex; gap: 10px; margin-top: 20px; }
.bu-modal__actions .bu-btn { flex: 1; }

.bu-creds__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    font-size: 24px;
    color: var(--nz-blue);
    /* Was --nz-lime-soft. Green is the traffic light in this console; a green
       tint behind a key icon is decoration wearing the status colour. */
    background: var(--nz-blue-soft);
    border-radius: 17px;
}

.bu-creds {
    text-align: left;
    background: var(--nz-surface-alt);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-sm);
    overflow: hidden;
}

.bu-creds__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--nz-border);
}

.bu-creds__row:last-child { border-bottom: 0; }

.bu-creds__row span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--nz-text-3);
}

.bu-creds code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    color: var(--nz-text);
    word-break: break-all;
    text-align: right;
}

/* Same reason as .bu-creds__icon above: this row is the one to read aloud,
   not a row that is "good". Blue marks it without claiming a state. */
.bu-creds__row--pw { background: var(--nz-blue-soft); }
.bu-creds__row--pw code { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }

.bu-creds__note {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--nz-text-3);
}


/* =============================================================================
   COMPONENTS THAT HAD NO HOME
   =============================================================================
   Everything below was being used by a page and defined nowhere. Three separate
   causes, all worth knowing about because they will happen again:

   1. css/login.css was deleted when the three consoles moved behind one
      sign-in page at /login.html. change-password.html still linked it, so the
      link 404'd silently and every .bu-auth* and .bu-strength* class on that
      page rendered raw. That page is not an edge case: buddy-guard.js sends
      EVERY new buddy there on first sign-in (mustChangePassword), so the
      unstyled version was the first screen of the product.

   2. .bu-inherit, .bu-inherit--calc and .bu-linkbtn are used by farmer.html's
      add-farm dialog and were never written. "Different?" was rendering as a
      raw browser button in the middle of a sentence.

   3. .bu-modal__box--form lived in farmer.css, which map-ponds.html does not
      load -- so the pond-naming dialog kept .bu-modal__box's text-align:center
      and rendered its label, input and select centred. It belongs here, in the
      shell, because two pages use it.
   ========================================================================== */

/* ---- form modal ----
   Moved here from farmer.css. .bu-modal__box is centred because most modals in
   this console are a message and two buttons; a modal with fields in it is a
   form and reads left-aligned. */
.bu-modal__box--form { text-align: left; max-width: 460px; }
.bu-modal__box--form h2 { font-size: 20px; }
.bu-modal__box--form .bu-field { margin-bottom: 15px; }

/* ---- inherited / derived value ----
   A value the buddy does not have to type because it is already on record, or
   because it will be measured. Deliberately quiet: this is the ABSENCE of work,
   and a bordered panel would make it look like something to deal with. */
.bu-inherit {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--nz-text-2);
}

.bu-inherit i { color: var(--nz-ok); font-size: 14px; }
.bu-inherit strong { color: var(--nz-text); font-weight: 600; }
.bu-inherit--calc { color: var(--nz-text-3); }
.bu-inherit--calc i { color: var(--nz-blue); }

/* A button that reads as a link because it sits inside a sentence -- but it is
   still a control a wet thumb has to hit, so the target is padded out to 52
   while the ink stays small. */
.bu-linkbtn {
    padding: 15px 4px;
    margin: -15px 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nz-blue);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bu-linkbtn:hover { color: var(--nz-blue-deep); }
.bu-linkbtn:focus-visible { outline: 2px solid var(--nz-blue); outline-offset: 3px; }

/* ---- the standalone auth page ----
   One card, centred, on the navy. change-password.html is the only page that
   uses it: every other door is /login.html. */
.bu-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--nz-navy-deep);
}

.bu-auth__box {
    width: 100%;
    max-width: 440px;
    padding: 28px 26px 26px;
    background: var(--nz-surface);
    border-radius: var(--nz-radius);
    box-shadow: var(--nz-shadow-xl);
}

.bu-auth__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

/* The lockup on a WHITE card, so this is the colour version, not the dark one.
   Height, not width: the lockup is wide and the ring is what sets its optical
   size. */
.bu-auth__brand img { height: 34px; width: auto; display: block; }

.bu-auth__box h1 {
    margin: 0;
    font-family: var(--bu-display);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--nz-text);
}

.bu-auth__sub {
    margin: 10px 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nz-text-2);
}

.bu-auth__box .bu-field { margin-bottom: 16px; }

.bu-btn--block { width: 100%; }

/* "Sign out instead" -- a real button, so it is keyboard-reachable and
   announced as a button, but weighted as the way out rather than the way on. */
.bu-link {
    display: block;
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--nz-text-3);
    background: none;
    border: 0;
    cursor: pointer;
}

.bu-link:hover { color: var(--nz-text); }
.bu-link:focus-visible { outline: 2px solid var(--nz-blue); outline-offset: 2px; }

/* ---- password strength ----
   change-password.js writes the fill width and puts `is-bad` / `is-warn` /
   `is-ok` on BOTH the fill and the label. The label is the carrier of meaning
   here -- it says "Too short", "Weak", "Reasonable", "Strong" in words -- and
   the bar only repeats it, which is the right way round for WCAG 1.4.1. */
.bu-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
}

.bu-strength__bar {
    flex: 1;
    height: 6px;
    background: var(--nz-border);
    border-radius: 3px;
    overflow: hidden;
}

.bu-strength__bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--nz-text-3);
    transition: width var(--nz-fast) var(--nz-ease),
                background-color var(--nz-fast) var(--nz-ease);
}

.bu-strength__bar span.is-bad  { background: var(--nz-danger); }
.bu-strength__bar span.is-warn { background: var(--nz-warn); }
.bu-strength__bar span.is-ok   { background: var(--nz-ok); }

.bu-strength__label {
    flex: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nz-text-3);
}

.bu-strength__label.is-bad  { color: var(--nz-danger); }
.bu-strength__label.is-warn { color: var(--nz-warn); }
.bu-strength__label.is-ok   { color: var(--nz-ok); }

/* ---- the lockup in the topbar ----
   The console used to introduce itself with the words "Farm Buddy" and nothing
   else. It is the same product as netzeroaqua.blue and it should say so.

   logo-lockup-dark.png, NOT logo-white.png: that older asset is drawn in
   #84D860, the lime this project retired, so every dark placement using it was
   quietly showing the previous brand. */
.bu-topbar__logo {
    flex-shrink: 0;
    height: 34px;
    width: auto;
    display: block;
    /* A rule between the brand and the page context, which is what the two
       actually are. Without it the lockup and the "FARM BUDDY" eyebrow read as
       one run of marks jammed into the corner. */
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

/* Below 420px the lockup and a wrapping farm name fight for the same row, and
   the farm name is the thing a buddy is actually reading. The markup swaps in
   logo-mark-dark.png -- the ring on its own -- via <picture>, rather than
   shrinking the lockup further: at the height that would take, "NET ZERO" is a
   smudge and the wordmark is unreadable letterforms. Cropping the lockup in
   CSS was tried and cut it mid-word ("AQU"), which reads as a broken image. */
@media (max-width: 420px) {
    .bu-topbar__logo { height: 30px; padding-right: 12px; }
}