/* =============================================================================
   NETZERO AQUA — farmer console navigation
   =============================================================================
   ONE authoritative stylesheet for the sidebar. It replaces the sidebar block
   that used to live inside app-shell.css, which was ~500 lines of !important
   fighting css/style.css line by line. Three files describing one component is
   how that navigation ended up with two conflicting hover widths declared
   forty lines apart in style.css, with nobody noticing.

   !important still appears below, because style.css:7481 onwards sets the base
   and loads first. Where it appears it is holding a line against that file
   specifically — not against anything here.

   LOAD ORDER: after style.css and after app-shell.css. Last wins.


   HOW IT OPENS
   ------------
   A 72px rail that widens to 268px on hover. There is no toggle button: the
   sidebar is the control.

   Hover-to-open has two well-known failures, and both are answered here rather
   than left standing:

     - It has no keyboard equivalent. So the panel opens on :focus-within too —
       tab into the navigation and the labels are there, and they stay while
       focus is anywhere inside.

     - It reflows the page. The previous build moved .dashboard-content from
       100px to 265px on this same hover, so brushing the left edge of the
       screen shifted the entire workspace under the cursor. The expanded panel
       OVERLAYS the content now; the margin is 72px and never moves. That one
       change is most of why hover-to-open had a bad name here.

   The open is deliberately unhurried — 460ms, and it does not start for 130ms,
   so a cursor crossing the edge on its way somewhere else does not drag the
   panel out. Closing is quicker (300ms, no delay): a thing you have finished
   with should get out of the way immediately.


   COLOUR — THE LOCKUP, AND NOTHING ELSE
   -------------------------------------
   Every value in this file comes from the three colours in the logo:

       #00243C   the navy the mark sits on   (with #003354 / #001830 shades)
       #3BD304   the ring
       #004AF7   the AQUA wordmark

   Nothing here is grey. The secondary ink is the wordmark blue mixed 62%
   toward white (#9EBAFC) rather than a neutral — at a glance it reads as part
   of the mark instead of as default UI chrome. The group labels are the ring
   green, which is the only job green has in this sidebar: it groups, it never
   marks state. Blue carries interaction — hover, active, focus.

   White is used for one thing: the text of the row you are pointing at or on.
   At 14px nothing tinted beats it for legibility, and a navigation should make
   the current item unambiguous.

   Every pairing was computed, not estimated:

       #FFFFFF on #00243C   15.94:1
       #9EBAFC on #00243C    8.26:1
       #3BD304 on #00243C    7.97:1
       #4C82FF on #00243C    4.51:1   (the wordmark blue lifted for navy;
                                       #004AF7 itself is 2.52:1 here)
   ========================================================================== */

:root {
    --nzs-rail: 72px;
    --nzs-open: 268px;

    /* The vertical rhythm, as variables so the short-viewport breakpoint at the
       end of this file can retune the whole column by changing five numbers
       rather than re-declaring every rule.

       It was fixed at head 104 / row 46 / label 20+7 / foot 121, which came to
       670px of content — more than the nav gets on any laptop under about
       870px of viewport. Tasks and Notes were simply cut off, on the default
       window size of the machine this was built on. */
    --nzs-head: 88px;
    --nzs-logo: 68px;
    --nzs-mark: 42px;
    --nzs-row: 42px;
    --nzs-gap: 1px;
    --nzs-label-top: 13px;
    --nzs-label-bot: 5px;
    --nzs-pad: 12px;

    /* Three curves, three jobs, so nothing is eased by accident.
         --nzs-ease   the emphasised curve for the width: leaves fast, settles
                      slowly, which is what makes a panel feel driven rather
                      than dragged.
         --nzs-out    plain ease-out for hover and colour, where anything with
                      a tail reads as lag.
         --nzs-spring a small overshoot for the one thing that should feel
                      physical — the moving indicator. Not used on anything
                      large. */
    --nzs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --nzs-out: cubic-bezier(0.33, 1, 0.68, 1);
    --nzs-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    --nzs-open-ms: 460ms;
    --nzs-open-delay: 130ms;
    --nzs-close-ms: 300ms;

    /* ---- the lockup ---- */
    --nzs-green: #3BD304;                       /* the ring */
    --nzs-blue: #4C82FF;                        /* #004AF7, lifted for navy */
    --nzs-ink: #ffffff;
    --nzs-ink-2: #9EBAFC;                       /* the wordmark blue, 62% to white */

    /* Surfaces and rules, all mixed from the wordmark blue so nothing on this
       panel is a neutral grey. */
    --nzs-line: rgba(76, 130, 255, 0.16);
    --nzs-hover: rgba(76, 130, 255, 0.13);
    --nzs-active: rgba(76, 130, 255, 0.22);
}

