/* ===========================================================================
   Crop Schedule UI: the frame
   /Asserts/Main/cs-framework.css

   The header, its menu and drawer, and the footer, 2026-10-27. Linked by
   Site.Master on every page, versioned from its code-behind. Framework
   category (CS-FRAMEWORK.md).

   Self-contained on purpose. Nicepage is still loaded (until step B) and
   cs-core.css is not linked by the master, so nothing here leans on either:
   no core tokens, no u- classes. Nicepage only styles bare elements here
   (a, ul, button, and header { position: relative }); every rule below
   carries a class, so it wins without !important.

   Three layouts, one menu:
     laptop and up (1120px)  a row of dropdowns
     tablet (641 to 1119px)  a drawer from the right with the full menu
     phone (640px or less, or a phone on its side)
                             the drawer with About, Contact, Legal and the
                             app only: farmers sign in on the app
   =========================================================================== */

.cs-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.cs-nav,
.cs-foot {
    --nav-ink: #1C2331;
    --nav-text: #4B515D;
    --nav-muted: #6B7280;
    --nav-faint: #9AA0AA;
    --nav-line: #E6E8EC;
    --nav-soft: #F2F4F3;
    --nav-navy: #2C367E;
    --nav-navy-deep: #222A63;
    --nav-wash: #EEF1FA;
    --nav-green: #173327;
    --nav-leaf: #6CC08D;
    --nav-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
}

    .cs-nav *,
    .cs-nav *::before,
    .cs-nav *::after,
    .cs-foot *,
    .cs-foot *::before,
    .cs-foot *::after {
        box-sizing: border-box;
    }

    .cs-nav ul,
    .cs-foot ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cs-nav a,
    .cs-foot a {
        text-decoration: none;
    }

    .cs-nav svg,
    .cs-foot svg {
        display: block;
        flex: none;
        fill: currentColor;
    }

    .cs-nav a:focus-visible,
    .cs-nav button:focus-visible,
    .cs-foot a:focus-visible {
        outline: 2px solid #3FA66E;
        outline-offset: 2px;
    }

/* ---------------------------------------------------------------------------
   The bar
   --------------------------------------------------------------------------- */

/* Above the Help button (1000) so the drawer covers it; below the loading
   screen (10000) and the notice popups. */
.cs-nav {
    position: sticky;
    top: 0;
    z-index: 1050;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    /* The frosted backing sits on a layer of its own: a backdrop filter on
       the header itself would trap the drawer, which is position: fixed. */
    .cs-nav::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(255, 255, 255, 0.9);
        -webkit-backdrop-filter: saturate(1.4) blur(14px);
        backdrop-filter: saturate(1.4) blur(14px);
    }

    .cs-nav.is-scrolled {
        border-bottom-color: var(--nav-line);
        box-shadow: 0 10px 30px -24px rgba(16, 24, 40, 0.45);
    }

.cs-nav-bar {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 1320px;
    height: 68px;
    margin: 0 auto;
    padding: 0 22px;
}

.cs-nav a.cs-nav-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
}

    /* The trimmed logo (CropScheduleLogo_2022_TM_trim.png): the original
       file is half empty space top and bottom, which is what made it read
       small. */
    .cs-nav-logo img {
        display: block;
        width: auto;
        height: 34px;
    }

.cs-nav-menu {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
}

.cs-nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.cs-nav-item {
    position: relative;
    margin: 0;
    padding: 0;
}

/* A top item: a link or, with a panel, a button */
.cs-nav .cs-nav-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    font: 500 14.5px/1 'Roboto', sans-serif;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--nav-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

    .cs-nav .cs-nav-top:hover,
    .cs-nav .cs-nav-item.is-open > .cs-nav-top {
        background: var(--nav-soft);
        color: var(--nav-ink);
    }

    .cs-nav .cs-nav-item.is-current > .cs-nav-top {
        background: var(--nav-wash);
        color: var(--nav-navy);
    }

.cs-nav-chev {
    width: 10px;
    height: 10px;
    opacity: 0.55;
    transition: transform 0.2s var(--nav-ease);
}

