/* ==========================================================================
   Plaasboek — design system
   --------------------------------------------------------------------------
   The competition is a pen and a notebook (§9.0). Everything here is tuned for
   that: high contrast for sunlight, type that reads through reading glasses,
   targets a dusty thumb can hit, and no webfont to wait for on a bad signal.

   The palette is deliberately light. These screens get used outdoors at midday;
   a dark theme would be unreadable in the bakkie, so the page commits to one
   look rather than following the system preference.
   ========================================================================== */

:root {
    /* Ink and ground */
    --ink:            #171C18;
    --ink-soft:       #3D453E;
    --ink-muted:      #6A7369;
    --ink-faint:      #98A095;

    --ground:         #F7F5EF;   /* bone — paper, not white */
    --surface:        #FFFFFF;
    --surface-sunk:   #F1EEE5;

    /* Field green — the primary */
    --green-900:      #0F2A19;
    --green-800:      #16391F;
    --green-700:      #1E5231;
    --green-600:      #2A6B42;
    --green-500:      #358552;
    --green-100:      #DCEBE1;
    --green-050:      #EFF6F1;

    /* Harvest amber — the accent, used sparingly */
    --amber-700:      #8A5A0B;
    --amber-600:      #B0761A;
    --amber-500:      #D89B2C;
    --amber-100:      #F7E9CC;

    /* Variance: over budget reads warm, under budget reads cool */
    --over:           #A33A22;
    --over-bg:        #FBEAE4;
    --under:          #1E5231;
    --under-bg:       #E4F0E8;

    --line:           #DED8CA;
    --line-strong:    #C4BCA9;

    --focus:          #1E5231;

    /* Type — 17px base. §9.0 asks for 16px minimum and larger on capture. */
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    --step--1: 0.875rem;
    --step-0:  1.0625rem;
    --step-1:  1.25rem;
    --step-2:  1.5rem;
    --step-3:  2rem;
    --step-4:  2.75rem;
    --step-5:  3.75rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --radius:    10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(23, 28, 24, .06),
                 0 1px 3px rgba(23, 28, 24, .04);
    --shadow-md: 0 2px 4px rgba(23, 28, 24, .05),
                 0 8px 24px rgba(23, 28, 24, .07);

    /* Never smaller than a thumb. */
    --touch: 48px;
}

/* --- Base ---------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.55;
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--space-3);
    line-height: 1.15;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-wrap: balance;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--green-700);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
a:hover { color: var(--green-600); }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Numbers line up in columns and never shift width as they change. */
.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--green-800);
    color: #fff;
    border-radius: var(--radius);
    transform: translateY(-200%);
    transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* --- Layout -------------------------------------------------------------- */

.shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.wrap {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--space-5);
}
.wrap--narrow { max-width: 640px; }

.main { flex: 1; padding-block: var(--space-7); }

/* --- Brand --------------------------------------------------------------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
}

.brand__mark {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--green-800);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-sm);
}
.brand__mark svg { width: 24px; height: 24px; display: block; }

.brand__name {
    font-size: var(--step-1);
    font-weight: 680;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch);
    padding: var(--space-3) var(--space-5);
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease,
                transform .06s ease, box-shadow .14s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--green-800);
    border-color: var(--green-800);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--green-700); border-color: var(--green-700); color: #fff; }

.btn--secondary {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink);
}
.btn--secondary:hover { border-color: var(--ink-muted); color: var(--ink); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn--ghost:hover { background: var(--surface-sunk); color: var(--ink); }

.btn--block { width: 100%; }
.btn--lg { min-height: 56px; font-size: var(--step-1); padding-inline: var(--space-6); }

/* --- Cards --------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.card__title { margin-bottom: var(--space-2); }
.card__lede { color: var(--ink-muted); margin-bottom: var(--space-5); }

/* --- Forms --------------------------------------------------------------- */

.field { margin-bottom: var(--space-5); }

.field__label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    font-size: var(--step-0);
    color: var(--ink);
}

.field__hint {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--step--1);
    color: var(--ink-muted);
}

.input {
    display: block;
    width: 100%;
    min-height: var(--touch);
    padding: var(--space-3) var(--space-4);
    font: inherit;
    /* 16px minimum stops iOS zooming the page on focus. */
    font-size: max(var(--step-0), 16px);
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.input:hover { border-color: var(--ink-faint); }
.input:focus {
    outline: none;
    border-color: var(--green-700);
    box-shadow: 0 0 0 3px var(--green-100);
}
.input::placeholder { color: var(--ink-faint); }

.input--error { border-color: var(--over); }
.input--error:focus { box-shadow: 0 0 0 3px var(--over-bg); }

/* Numeric entry gets the tabular face and a wider target. */
.input--num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--over);
}
.field__error svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* --- Alerts -------------------------------------------------------------- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius);
    margin-bottom: var(--space-5);
    background: var(--surface);
}
.alert svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.alert p { margin: 0; }