.nzs-sr {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}


/* =============================================================================
   1 — THE PANEL
   ========================================================================== */

.dashboard-sidebar-pro.nzs {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1000 !important;

    display: flex !important;
    flex-direction: column !important;
    width: var(--nzs-rail) !important;

    /* One soft vertical shift, sampled from the ground the mark sits on. The
       original stacked three radial "ambient" glows here, which read as gaming
       chrome and fought the data on screen.

       The top stop was #003354, which made the header read as a separate,
       lighter panel bolted above the nav rather than the top of one surface.
       Pulled in so the whole rail is one object. */
    background: linear-gradient(180deg, #002E4A 0%, #00243C 46%, #001B33 100%) !important;
    border-right: 1px solid var(--nzs-line) !important;
    /* A one-pixel highlight down the inside of the right edge, brightest at the
       top where the gradient is lightest. It is the difference between a panel
       and a rectangle of colour, and it costs nothing. */
    box-shadow: inset -1px 0 0 rgba(76, 130, 255, 0.10) !important;

    /* Clips the labels at the rail width. They stay in the layout and fade —
       hiding them with display:none would make the width the only thing that
       moves, and a panel whose contents pop in at the end does not read as
       opening. */
    overflow: hidden !important;

    transition: width var(--nzs-close-ms) var(--nzs-ease),
                box-shadow var(--nzs-close-ms) var(--nzs-ease) !important;
}

/* The open. :focus-within is not a nicety — without it there is no way to
   reach a label from the keyboard at all. */
@media (hover: hover) and (min-width: 769px) {
    .dashboard-sidebar-pro.nzs:hover,
    .dashboard-sidebar-pro.nzs:focus-within {
        width: var(--nzs-open) !important;
        /* Two shadows, not one wide blur. The single 52px blur was a smear:
           spread that far over the navy hero card behind it, it read as a dirty
           patch on the page rather than as the panel being lifted. A 1px hard
           edge does the "this is in front" work, and a wider, weaker fall-off
           does the depth. */
        box-shadow: inset -1px 0 0 rgba(76, 130, 255, 0.10),
                    1px 0 0 rgba(76, 130, 255, 0.28),
                    14px 0 34px rgba(0, 10, 22, 0.30) !important;
        transition: width var(--nzs-open-ms) var(--nzs-ease) var(--nzs-open-delay),
                    box-shadow var(--nzs-open-ms) var(--nzs-ease) var(--nzs-open-delay) !important;
    }
}

/* style.css puts `will-change: transform, opacity` on every nav row, on the
   icon wrappers and on the brand block. That permanently promotes each one to
   its own GPU layer, and the browser re-rasterises them mid-transition —
   which is what produced the "squeeze / blur" smear as the rail opened. */
.nzs, .nzs *, .nzs .sidebar-item, .nzs .sidebar-icon-circle {
    will-change: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.nzs::before, .nzs::after, .nzs .ambient-light { display: none !important; content: none !important; }

/* style.css:7392 hangs a 6px dot off every `.requires-org` row and reveals it
   whenever the cursor is over the sidebar. It marked "this needs an
   organization" — but nearly every row is requires-org, so it drew a column of
   dots down the rail, and it said nothing at all to a farmer who HAS an org
   and whose rows are therefore not locked. The meaning is already carried,
   better and only when true, by .locked. */
.nzs .sidebar-item.requires-org::after { display: none !important; content: none !important; }


/* =============================================================================
   2 — HEADER
   -----------------------------------------------------------------------------
   The lockup was 34px, then 44px, then 56px, and still read small against the
   open panel it sits on. It is 68px now, in an 88px header — the brand appears
   exactly once in this console and it can afford the room. At 68px the lockup
   is about 161px wide against a 268px panel, so it still clears the edge, and
   the collapsed rail is untouched: only the mark shows there, and that is
   sized by --nzs-mark.

   Both marks are stacked in the same box and crossfade, so the header never
   reflows as the panel opens: the ring does not slide out of the way, it
   becomes the lockup.
   ========================================================================== */

.nzs-head {
    flex: 0 0 auto;
    position: relative;
    height: var(--nzs-head);
    border-bottom: 1px solid var(--nzs-line);
}

.nzs-brand {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
}
.nzs-brand:focus-visible { outline: 2px solid var(--nzs-blue); outline-offset: -3px; }

.nzs-brand__full, .nzs-brand__mark {
    position: absolute;
    top: 50%;
    display: block;
    width: auto;
    transform: translateY(-50%);
    transition: opacity var(--nzs-close-ms) var(--nzs-out);
}

/* The ring is centred in the rail; the lockup starts at the same left inset
   the rows use, so the brand and the navigation share an edge. */
.nzs-brand__mark { left: calc((var(--nzs-rail) - var(--nzs-mark)) / 2); height: var(--nzs-mark); opacity: 1; }
.nzs-brand__full { left: 20px; height: var(--nzs-logo); opacity: 0; }

@media (hover: hover) and (min-width: 769px) {
    .nzs:hover .nzs-brand__mark,
    .nzs:focus-within .nzs-brand__mark {
        opacity: 0;
        transition: opacity 200ms var(--nzs-out) var(--nzs-open-delay);
    }
    .nzs:hover .nzs-brand__full,
    .nzs:focus-within .nzs-brand__full {
        opacity: 1;
        transition: opacity 280ms var(--nzs-out) calc(var(--nzs-open-delay) + 90ms);
    }
}


/* ---- the veil ----
   The panel overlays the workspace, so opening it covers whatever is under it.
   On my-farm.html that is the farm's own name, and a page title that silently
   goes missing looks like a fault rather than a state.

   A light wash makes the overlap deliberate: the content is visibly still
   there, one layer back, and the panel is visibly in front of it. It is what a
   temporary navigation drawer has always looked like, and it is why the
   shadow above can now be subtle — the veil is doing the separating.

   pointer-events: none is load-bearing. The panel stays open because the
   cursor is over it; a veil that swallowed pointer events would close the
   thing that opened it the moment it appeared. */
.nzs-veil {
    position: fixed;
    inset: 0;
    z-index: 999;              /* under .nzs (1000), over the workspace */
    /* 0.18, not 0.30. At 0.30 a white card behind it lands on #B2B8BE, which
       reads as disabled rather than as one layer back — and this fires on a
       hover, not on a modal, so it has to be the lightest wash that still
       separates. 0.18 takes that card to #D1D5D8: clearly behind, still
       plainly readable. */
    background: rgba(0, 20, 38, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nzs-close-ms) var(--nzs-out);
}

@media (hover: hover) and (min-width: 769px) {
    .nzs:hover ~ .nzs-veil,
    .nzs:focus-within ~ .nzs-veil {
        opacity: 1;
        transition: opacity var(--nzs-open-ms) var(--nzs-out) var(--nzs-open-delay);
    }
}

/* On a phone the drawer has .nzs-scrim, which is a real one — it dims AND it
   takes the tap that closes the drawer. Two would stack. */
@media (max-width: 768px) { .nzs-veil { display: none; } }


/* =============================================================================
   3 — NAV
   ========================================================================== */

.nzs-nav {
    position: relative;
    flex: 1 1 auto !important;
    min-height: 0 !important;       /* a column flex child defaults to auto */
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--nzs-pad) 12px calc(var(--nzs-pad) + 4px);
    /* BOTH properties, and both transparent at rest.

       The ::-webkit- rules alone were not enough: Chromium honours the standard
       `scrollbar-color` as well, and that was set to --nzs-line — so the thumb
       painted anyway and drew a pale line down the rail that read as a seam in
       the chrome. Whichever one the engine uses, it now has nothing to paint
       until the cursor is in the sidebar. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s var(--nzs-out);
}

.nzs:hover .nzs-nav { scrollbar-color: rgba(76, 130, 255, 0.34) transparent; }

.nzs-nav::-webkit-scrollbar { width: 4px; }
.nzs-nav::-webkit-scrollbar-track { background: transparent; }
.nzs-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
    transition: background 0.2s var(--nzs-out);
}
.nzs:hover .nzs-nav::-webkit-scrollbar-thumb { background: rgba(76, 130, 255, 0.34); }

/* ---- group labels ----
   Ten rows in a flat list is hard to scan. The ring green, which is the only
   job green has in this sidebar. In the rail the words would not fit, so the
   label becomes a rule and the grouping survives without text. */
.nzs .sidebar-section-label.nzs-group {
    display: block;
    position: relative;
    margin: var(--nzs-label-top) 0 var(--nzs-label-bot);
    padding: 0 10px;
    height: 14px;
    line-height: 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--nzs-green);
    white-space: nowrap;
    overflow: hidden;
}

.nzs .sidebar-section-label.nzs-group:first-child { margin-top: 2px; }

.nzs-group span {
    display: block;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--nzs-close-ms) var(--nzs-out),
                transform var(--nzs-close-ms) var(--nzs-out);
}