.cs-nav-item.is-open > .cs-nav-top .cs-nav-chev {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Panels
   --------------------------------------------------------------------------- */

/* Hangs from the bottom edge of the bar, whatever the height of the item it
   opens from (a top item is 40px, the avatar 46px): items sit in the middle
   of the 68px bar, so the bar's bottom is half the item plus 34px, plus the
   1px hairline. Square on top, so it reads as part of the header. */
.cs-nav-panel {
    position: absolute;
    top: calc(50% + 35px);
    left: 0;
    z-index: 2;
    min-width: 300px;
    padding: 8px;
    border: 1px solid var(--nav-line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: #fff;
    box-shadow:
        0 30px 60px -24px rgba(16, 24, 40, 0.28),
        0 10px 20px -12px rgba(16, 24, 40, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s var(--nav-ease), transform 0.18s var(--nav-ease), visibility 0s linear 0.18s;
}

    /* Keeps the pointer over the item while it crosses the gap (12px under
       the avatar, 15px under a top item; the close waits 200ms) */
    .cs-nav-panel::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -12px;
        height: 12px;
    }

.cs-nav-item.is-open > .cs-nav-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.cs-nav-panel.is-wide {
    min-width: 540px;
}

.cs-nav-panel.is-reports {
    min-width: 600px;
}

.cs-nav-panel.is-right,
.cs-nav-panel.is-flip {
    left: auto;
    right: 0;
}

.cs-nav-panel.is-right {
    min-width: 240px;
}

.cs-nav-links {
    display: grid;
    gap: 2px;
}

    .cs-nav-links.is-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-nav-links + .cs-nav-links {
        margin-top: 4px;
    }

    .cs-nav-links li {
        margin: 0;
        padding: 0;
    }

    .cs-nav .cs-nav-links a {
        display: block;
        padding: 10px 12px;
        border-radius: 10px;
        color: var(--nav-ink);
        transition: background-color 0.15s;
    }

        .cs-nav .cs-nav-links a:hover {
            background: #F4F6F5;
            color: var(--nav-ink);
        }

        .cs-nav .cs-nav-links a.is-current {
            background: var(--nav-wash);
        }

    .cs-nav-links b {
        display: flex;
        align-items: center;
        gap: 6px;
        font: 500 14px/1.3 'Roboto', sans-serif;
        color: var(--nav-ink);
    }

    .cs-nav-links a.is-current b {
        color: var(--nav-navy);
    }

    .cs-nav-links a span {
        display: block;
        margin-top: 3px;
        font: 400 12.5px/1.4 'Roboto', sans-serif;
        color: var(--nav-muted);
    }

    .cs-nav-links.is-compact a {
        padding: 8px 12px;
    }

    /* Battery & signal leads Sensor data: the page people kept missing */
    .cs-nav-links li.is-lead {
        margin-bottom: 4px;
        padding-bottom: 4px;
        border-bottom: 1px solid #EEF0F3;
    }

        .cs-nav-links li.is-lead b::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #57B77C;
            box-shadow: 0 0 0 3px rgba(87, 183, 124, 0.2);
        }

    .cs-nav-links li.is-split {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid #EEF0F3;
    }

.cs-nav-ext {
    width: 10px;
    height: 10px;
    fill: var(--nav-faint);
}

.cs-nav-group-title {
    display: block;
    padding: 8px 12px 4px;
    font: 600 11px/1.2 'Roboto', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nav-faint);
}

/* Two columns that fill top down, so a short group leaves no hole */
.cs-nav-groups {
    columns: 2;
    column-gap: 8px;
}

.cs-nav-group {
    break-inside: avoid;
    padding-bottom: 6px;
}

/* Sign out, a LinkButton */
.cs-nav a.cs-nav-signout {
    display: block;
    padding: 8px 12px;
    border-radius: 10px;
    font: 500 14px/1.3 'Roboto', sans-serif;
    color: #B23B2C;
}

    .cs-nav a.cs-nav-signout:hover {
        background: #FEF3F1;
        color: #B23B2C;
    }

/* ---------------------------------------------------------------------------
   Right-hand side: sign in, or the avatar
   --------------------------------------------------------------------------- */

.cs-nav-guest {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.cs-nav a.cs-nav-signin {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font: 500 14.5px/1 'Roboto', sans-serif;
    color: var(--nav-ink);
}

    .cs-nav a.cs-nav-signin:hover {
        background: var(--nav-soft);
        color: var(--nav-ink);
    }

.cs-nav a.cs-nav-cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font: 500 14.5px/1 'Roboto', sans-serif;
    color: #fff;
    background: var(--nav-navy);
    box-shadow: 0 10px 22px -14px rgba(44, 54, 126, 0.9);
    transition: background-color 0.15s, transform 0.15s var(--nav-ease);
}

    .cs-nav a.cs-nav-cta:hover {
        background: var(--nav-navy-deep);
        color: #fff;
        transform: translateY(-1px);
    }