.alert--success { border-left-color: var(--green-600); background: var(--under-bg); color: var(--green-900); }
.alert--error   { border-left-color: var(--over);      background: var(--over-bg);  color: #6E2413; }
.alert--info    { border-left-color: var(--amber-600); background: var(--amber-100); color: var(--amber-700); }

/* --- Language switch ----------------------------------------------------- */

.langswitch { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunk); border-radius: 999px; }

.langswitch__btn {
    min-height: 36px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
}
.langswitch__btn[aria-current="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Landing — the public face while the system is being built
   ========================================================================== */

.landing {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1100px 620px at 82% -12%, var(--green-050) 0%, transparent 62%),
        var(--ground);
}

.landing__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-5);
}

.landing__body {
    flex: 1;
    display: grid;
    align-items: center;
    padding-block: var(--space-7) var(--space-8);
}

.landing__grid {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 900px) {
    .landing__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
}
.eyebrow::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--amber-500);
}

.landing__title {
    font-size: clamp(var(--step-4), 8vw, var(--step-5));
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 700;
    margin-bottom: var(--space-5);
}
.landing__title em {
    font-style: normal;
    color: var(--green-700);
}

.landing__lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 52ch;
    margin-bottom: var(--space-6);
}

.landing__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.landing__note {
    font-size: var(--step--1);
    color: var(--ink-muted);
    max-width: 46ch;
}

.landing__foot {
    padding-block: var(--space-5);
    border-top: 1px solid var(--line);
    font-size: var(--step--1);
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
}

/* The quiet illustration: a land, its operations, its running cost. It says
   what the product does without a screenshot of a thing that isn't built. */
.landcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.landcard__head {
    padding: var(--space-4) var(--space-5);
    background: var(--green-800);
    color: #fff;
}
.landcard__name {
    font-size: var(--step-1);
    font-weight: 650;
    letter-spacing: -0.01em;
}
.landcard__meta {
    font-size: var(--step--1);
    color: #B9CFC1;
    margin-top: 2px;
}

.landcard__rows { padding: var(--space-2) 0; }

.landrow {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-3) var(--space-5);
    font-size: var(--step--1);
}
.landrow + .landrow { border-top: 1px solid var(--surface-sunk); }
.landrow__name { color: var(--ink-soft); font-weight: 500; }
.landrow__val  { color: var(--ink); font-variant-numeric: tabular-nums; }
.landrow__var  { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; min-width: 5.5ch; }
.landrow__var--over  { color: var(--over); }
.landrow__var--flat  { color: var(--ink-faint); }

.landrow--total {
    border-top: 1.5px solid var(--line-strong) !important;
    margin-top: var(--space-2);
    padding-block: var(--space-4);
    font-size: var(--step-0);
    font-weight: 680;
}
.landrow--total .landrow__name { color: var(--ink); font-weight: 680; }

/* ==========================================================================
   Auth screens
   ========================================================================== */

.authpage {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background:
        radial-gradient(900px 500px at 50% -20%, var(--green-050) 0%, transparent 60%),
        var(--ground);
}

.authpage__top { padding-block: var(--space-5); }

.authpage__body {
    display: grid;
    place-items: center;
    padding: var(--space-5) 0 var(--space-8);
}

.authcard {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-7) var(--space-6);
}

.authcard__title { font-size: var(--step-2); margin-bottom: var(--space-2); }
.authcard__lede { color: var(--ink-muted); margin-bottom: var(--space-6); }
.authcard__foot {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    font-size: var(--step--1);
    color: var(--ink-muted);
    text-align: center;
}

.authpage__foot {
    padding-block: var(--space-5);
    text-align: center;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

/* ==========================================================================
   Signed-in shell
   ========================================================================== */

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 68px;
}

.topbar__nav { display: flex; align-items: center; gap: var(--space-1); }

.topbar__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    border-radius: var(--radius);
    font-weight: 550;
    font-size: var(--step-0);
    color: var(--ink-soft);
    text-decoration: none;
}
.topbar__link:hover { background: var(--surface-sunk); color: var(--ink); }
.topbar__link[aria-current="page"] { background: var(--green-050); color: var(--green-800); font-weight: 650; }

.topbar__right { display: flex; align-items: center; gap: var(--space-3); }

.whoami { text-align: right; line-height: 1.25; }
.whoami__name { font-weight: 600; font-size: var(--step--1); }
.whoami__role { font-size: var(--step--1); color: var(--ink-muted); text-transform: capitalize; }

@media (max-width: 720px) {
    .topbar__nav { display: none; }
    .whoami { display: none; }
}