.nzs-group::before {
    content: '';
    position: absolute;
    left: 16px; right: 16px; top: 50%;
    height: 1px;
    background: rgba(59, 211, 4, 0.34);
    opacity: 1;
    transition: opacity 180ms var(--nzs-out);
}

/* ---- the moving indicator ----
   One element that follows the cursor from row to row, instead of each row
   painting its own background on hover. It is the difference between ten
   things lighting up independently and one object moving — and because it
   animates transform only, it is a single composited layer whatever the list
   is doing.

   sidebar-pro.js sets --nzs-cursor-y and -h from the hovered row's offsetTop;
   nothing here needs to know how many rows there are. */
.nzs-cursor {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 0;
    height: var(--nzs-cursor-h, 42px);
    border-radius: 11px;
    background: var(--nzs-hover);
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--nzs-cursor-y, 0px));
    transition: transform 0.26s var(--nzs-spring),
                height 0.26s var(--nzs-spring),
                opacity 0.16s var(--nzs-out);
}

.nzs-cursor.is-on { opacity: 1; }

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

.nzs .sidebar-item {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    height: var(--nzs-row) !important;
    margin: var(--nzs-gap) 0 !important;
    padding: 0 11px !important;

    font-family: inherit;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: left;
    color: var(--nzs-ink-2) !important;
    text-decoration: none !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 11px !important;
    cursor: pointer;

    transition: color 0.14s var(--nzs-out);
}