.cs-nav-account {
    margin-left: auto;
}

.cs-nav .cs-nav-avatar {
    height: 46px;
    padding: 0 10px 0 4px;
    border-radius: 999px;
    gap: 8px;
}

    .cs-nav-avatar img {
        display: block;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--nav-line);
    }

.cs-nav-avatar-label {
    display: none;
}

/* Only in the drawer and on phones */
.cs-nav-burger,
.cs-nav-drawer-head,
.cs-nav-shade,
.cs-nav-phone {
    display: none;
}

/* ---------------------------------------------------------------------------
   App badges (header drawer and footer). An iPhone sees the App Store only
   and an Android phone Google Play only (cs-framework.js sets data-os).
   --------------------------------------------------------------------------- */

.cs-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cs-nav a.cs-badge,
.cs-foot a.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 16px 0 13px;
    border-radius: 12px;
    background: #0B0F14;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    transition: transform 0.15s var(--nav-ease), background-color 0.15s;
}

    .cs-nav a.cs-badge:hover,
    .cs-foot a.cs-badge:hover {
        background: #000;
        color: #fff;
        transform: translateY(-1px);
    }

    .cs-badge svg {
        width: 20px;
        height: 20px;
    }

    .cs-badge span {
        display: block;
        font: 500 15px/1.05 'Roboto', sans-serif;
        color: #fff;
    }

        .cs-badge span small {
            display: block;
            font-size: 9.5px;
            font-weight: 400;
            letter-spacing: 0.03em;
            opacity: 0.8;
        }

html[data-os="ios"] .cs-badge.is-android,
html[data-os="android"] .cs-badge.is-ios {
    display: none;
}

/* ---------------------------------------------------------------------------
   Tablet and phone: the drawer
   --------------------------------------------------------------------------- */