/* Bottom navigation on phones — capture lives here (§9.0 principle 2). */
.bottomnav {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: none;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 720px) { .bottomnav { display: block; } }

.bottomnav__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin: 0; padding: 0;
    list-style: none;
}

.bottomnav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 60px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
}
.bottomnav__link[aria-current="page"] { color: var(--green-700); }
.bottomnav__link svg { width: 22px; height: 22px; }

.pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.pagehead__title { margin: 0; }
.pagehead__sub { color: var(--ink-muted); margin: var(--space-1) 0 0; }

/* --- Empty state --------------------------------------------------------- */

.empty {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.empty__icon {
    width: 56px; height: 56px;
    margin: 0 auto var(--space-4);
    color: var(--ink-faint);
}
.empty__title { margin-bottom: var(--space-2); }
.empty__body { color: var(--ink-muted); max-width: 46ch; margin-inline: auto; }

/* --- Error pages --------------------------------------------------------- */

.errorpage {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--space-6);
    background: var(--ground);
}
.errorpage__code {
    font-size: var(--step-5);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--green-700);
    margin-bottom: var(--space-4);
}
.errorpage__msg { font-size: var(--step-1); color: var(--ink-soft); max-width: 44ch; margin: 0 auto var(--space-6); }

/* --- Print (§9.0 principle 8: paper is a real interface) ----------------- */