/* No background here: .nzs-cursor draws it, and two of them would double up as
   the indicator slides. Colour still changes per row, because that has to be
   instant on the row you are actually pointing at. */
.nzs .sidebar-item:hover { color: var(--nzs-ink) !important; }
.nzs .sidebar-item:focus-visible { outline: 2px solid var(--nzs-blue); outline-offset: -2px; }

/* ---- active ---- */

.nzs .sidebar-item.active {
    color: var(--nzs-ink) !important;
    /* A gradient away from the marker rather than a flat block, so the row
       reads as lit FROM the indicator instead of as a painted rectangle that
       happens to have a bar next to it. Plus a hairline ring, which is what
       keeps the edge crisp against the panel's own gradient — a flat tint at
       this opacity goes soft at the corners. */
    background: linear-gradient(90deg,
                rgba(76, 130, 255, 0.26) 0%,
                rgba(76, 130, 255, 0.13) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(76, 130, 255, 0.22);
}

.nzs .sidebar-item.active::before {
    content: '';
    position: absolute;
    left: -1px; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--nzs-blue);
    box-shadow: 0 0 12px rgba(76, 130, 255, 0.55);
    transform-origin: center;
    animation: nzs-mark 0.42s var(--nzs-spring) both;
}

/* The marker draws itself in on load. It is the one thing on the page that
   says "you are here", and a page load is the only moment it can say it. */