@media (max-width: 1119px) {
    .cs-nav-bar {
        height: 64px;
    }

    .cs-nav .cs-nav-burger {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin: 0 0 0 auto;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: var(--nav-soft);
        color: var(--nav-ink);
        cursor: pointer;
    }

        .cs-nav-burger svg {
            width: 18px;
            height: 18px;
        }

    .cs-nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: block;
        width: min(400px, 88vw);
        padding: 0 16px 28px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.45);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.32s var(--nav-ease), visibility 0s linear 0.32s;
    }

    html.cs-nav-open .cs-nav-menu {
        transform: none;
        visibility: visible;
        transition-delay: 0s;
    }

    .cs-nav-shade {
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgba(16, 36, 27, 0.45);
        opacity: 0;
        transition: opacity 0.3s;
    }

    html.cs-nav-open .cs-nav-shade {
        display: block;
        opacity: 1;
    }

    html.cs-nav-open,
    html.cs-nav-open body {
        overflow: hidden;
    }

    .cs-nav-drawer-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        margin: 0 -16px 8px;
        padding: 0 12px 0 16px;
        background: #fff;
        border-bottom: 1px solid #EEF0F3;
    }

        .cs-nav-drawer-head img {
            display: block;
            width: auto;
            height: 28px;
        }

    .cs-nav .cs-nav-close {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: var(--nav-soft);
        color: var(--nav-ink);
        cursor: pointer;
    }

        .cs-nav-close svg {
            width: 14px;
            height: 14px;
        }

    .cs-nav-list {
        display: block;
    }

    .cs-nav-item {
        border-bottom: 1px solid #F1F3F5;
    }

    .cs-nav .cs-nav-top {
        justify-content: space-between;
        width: 100%;
        height: 50px;
        padding: 0 10px;
        font-size: 16px;
    }

    .cs-nav-panel,
    .cs-nav-panel.is-wide,
    .cs-nav-panel.is-reports,
    .cs-nav-panel.is-right {
        position: static;
        display: none;
        min-width: 0;
        padding: 0 0 10px 6px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

        .cs-nav-panel::before {
            display: none;
        }

    .cs-nav-item.is-open > .cs-nav-panel {
        display: block;
    }

    .cs-nav-links.is-two {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-nav-groups {
        columns: 1;
    }

    .cs-nav-guest {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin: 18px 0 0;
    }

        .cs-nav a.cs-nav-signin,
        .cs-nav a.cs-nav-cta {
            justify-content: center;
            height: 48px;
            font-size: 16px;
        }

        .cs-nav a.cs-nav-signin {
            border: 1px solid var(--nav-line);
            border-radius: 999px;
        }

    .cs-nav-account {
        margin: 10px 0 0;
        border-bottom: 0;
    }

    .cs-nav .cs-nav-avatar {
        height: 56px;
        padding: 0 10px 0 4px;
        border-radius: 14px;
    }

    .cs-nav-avatar-label {
        display: block;
        flex: 1 1 auto;
        text-align: left;
    }
}

/* Phones, upright or on their side: no sign in on the website. The drawer
   carries About, Contact, Legal and the app. */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) and (max-width: 1119px) {
    .cs-nav-bar {
        height: 60px;
        padding: 0 16px;
    }

    .cs-nav-logo img {
        height: 28px;
    }

    .cs-nav .cs-nav-list,
    .cs-nav .cs-nav-guest,
    .cs-nav .cs-nav-account {
        display: none;
    }

    .cs-nav-phone {
        display: block;
    }

    .cs-nav .cs-nav-phone-links a {
        display: block;
        padding: 15px 10px;
        border-bottom: 1px solid #F1F3F5;
        font: 500 17px/1.2 'Roboto', sans-serif;
        color: var(--nav-ink);
    }

    .cs-nav .cs-nav-phone-links.is-small a {
        padding: 12px 10px;
        font-size: 15px;
        font-weight: 400;
        color: var(--nav-text);
    }

    .cs-nav-phone .cs-nav-group-title {
        padding: 20px 10px 4px;
    }

    .cs-nav-app {
        margin-top: 24px;
        padding: 18px;
        border-radius: 18px;
        color: #fff;
        background:
            radial-gradient(120% 110% at 100% 100%, #23503B 0%, transparent 60%),
            linear-gradient(160deg, #10241B 0%, var(--nav-green) 55%, #1D4231 100%);
    }

        .cs-nav-app b {
            display: block;
            font: 600 17px/1.3 'Roboto', sans-serif;
        }

        .cs-nav-app > span {
            display: block;
            margin: 4px 0 14px;
            font: 400 14px/1.45 'Roboto', sans-serif;
            color: rgba(255, 255, 255, 0.75);
        }
}

/* ===========================================================================
   The footer
   =========================================================================== */

.cs-foot {
    position: relative;
    color: var(--nav-text);
    background: #F5F7F6;
    border-top: 1px solid var(--nav-line);
}

.cs-foot-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.25fr);
    gap: 32px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 52px 22px 36px;
}

.cs-foot-brand img {
    display: block;
    width: auto;
    height: 30px;
}

.cs-foot-brand p {
    margin: 12px 0 18px;
    padding: 0;
    font: 400 14px/1.5 'Roboto', sans-serif;
    color: var(--nav-muted);
}

.cs-foot-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.cs-foot-title {
    margin-bottom: 4px;
    font: 600 11.5px/1.2 'Roboto', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nav-faint);
}

.cs-foot .cs-foot-col a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 400 14px/1.4 'Roboto', sans-serif;
    color: var(--nav-text);
    transition: color 0.15s;
}

    .cs-foot .cs-foot-col a:hover {
        color: var(--nav-navy);
    }

    .cs-foot-col a svg {
        width: 12px;
        height: 12px;
        fill: var(--nav-faint);
    }

.cs-foot-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 22px 30px;
    border-top: 1px solid var(--nav-line);
    font: 400 12.5px/1.5 'Roboto', sans-serif;
    color: var(--nav-faint);
}

/* Clear of the Help button, bottom right */
@media (max-width: 1560px) {
    .cs-foot-base {
        padding-right: 96px;
    }
}

@media (max-width: 900px) {
    .cs-foot-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-foot-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .cs-foot-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 40px 16px 28px;
    }

    .cs-foot-base {
        padding: 16px 16px 84px; /* clear of the Help button */
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-nav,
    .cs-nav *,
    .cs-foot * {
        transition: none !important;
    }
}