@media print {
    :root { --ground: #fff; --surface: #fff; }
    body { font-size: 11pt; background: #fff; }
    .topbar, .bottomnav, .btn, .langswitch, .skip-link, .landing__actions { display: none !important; }
    .card, .authcard, .landcard { box-shadow: none; border-color: #999; break-inside: avoid; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   Admin — register, price list, users
   --------------------------------------------------------------------------
   Admin is a desktop job (§9.0 principle 2 exempts the dashboard, and this is
   further from the bakkie than the dashboard is). Tables may be dense here, but
   they still scroll inside their own container rather than pushing the page
   sideways on a phone.
   ========================================================================== */

.adminlayout {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 900px) {
    .adminlayout { grid-template-columns: 220px 1fr; gap: var(--space-7); }
}

.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: 0;
    margin: 0;
    list-style: none;
}
@media (min-width: 900px) {
    .subnav { flex-direction: column; position: sticky; top: 88px; }
}

.subnav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 44px;
    padding: 0 var(--space-4);
    border-radius: var(--radius);
    font-weight: 550;
    font-size: var(--step-0);
    color: var(--ink-soft);
    text-decoration: none;
}
.subnav__link:hover { background: var(--surface-sunk); color: var(--ink); }
.subnav__link[aria-current="page"] {
    background: var(--green-800);
    color: #fff;
    font-weight: 650;
}
.subnav__count {
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    opacity: .7;
}

/* --- Tables -------------------------------------------------------------- */

.tablewrap {
    /* Wide content scrolls inside itself; the page body never scrolls sideways. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--step-0);
}

.table th, .table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--surface-sunk);
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
    font-size: var(--step--1);
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--green-050); }

.table td--num, .table th--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.table td--actions { text-align: right; white-space: nowrap; }

.table__group td {
    background: var(--surface-sunk);
    font-weight: 650;
    font-size: var(--step--1);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.table__name { font-weight: 600; }
.table__sub  { display: block; font-size: var(--step--1); color: var(--ink-muted); }

.table--rowlink tbody tr { cursor: pointer; }

/* --- Badges -------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-3);
    border-radius: 999px;
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    background: var(--surface-sunk);
    color: var(--ink-soft);
}
.badge--irrigated { background: #DEEBF5; color: #1B4A66; }
.badge--dryland   { background: var(--amber-100); color: var(--amber-700); }
.badge--on        { background: var(--under-bg); color: var(--under); }
.badge--off       { background: var(--surface-sunk); color: var(--ink-muted); }
.badge--warn      { background: var(--over-bg); color: var(--over); }
.badge--admin     { background: var(--green-800); color: #fff; }
.badge--office    { background: var(--green-100); color: var(--green-800); }
.badge--user      { background: var(--surface-sunk); color: var(--ink-soft); }

/* --- Toolbar above a table ---------------------------------------------- */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.toolbar__spacer { flex: 1 1 auto; }

.toolbar .input { width: auto; min-width: 240px; }

.select {
    display: block;
    min-height: var(--touch);
    padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
    font: inherit;
    font-size: max(var(--step-0), 16px);
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
}
.select:focus {
    outline: none;
    border-color: var(--green-700);
    box-shadow: 0 0 0 3px var(--green-100);
}

/* --- Form grid ----------------------------------------------------------- */

.formgrid {
    display: grid;
    gap: 0 var(--space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .formgrid--2 { grid-template-columns: 1fr 1fr; }
    .formgrid__full { grid-column: 1 / -1; }
}

.checkline {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--touch);
    padding: var(--space-3) 0;
}
.checkline input[type="checkbox"] {
    flex: none;
    width: 24px; height: 24px;
    margin-top: 2px;
    accent-color: var(--green-700);
    cursor: pointer;
}
.checkline label { font-weight: 550; cursor: pointer; }
.checkline .field__hint { margin-top: 2px; }

.formactions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}
.formactions__spacer { flex: 1 1 auto; }

/* A scrollable list of checkboxes — land assignment, bulk apply. */
.checklist {
    max-height: 340px;
    overflow-y: auto;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
}
.checklist__group {
    margin-top: var(--space-4);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.checklist__group:first-child { margin-top: var(--space-2); }

/* --- Inline price editing ------------------------------------------------ */

.priceform { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.priceform .input {
    width: 8.5rem;
    min-height: 42px;
    padding-block: var(--space-2);
    text-align: right;
}
.priceform .btn { min-height: 42px; padding-inline: var(--space-4); }

.price-missing { color: var(--over); font-weight: 600; }

/* --- Section heading inside a page --------------------------------------- */

.sectionhead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-7) 0 var(--space-4);
}
.sectionhead:first-child { margin-top: 0; }
.sectionhead h2 { margin: 0; font-size: var(--step-1); }
.sectionhead p { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }

/* --- Callout: a finding the client needs to see -------------------------- */

.callout {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-left: 4px solid var(--amber-600);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: var(--space-5);
}
.callout__title { font-weight: 650; margin-bottom: var(--space-2); }
.callout p:last-child { margin-bottom: 0; }
.callout--danger { border-left-color: var(--over); }

.stat {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.stat__label { font-size: var(--step--1); color: var(--ink-muted); font-weight: 550; }
.stat__value { font-size: var(--step-2); font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat__value--loss { color: var(--chart-loss); }
.stat__note  { font-size: var(--step--1); color: var(--ink-muted); }

.statgrid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: var(--space-6);
}

/* ==========================================================================
   The land page (§9.1) — "all the production aspects on one page"
   --------------------------------------------------------------------------
   Cost categories collapse to a single line each. Operations are one tap
   deeper, product lines two (§9.0 principle 5): a farmer checking whether he is
   over budget must not scroll past forty chemical lines to find out.

   Built on <details>/<summary>, so the disclosure works with JavaScript
   disabled or still loading — which §11 requires.
   ========================================================================== */

.planhead {
    background: var(--green-800);
    color: #fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-5) var(--space-6);
}

.planhead__crumb {
    font-size: var(--step--1);
    color: #A8C4B2;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
}

.planhead__name {
    font-size: var(--step-2);
    font-weight: 680;
    letter-spacing: -0.02em;
    margin: var(--space-1) 0 var(--space-2);
}

/* Two lands here share a name — GV 4 carries both a soya and a sunflower plan,
   Boshoek Dryland both maize and sunflower. The crop is the only thing that
   tells them apart, so it rides in the title at a lighter weight. */
.planhead__crop {
    font-weight: 500;
    color: #A8C4B2;
}

.planhead__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--step--1);
    color: #C8DCD0;
}
.planhead__facts strong { color: #fff; font-weight: 600; }

.planhead__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.planhead__badges .badge { background: rgba(255,255,255,.14); color: #fff; }
.planhead__badges .badge--warn { background: #7A2E1A; color: #FFD9CE; }

/* --- The ledger ---------------------------------------------------------- */

.ledger {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    /* No overflow:hidden here. It would make .ledger the containing block for
       the sticky header below, which then offsets by its `top` value against
       the ledger instead of the viewport — pushing the header down over the
       first category row and hiding it. The last row rounds its own corners
       instead. */
}

/* name | proj R/ha | proj total | act R/ha | act total | variance */
.ledger__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem 8rem 6rem 8rem 7.5rem;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-3) var(--space-5);
}

.ledger__head {
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
    font-size: var(--step--1);
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-muted);
    position: sticky;
    top: 68px;
    z-index: 5;
}
.ledger__head span:not(:first-child) { text-align: right; }

.ledger__group {
    font-size: 0.7rem;
    color: var(--ink-faint);
    padding: var(--space-2) var(--space-5) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem 14rem 7.5rem;
    gap: var(--space-3);
    background: var(--surface-sunk);
}
.ledger__group span:not(:first-child) { text-align: center; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }

.ledger__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger__muted { color: var(--ink-faint); }

/* Category level */
.ledger__cat { border-top: 1px solid var(--line); }
.ledger__cat[open] > summary { background: var(--green-050); }

.ledger__catrow {
    cursor: pointer;
    list-style: none;
    font-weight: 650;
    font-size: var(--step-0);
    min-height: var(--touch);
}
.ledger__catrow::-webkit-details-marker { display: none; }
.ledger__catrow:hover { background: var(--green-050); }

.ledger__caret {
    display: inline-block;
    width: 0; height: 0;
    margin-right: var(--space-3);
    border-left: 6px solid var(--ink-muted);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform .15s ease;
    vertical-align: middle;
}
details[open] > summary .ledger__caret { transform: rotate(90deg); }

/* Operation level */
.ledger__ops { background: var(--surface); }

.ledger__op { border-top: 1px solid var(--surface-sunk); }

.ledger__oprow {
    cursor: pointer;
    list-style: none;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-soft);
    padding-left: var(--space-7);
    min-height: 44px;
}
.ledger__oprow::-webkit-details-marker { display: none; }
.ledger__oprow:hover { background: var(--surface-sunk); }