@keyframes nzs-mark {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

.nzs .sidebar-item.active .nzs-item__icon { color: var(--nzs-blue) !important; }

/* ---- icon ----
   .sidebar-icon-circle is kept as a class because css/sidebar-lock.css hangs
   the padlock badge off it, but it is no longer a circle: a chip behind every
   row's icon was decoration that made ten rows read as ten buttons.

   The icons are inline stroke SVG now (see ICONS in sidebar-pro.js), not Font
   Awesome 4.5.0 glyphs — a 2015 filled set whose weights are inconsistent
   enough that ten in a column read as ten different densities.

   This is the one thing that must not move as the panel opens: it is the fixed
   point the labels grow out from, so it is width-locked and centred in the
   rail's usable space. */
.nzs .sidebar-icon-circle {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform 0.2s var(--nzs-spring), color 0.14s var(--nzs-out);
}

.nzs .sidebar-icon-circle svg { display: block; overflow: visible; }

/* style.css:7345 blanks every <span> in a row (see the label block below), and
   the icon wrapper is a <span>. Beaten on SPECIFICITY — (0,3,1) against its
   (0,1,1) — deliberately not with !important: an !important reset here also
   out-ranks the hover scale on the next line, which is how that quietly never
   worked the first time round. */
.nzs .sidebar-item > .nzs-item__icon { opacity: 1; transform: none; }
.nzs .sidebar-item:hover > .nzs-item__icon { transform: scale(1.09); }

/* ---- label ----

   THE TRAP: css/style.css:7345 sets

       .sidebar-item span { opacity: 0; transform: translateX(-8px); }

   with no !important, and every element in a row here is a <span> — including
   the icon wrapper, which has to keep .sidebar-icon-circle so
   css/sidebar-lock.css can hang its padlock on it. That one rule blanked the
   labels and the icons together and the whole sidebar rendered as empty rows.

   The first fix was a blanket `.nzs .sidebar-item > span { opacity: 1
   !important }`. It worked, and it broke two other things silently: at (0,3,1)
   with !important it also out-ranked this label's own closed state and the
   icon's hover scale, so the labels never faded back on close (they were
   merely clipped) and the icon never lifted.

   So: no !important on either. The selectors below are (0,3,1) and (0,4,1),
   which beat style.css's (0,1,1) on their own and still leave room for the
   state rules to beat THEM. */
.nzs .sidebar-item > .nzs-item__label {
    flex: 1 1 auto;
    min-width: 0;
    /* style.css also sets 15px/600 on this span. Ten rows at 600 is a wall of
       bold with nothing standing out in it — weight is how the active row is
       supposed to separate from the rest, so the rest gives it up. */
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;

    /* Clipped by the panel, not hidden by it. It fades and slides the last few
       pixels so the text settles into space the width has already made, rather
       than appearing on top of a moving edge. !important because of the
       blanket reset above, which this rule is the exception to. */
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--nzs-close-ms) var(--nzs-out),
                transform var(--nzs-close-ms) var(--nzs-out);
}

.nzs .sidebar-item.active > .nzs-item__label { font-weight: 600 !important; }

@media (hover: hover) and (min-width: 769px) {
    .nzs:hover .sidebar-item > .nzs-item__label,
    .nzs:focus-within .sidebar-item > .nzs-item__label,
    .nzs:hover .nzs-group span,
    .nzs:focus-within .nzs-group span {
        opacity: 1;
        transform: none;
        /* Behind the width, and a touch behind the lockup, so the panel reads
           as one movement rather than four things starting at once. */
        transition: opacity 260ms var(--nzs-out) calc(var(--nzs-open-delay) + 120ms),
                    transform 300ms var(--nzs-out) calc(var(--nzs-open-delay) + 120ms);
    }

    .nzs:hover .nzs-group::before,
    .nzs:focus-within .nzs-group::before { opacity: 0; }
}

/* ---- locked rows ----
   sidebar-guard.js adds .locked to .requires-org rows when the account has no
   organization. Dimmed, not hidden: the farmer can see what unlocks once their
   farm is set up, which is the point of showing it at all. */
.nzs .sidebar-item.locked { opacity: 0.42; cursor: not-allowed; }
.nzs .sidebar-item.locked:hover { color: var(--nzs-ink-2) !important; }

/* MUST come after `.sidebar-item { display: flex }` above — both selectors are
   (0,1,0) with !important, so source order is what decides. */
.nzs .admin-only { display: none !important; }
body.is-org-admin .nzs .admin-only { display: flex !important; }


/* =============================================================================
   4 — ENTRANCE
   -----------------------------------------------------------------------------
   The rows arrive rather than appearing. 26ms apart and 8px of travel: enough
   that the eye reads the list top to bottom on the first load of a session,
   little enough that it is over before anyone could call it a wait.

   Driven by --i, which sidebar-pro.js stamps on each row, so adding a nav item
   needs no change here. `both` holds the from-state before the delay elapses —
   without it every row paints at full opacity and then jumps back.

   NOTE: this animates transform, and an element with a FILLING transform
   animation is a containing block for fixed-position descendants. Anything
   that needs to escape a row — a tooltip, a menu — has to live outside this
   subtree. It has already cost one debugging session.
   ========================================================================== */

.nzs-in .nzs .sidebar-item,
.nzs-in .nzs-group {
    animation: nzs-rise 0.30s var(--nzs-out) both;
    animation-delay: calc(var(--i, 0) * 26ms);
}

@keyframes nzs-rise {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}


/* =============================================================================
   5 — FOOT
   ========================================================================== */

.nzs-foot {
    flex: 0 0 auto !important;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--nzs-line);
}

.nzs-item--btn { font: inherit; }


/* =============================================================================
   6 — THE WORKSPACE BESIDE IT
   -----------------------------------------------------------------------------
   The rail width, always. The panel overlays the content when it opens, so
   this never moves. app-shell.css used to take it from 100px to 265px on the
   same hover that widened the sidebar, which meant brushing the left edge of
   the screen reflowed the whole page under the cursor — the single worst thing
   about the old navigation.
   ========================================================================== */

.dashboard-content {
    margin: 0 0 0 var(--nzs-rail) !important;
    width: calc(100% - var(--nzs-rail)) !important;
}

/* Explicitly neutralised: style.css and app-shell.css both had a rule of this
   shape, and either one coming back would restore the reflow. */
dashboard-sidebar:hover ~ .dashboard-content,
.dashboard-sidebar-pro:hover ~ .dashboard-content {
    margin-left: var(--nzs-rail) !important;
    width: calc(100% - var(--nzs-rail)) !important;
}


/* =============================================================================
   6b — SHORT VIEWPORTS
   -----------------------------------------------------------------------------
   A laptop at 1366x768 gives the page about 660px once the browser chrome is
   off, and this navigation is twelve rows and four group labels. At the default
   rhythm that is 583px of content in 526px of nav — Tasks and Notes fall off
   the bottom, which is how the console shipped on the machine it was built on.

   Two steps rather than one, so nothing jumps straight from comfortable to
   cramped. Everything is a variable retune: no rule below is re-declared.

   Below the second step it scrolls, and that is the right answer — a rail that
   keeps shrinking eventually stops being legible, and 360px of viewport is a
   window nobody is doing farm work in.
   ========================================================================== */

@media (min-width: 769px) and (max-height: 860px) {
    :root {
        --nzs-head: 78px;
        --nzs-logo: 58px;
        --nzs-mark: 38px;
        --nzs-row: 40px;
        --nzs-label-top: 11px;
        --nzs-pad: 10px;
    }
    .nzs-cursor { height: var(--nzs-cursor-h, 40px); }
}