.ledger__opdate { font-weight: 500; color: var(--ink-muted); }

/* Line level */
.ledger__line {
    font-size: var(--step--1);
    padding-left: calc(var(--space-7) + var(--space-5));
    color: var(--ink-soft);
    border-top: 1px solid var(--ground);
}
.ledger__line:hover { background: var(--ground); }
.ledger__linename {
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
}
a.ledger__linename:hover { color: var(--green-700); text-decoration: underline; }
.ledger__linemeta { color: var(--ink-muted); font-size: 0.8rem; display: block; }

.ledger__total {
    border-top: 2px solid var(--line-strong);
    background: var(--surface-sunk);
    font-weight: 700;
    font-size: var(--step-0);
    min-height: 56px;
    align-items: center;
    /* Clips itself to the ledger's rounded bottom, since the container no
       longer hides overflow. */
    border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}

.ledger__income {
    border-top: 1px solid var(--line);
    background: var(--surface);
    font-weight: 600;
}

/* Variance colouring: over budget reads warm, under reads cool. */
.v-over  { color: var(--over); font-weight: 650; }
.v-under { color: var(--under); font-weight: 650; }
.v-flat  { color: var(--ink-faint); }

.ledger__uncaptured { color: var(--ink-faint); font-style: italic; }

.ledger__excluded { opacity: .62; }
.ledger__excluded .ledger__linename { text-decoration: line-through; }

.ledger__actions {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5) var(--space-3);
    padding-left: calc(var(--space-7) + var(--space-5));
    background: var(--ground);
}
.ledger__actions .btn { min-height: 38px; padding-inline: var(--space-4); font-size: var(--step--1); }

/* --- Capture progress ---------------------------------------------------- */

.progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--step--1);
    color: var(--ink-muted);
}
.progress__track {
    flex: 1 1 120px;
    max-width: 200px;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-sunk);
    overflow: hidden;
}
/* display:block matters. This is a <span> inside a plain block track, so
   without it the fill computes to display:inline, which ignores width and
   height entirely — the bar rendered 0x0 and read as "nothing captured" on a
   land that was fully captured. */
.progress__fill {
    display: block;
    height: 100%;
    background: var(--green-600);
    border-radius: 999px;
    transition: width .3s ease;
}
@media (prefers-reduced-motion: reduce) { .progress__fill { transition: none; } }

/* --- Phone layout -------------------------------------------------------- */
/* A wide grid scrolled sideways on a phone is exactly what §9.0 forbids, so
   below 760px the numbers stack under the name instead. */

@media (max-width: 760px) {
    .ledger__head, .ledger__group { display: none; }

    .ledger__grid {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-1) var(--space-3);
        padding-inline: var(--space-4);
    }

    .ledger__grid > .ledger__num { grid-column: 2; text-align: right; }

    /* Keep the headline pair; fold the rest into a labelled second line. */
    .ledger__grid > .ledger__num[data-label]::before {
        content: attr(data-label) " ";
        font-size: 0.68rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--ink-faint);
        font-weight: 700;
        margin-right: var(--space-1);
    }

    .ledger__oprow { padding-left: var(--space-5); }
    .ledger__line  { padding-left: var(--space-6); }
    .ledger__actions { padding-left: var(--space-6); }

    /* A row with nothing captured collapses to just its projected figures
       rather than stacking three more lines of dashes. */
    .ledger__num--empty { display: none; }
}

/* --- Plan list ----------------------------------------------------------- */

.plangrid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.plancard {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: border-color .14s ease, box-shadow .14s ease, transform .06s ease;
}
.plancard:hover { border-color: var(--green-600); box-shadow: var(--shadow-md); color: inherit; }
.plancard:active { transform: translateY(1px); }

.plancard__farm {
    font-size: var(--step--1);
    color: var(--ink-muted);
    letter-spacing: .03em;
    text-transform: uppercase;
    font-weight: 600;
}
.plancard__name { font-size: var(--step-1); font-weight: 650; margin: 2px 0 var(--space-2); letter-spacing: -0.01em; }
.plancard__meta { font-size: var(--step--1); color: var(--ink-muted); margin-bottom: var(--space-4); }

.plancard__figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--surface-sunk);
}
.plancard__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); font-weight: 700; }
.plancard__value { font-size: var(--step-1); font-weight: 650; font-variant-numeric: tabular-nums; }
.plancard__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ==========================================================================
   Capture (§9.0) — the screen a field user lives in
   --------------------------------------------------------------------------
   Built for a bakkie, in sunlight, sometimes with dusty hands. One column, one
   number in focus at a time, targets a thumb can hit without looking, and type
   large enough to read through reading glasses at arm's length.

   Everything here is deliberately BIGGER than the rest of the application.
   §9.0 asks for 16px minimum and larger on capture, so the base here is 19px
   and the numeric inputs are 26px.
   ========================================================================== */

.capture {
    --step-0: 1.1875rem;          /* 19px base, up from 17 */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--ground);
}

.capture__bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--green-800);
    color: #fff;
    padding: var(--space-4) var(--space-5);
    padding-top: max(var(--space-4), env(safe-area-inset-top));
}

.capture__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: #B9CFC1;
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 600;
}
.capture__back:hover { color: #fff; }

.capture__title {
    font-size: var(--step-2);
    font-weight: 680;
    letter-spacing: -0.02em;
    margin: var(--space-1) 0 var(--space-1);
}
.capture__meta { font-size: var(--step--1); color: #C8DCD0; }

.capture__body {
    flex: 1;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    /* The bottom padding clears the sticky action bar, so the last product card
       can be scrolled fully into view instead of sitting under the button. */
    padding: var(--space-5) var(--space-4) 11rem;
}

/* --- The question at the top -------------------------------------------- */

.capture__ask {
    font-size: var(--step-1);
    font-weight: 650;
    margin-bottom: var(--space-4);
}

/* --- One product line --------------------------------------------------- */

.cline {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.cline--changed { border-color: var(--amber-500); background: #FFFDF7; }
.cline--excluded { opacity: .6; background: var(--surface-sunk); box-shadow: none; }

.cline__name {
    font-size: var(--step-1);
    font-weight: 650;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-1);
}

.cline__planned {
    font-size: var(--step--1);
    color: var(--ink-muted);
    margin-bottom: var(--space-4);
}

/* The number itself — the single most important control on the screen. */
.cline__row {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
}

.cline__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 64px;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-num);
    font-size: 1.625rem;           /* 26px — readable at arm's length */
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
    color: var(--ink);
    background: var(--surface);
    border: 2px solid var(--line-strong);
    border-radius: var(--radius);
}
.cline__input:focus {
    outline: none;
    border-color: var(--green-700);
    box-shadow: 0 0 0 4px var(--green-100);
}
.cline__input::placeholder { color: var(--ink-faint); font-weight: 400; }

.cline__unit {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 4.5rem;
    padding-inline: var(--space-3);
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--ink-muted);
    background: var(--surface-sunk);
    border-radius: var(--radius);
}

.cline__clear {
    flex: none;
    min-width: 56px;
    min-height: 64px;
    border: 2px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 1.25rem;
    cursor: pointer;
}
.cline__clear:hover { border-color: var(--over); color: var(--over); }

.cline__status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--step--1);
    font-weight: 600;
    min-height: 24px;
}
.cline__status--planned { color: var(--under); }
.cline__status--changed { color: var(--amber-700); }
.cline__status--empty   { color: var(--ink-faint); font-weight: 500; }
.cline__status--error   { color: var(--over); }
.cline__status svg { width: 18px; height: 18px; }

.cline__reason {
    font-size: var(--step--1);
    color: var(--ink-soft);
    font-style: italic;
}

/* --- The date, asked once for the whole job ----------------------------- */

.capture__date {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}
.capture__date label { display: block; font-weight: 650; margin-bottom: var(--space-3); }
.capture__date input {
    width: 100%;
    min-height: 60px;
    padding: var(--space-3) var(--space-4);
    font: inherit;
    font-size: 1.25rem;
    border: 2px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}
.capture__date input:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 4px var(--green-100); }

/* --- The actions, pinned where a thumb reaches -------------------------- */

.capture__actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--ground) 72%, transparent);
    padding: var(--space-5) 0 max(var(--space-5), env(safe-area-inset-bottom));
    margin-top: var(--space-5);
}

.capture__confirm {
    width: 100%;
    min-height: 68px;
    font-size: var(--step-1);
    font-weight: 680;
    margin-bottom: var(--space-3);
}