@media (min-width: 769px) and (max-height: 740px) {
    :root {
        --nzs-head: 68px;
        --nzs-logo: 50px;
        --nzs-mark: 34px;
        --nzs-row: 36px;
        --nzs-gap: 0px;
        --nzs-label-top: 9px;
        --nzs-label-bot: 4px;
        --nzs-pad: 8px;
    }
    .nzs-cursor { height: var(--nzs-cursor-h, 36px); }
    /* The group rule and the row beneath it start to touch at this density. */
    .nzs .sidebar-section-label.nzs-group { height: 12px; line-height: 12px; }
}


/* =============================================================================
   7 — PHONE
   -----------------------------------------------------------------------------
   No rail and no hover — there is no cursor to hover with. A permanent strip of
   chrome down a 390px screen is width spent on navigation the farmer is not
   currently using, so the sidebar becomes an overlay drawer and the workspace
   gets the whole viewport.
   ========================================================================== */

.nzs-burger {
    display: none;
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 10px;
    z-index: 1002;

    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;

    color: var(--nzs-ink);
    background: #00243C;
    border: 1px solid var(--nzs-line);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 12, 24, 0.3);
    cursor: pointer;
}

.nzs-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 24, 48, 0.58);
}

@media (max-width: 768px) {
    .nzs-burger { display: flex; }
    .nzs-scrim { display: block; }

    .dashboard-sidebar-pro.nzs {
        width: var(--nzs-open) !important;
        transform: translateX(-100%);
        box-shadow: none !important;
        transition: transform var(--nzs-close-ms) var(--nzs-ease) !important;
    }

    html.nz-nav-open .dashboard-sidebar-pro.nzs {
        transform: none;
        box-shadow: 16px 0 40px rgba(0, 12, 24, 0.44) !important;
    }

    /* In the drawer everything is open: there is no rail state to be in. */
    .nzs .sidebar-item > .nzs-item__label,
    .nzs-group span { opacity: 1; transform: none; }
    .nzs-group::before { opacity: 0; }
    .nzs-brand__mark { opacity: 0; }
    .nzs-brand__full { opacity: 1; }

    /* The drawer floats over the page, so the workspace never offsets. */
    .dashboard-content { margin-left: 0 !important; width: 100% !important; }

    /* Clear of the burger, which now sits over the top-left of every page. */
    .main-workspace { padding-top: 64px !important; }
}


/* =============================================================================
   8 — REDUCED MOTION
   -----------------------------------------------------------------------------
   Everything that moves, off — including the entrance, which is the one a
   vestibular trigger would actually notice. The states are unchanged: the
   panel still opens on hover and the indicator still marks the hovered row,
   they just arrive instead of travelling.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .dashboard-sidebar-pro.nzs,
    .nzs-brand__full,
    .nzs-brand__mark,
    .nzs .sidebar-item > .nzs-item__label,
    .nzs-group span,
    .nzs-group::before,
    .nzs-cursor,
    .nzs-veil,
    .nzs .sidebar-item,
    .nzs .sidebar-icon-circle { transition: none !important; }

    .nzs-in .nzs .sidebar-item,
    .nzs-in .nzs-group,
    .nzs .sidebar-item.active::before { animation: none !important; }

    @media (hover: hover) and (min-width: 769px) {
        .dashboard-sidebar-pro.nzs:hover,
        .dashboard-sidebar-pro.nzs:focus-within,
        .nzs:hover .sidebar-item > .nzs-item__label,
        .nzs:focus-within .sidebar-item > .nzs-item__label,
        .nzs:hover .nzs-group span,
        .nzs:focus-within .nzs-group span,
        .nzs:hover .nzs-brand__full,
        .nzs:focus-within .nzs-brand__full,
        .nzs:hover .nzs-brand__mark,
        .nzs:focus-within .nzs-brand__mark { transition: none !important; }
    }
}