.capture__hint {
    font-size: var(--step--1);
    color: var(--ink-muted);
    text-align: center;
    margin-top: var(--space-3);
}

/* --- Pick a land, pick a job -------------------------------------------- */

.picklist { display: grid; gap: var(--space-3); }

.pick {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 76px;
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
}
.pick:hover { border-color: var(--green-600); color: inherit; }
.pick:active { transform: translateY(1px); }

.pick__main { flex: 1 1 auto; min-width: 0; }
.pick__name { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; }
.pick__meta { font-size: var(--step--1); color: var(--ink-muted); margin-top: 2px; }

.pick__state { flex: none; text-align: right; }

.pick__chev { flex: none; width: 22px; height: 22px; color: var(--ink-faint); }

.pick--done { background: var(--under-bg); border-color: var(--green-100); }

/* A small ring showing how much of a job is captured. */
.ring { display: inline-grid; place-items: center; width: 44px; height: 44px; position: relative; }
.ring svg { transform: rotate(-90deg); width: 44px; height: 44px; }
.ring__track { stroke: var(--surface-sunk); }
.ring__fill  { stroke: var(--green-600); transition: stroke-dashoffset .3s ease; }
.ring__label { position: absolute; font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Saving and loading states
   --------------------------------------------------------------------------
   §9.0 principle 6 says nothing is ever lost. Half of that is technical — the
   form keeps what was typed — and half is simply telling the user what is
   happening, so a slow save on a bad signal does not look like a dead screen.
   ========================================================================== */

.btn.is-loading,
.btn[aria-busy="true"] {
    cursor: progress;
    opacity: .85;
}
.btn:disabled { cursor: not-allowed; }

.btn__spinner {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pb-spin .6s linear infinite;
    flex: none;
}

@keyframes pb-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .btn__spinner { animation-duration: 1.6s; }
}

.btn.is-saved {
    background: var(--green-600);
    border-color: var(--green-600);
    color: #fff;
}

/* --- Toasts -------------------------------------------------------------- */

.toasts {
    position: fixed;
    left: 50%;
    bottom: max(var(--space-5), env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(30rem, calc(100vw - 2rem));
    pointer-events: none;
}

.toast {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    font-size: var(--step-0);
    font-weight: 550;
    line-height: 1.4;
    color: #fff;
    background: var(--green-800);
    box-shadow: var(--shadow-md);
    animation: pb-toast-in .22s ease-out;
}
.toast--error { background: #8A2E17; }
.toast--info  { background: var(--amber-700); }

.toast--out { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }

@keyframes pb-toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
}

/* --- Page-load progress bar ---------------------------------------------- */

.progressbar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 300;
    background: var(--amber-500);
    box-shadow: 0 0 8px rgba(216, 155, 44, .7);
    transition: width 2.4s cubic-bezier(.1, .6, .3, 1);
}
.progressbar--on { width: 88%; }

/* An error the server reported against no field on screen. */
.formerror { margin-bottom: var(--space-5); }

/* ==========================================================================
   Charts
   --------------------------------------------------------------------------
   Ranked horizontal bars, one colour, value beside each bar. No axis, no
   gridlines, no legend, nothing to decode — the label says what it is and the
   number says how much. The person reading this is a farmer at a kitchen table,
   not an analyst.

   The bar colour was checked with a palette validator rather than chosen by
   eye: the brand green (#2A6B42) sits below the chroma floor and reads grey as
   a large fill, so charts use #2E7D4F, which passes lightness, chroma and
   contrast against this surface.
   ========================================================================== */

:root {
    --chart-bar: #2E7D4F;
    --chart-track: #EDEAE1;
    /* Loss. Profit and loss are opposite states rather than two sizes of one
       thing, so the profit chart is diverging: two hues either side of zero. */
    --chart-loss: #B04A00;
}

.chartgrid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    /* Each card sizes to its own content — a chart with six bars should not be
       stretched to the height of one with thirteen. */
    align-items: start;
    margin-bottom: var(--space-6);
}
@media (min-width: 980px) {
    .chartgrid { grid-template-columns: 1fr 1fr; }
    /* The profit chart is the one the client opens the page for, so it takes
       the full row rather than sitting alone in a half-width cell. */
    .chartgrid > .chart:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.chart {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5) var(--space-4);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.chart__title {
    font-size: var(--step-1);
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-5);
}

.chart__empty { color: var(--ink-muted); margin: 0; }

.chart__bars { list-style: none; margin: 0; padding: 0; }

.chart__row {
    display: grid;
    grid-template-columns: minmax(6.5rem, 11rem) 1fr auto;
    align-items: center;
    gap: var(--space-4);
    /* Row taller than the bar, so the band keeps some air. */
    padding: var(--space-2) 0;
}
.chart__row + .chart__row { border-top: 1px solid var(--ground); }

.chart__label {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    min-width: 0;
    overflow-wrap: anywhere;
}
a.chart__label:hover { color: var(--green-700); text-decoration: underline; }

.chart__sublabel {
    display: block;
    font-weight: 500;
    color: var(--ink-muted);
    font-size: 0.78rem;
}

.chart__track {
    position: relative;
    display: block;
    height: 18px;                 /* thin: well under the 24px cap */
    background: var(--chart-track);
    border-radius: 0 4px 4px 0;
    min-width: 2px;
}

.chart__bar {
    display: block;
    height: 100%;
    background: var(--chart-bar);
    /* Square where it leaves the baseline, rounded at the data end. */
    border-radius: 0 4px 4px 0;
    min-width: 3px;
    transition: width .35s cubic-bezier(.2, .7, .3, 1);
}

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

/* A loss bar in the no-JS/table view. Validated against the bar green at
   ΔE 7.8 (deutan) — inside the floor band, which is legal here because the
   minus sign in the value beside it carries the same information. */
.chart__bar--loss   { background: var(--chart-loss); }
.chart__value--loss { color: var(--chart-loss); }

.chart__value {
    font-size: var(--step--1);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
}

/* --- The filter row above the charts ------------------------------------ */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.filters__label {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-muted);
}
.filters .select { min-height: 44px; }

.is-refreshing { opacity: .55; transition: opacity .12s ease; pointer-events: none; }

/* The full category grid, kept but folded away. */
.fulltable > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font-weight: 600;
    font-size: var(--step--1);
}
.fulltable > summary::-webkit-details-marker { display: none; }
.fulltable > summary:hover { border-color: var(--ink-muted); }
.fulltable[open] > summary { margin-bottom: var(--space-4); }

/* --- Chart.js canvas and the numbers behind it --------------------------- */

.chart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.chart__head .chart__title { margin: 0; }

.chart__toggle {
    flex: none;
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
}
.chart__toggle:hover { border-color: var(--ink-muted); color: var(--ink); }

.chart__canvas { position: relative; width: 100%; }
.chart__canvas canvas { display: block; width: 100% !important; }


/* ---------------------------------------------------------------- cost types
   The breakdown by cost category, kept as a flat summary below the ledger.
   It used to be the land page's spine, which meant a single spray whose
   products span four categories printed its header four times with four
   partial subtotals — one job looking like four. */
.costtypes {
    margin-top: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.costtypes > summary {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--step--1);
    color: var(--ink-secondary);
    list-style: none;
}
.costtypes > summary::-webkit-details-marker { display: none; }
.costtypes > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: var(--space-2);
    transition: transform .15s ease;
    color: var(--ink-muted);
}
.costtypes[open] > summary::before { transform: rotate(90deg); }

.costtypes__grid {
    border-top: 1px solid var(--line);
    padding: var(--space-2) 0;
}

.costtypes__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-2) var(--space-4);
}
.costtypes__row + .costtypes__row { border-top: 1px solid var(--line-soft, var(--line)); }

.costtypes__name  { font-size: var(--step--1); }
.costtypes__perha { font-size: var(--step--1); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.costtypes__total { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 9ch; text-align: right; }

@media (max-width: 640px) {
    .costtypes__row { grid-template-columns: 1fr auto; }
    .costtypes__perha { display: none; }
}

/* ------------------------------------------------------------- handover
   A temporary password, shown exactly once. It has to survive a glance:
   large, monospaced, selectable, and it stays on the page until the admin
   navigates away. It used to be a toast, which the redirect that followed it
   dismissed within a fraction of a second — losing the only copy of a secret
   that cannot be recovered, only reissued. */
.handover {
    border: 2px solid var(--brand-700, #2E7D4F);
    border-radius: var(--radius-lg);
    background: #F3F8F4;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    max-width: 680px;
}

.handover__label {
    font-size: var(--step--1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-700, #2E7D4F);
    margin: 0;
}

.handover__value { margin: var(--space-3) 0; }
.handover__value code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--step-2);
    font-weight: 600;
    letter-spacing: .02em;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .4em .6em;
    display: inline-block;
    /* Selectable by design — the admin may want to copy it by hand. */
    user-select: all;
    word-break: break-all;
}

.handover__note {
    font-size: var(--step--1);
    color: var(--ink-secondary);
    margin: 0 0 var(--space-3);
}

/* An operation with no products yet. Reached from "something extra happened",
   where the farmer has named the job but not said what went on the land. */
.capture__empty {
    text-align: center;
    padding: var(--space-5) var(--space-4);
}
.capture__empty .capture__ask { margin-bottom: var(--space-2); }
.capture__empty .capture__hint { margin-bottom: var(--space-4); }

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

.capture__addmore {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: var(--step--1);
    font-weight: 600;
}