/* =============================================================================
   `hidden` must beat any author `display`.
   =============================================================================
   The browser's [hidden]{display:none} comes from the UA stylesheet, so ANY
   class rule setting `display` wins over it. `.nofarm__buddy{display:flex}`
   therefore rendered a hidden block — showing an empty "—" buddy card next to
   the "no buddy assigned" fallback at the same time.

   This is the fourth time this exact bug has appeared in this project. Stated
   once, globally, with !important.
   ========================================================================== */
[hidden] { display: none !important; }

/* ==========================================================================
   NetZero Aqua — Application shell
   Sidebar + workspace chrome, shared by every signed-in page.

   Loaded AFTER css/style.css and the per-page stylesheets, so it overrides
   the older decorative treatment: layered gradients, three radial "ambient"
   glows, and circular icon chips on every nav row. The result is flat,
   quiet and legible — the data should be the loudest thing on screen.

   Behaviour is unchanged: the rail is 100px and expands to 265px on hover.
   ========================================================================== */

:root {
    --shell-navy: #00243C;
    --shell-navy-deep: #001830;
    --shell-rail-border: rgba(255, 255, 255, 0.07);
    --shell-ink: #ffffff;
    --shell-ink-mute: rgba(255, 255, 255, 0.62);
    --shell-ink-faint: rgba(255, 255, 255, 0.4);
    --shell-lime: #3BD304;
    --shell-active: rgba(255, 255, 255, 0.1);

    --shell-page: #f4f7fc;
    --shell-surface: #ffffff;
    --shell-surface-alt: #f8fafd;
    --shell-border: #e5eaf2;
    --shell-text: #0f172a;
    --shell-text-2: #64748b;
    --shell-text-3: #94a3b8;
    --shell-accent: #004AF7;
    --shell-accent-soft: #EDF2FE;

    --shell-ok: #16a34a;
    --shell-warn: #f59e0b;
    --shell-danger: #ef4444;

    --shell-radius: 14px;
    --shell-radius-sm: 10px;
}

/* ==========================================================================
   1. SIDEBAR
   ========================================================================== */

.dashboard-sidebar-pro {
    /* A single soft vertical shift gives the rail depth without the three
       stacked radial "glow" layers the old design used. */
    background: linear-gradient(180deg, #003354 0%, #00243C 55%, #001830 100%) !important;
    border-right: 1px solid var(--shell-rail-border) !important;
    box-shadow: none !important;
    transition: width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) !important;

    /* Full viewport height. dvh keeps it flush to the bottom on mobile
       browsers whose toolbars change the visible height. */
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden !important;
}

.dashboard-sidebar-pro:hover {
    box-shadow: 18px 0 44px rgba(8, 22, 40, 0.22) !important;
}

/* ---------- Rendering artefacts ----------
   css/style.css puts `will-change: transform, opacity` on every nav row, the
   icon wrappers and the brand block. That permanently promotes each one to its
   own GPU layer; the browser then re-rasterises them mid-transition, which is
   what produced the "squeeze / blur" smear as the rail opened and closed.
   Releasing will-change lets text render on the normal path and stay crisp.

   The stacked backdrop-filter blurs inside the rail cost the same again —
   every frame of the width animation had to re-sample what was behind them. */

.dashboard-sidebar-pro,
.dashboard-sidebar-pro *,
.sidebar-item,
.sidebar-icon-circle,
.brand-icon-pro,
.sidebar-brand-pro {
    will-change: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Keeps glyph rasterisation stable on the one element that does scale. */
.brand-icon-pro img {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Kill the decorative glows — three stacked radial gradients read as
   consumer/gaming chrome and fight the data on screen. */
.dashboard-sidebar-pro::before,
.dashboard-sidebar-pro::after,
.dashboard-sidebar-pro .ambient-light {
    display: none !important;
    content: none !important;
}

/* ---------- Brand ----------
   IMPORTANT: css/style.css sets `flex-direction: column` here. Without
   overriding it the logo stacks above the wordmark, and inside a fixed-height
   header with overflow:hidden the mark gets clipped — which is exactly why the
   logo was invisible.
   ------------------------------------------------------------------------ */

.sidebar-brand-pro {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    height: 92px !important;
    min-height: 92px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--shell-rail-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: hidden;
}

.sidebar-brand-pro::before,
.sidebar-brand-pro::after { display: none !important; content: none !important; }

/* Logo.
   logo3-white.png is a 326x145 wordmark (green arc + "NET ZERO"), not a square
   icon — shrinking it into a 40px box made it unreadable, which is why it
   looked "not visible". So the rail crops to the distinctive arc, and the full
   wordmark is revealed once the panel opens. */

.brand-icon-pro {
    position: relative;
    flex-shrink: 0;
    width: 62px !important;
    height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: linear-gradient(145deg, rgba(59, 211, 4, 0.20), rgba(59, 211, 4, 0.04)) !important;
    border: 1px solid rgba(59, 211, 4, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(59, 211, 4, 0.12) !important;
    transform: none !important;
    overflow: hidden !important;
    transition: width 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                margin 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Collapsed: crop to the arc on the left of the wordmark. */
.brand-icon-pro img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    object-position: left center !important;
    /* Zoom slightly so the badge frames the ring mark and clips the trailing
       dash element that sits to its right in the wordmark. 1.14 was tuned for
       the old 42px badge; at 62px it cropped the right of the ring, so the
       mark is framed a touch wider. */
    transform: scale(1.05) !important;
    transform-origin: left center;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                object-position 0.32s ease;
}

/* Expanded: the badge grows into a plate and shows the whole wordmark. */
.dashboard-sidebar-pro:hover .brand-icon-pro {
    width: 196px !important;
    margin: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.dashboard-sidebar-pro:hover .brand-icon-pro img {
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
}

/* If the logo file is missing, draw a lettermark instead of an empty box. */
.brand-icon-pro--fallback::after {
    content: 'N0';
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--shell-lime);
}

/* Legacy brand text. The wordmark is inside the image and the role chip has
   moved to the top bar, so nothing here should render. Kept as a guard in case
   a cached page still ships the old markup. */
.brand-text-pro,
.sidebar-brand-pro p,
.brand-name,
.sidebar-role-badge { display: none !important; }

/* ---------- Role chip ----------
   Moved out of the sidebar. It used to live in the brand block, where it was
   invisible until you hovered the rail and squeezed the logo when you did.
   In the top bar it sits beside the avatar and is always readable. */

.nz-role-strip {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 14px;
}

.nz-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    /* Pushes itself to the end of whichever flex header adopts it. */
    margin-left: auto;
    padding: 6px 13px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    color: var(--shell-accent);
    background: var(--shell-accent-soft);
    border: 1px solid rgba(0, 74, 247, 0.16);
    border-radius: 999px;
}

.nz-role-chip i { font-size: 12px; opacity: 0.85; }

.nz-role-chip--admin {
    color: #164F00;
    background: rgba(59, 211, 4, 0.16);
    border-color: rgba(59, 211, 4, 0.42);
}

/* A `.top-bar` also holds the avatar, so leave a gap before it. */
.top-bar .nz-role-chip { margin-right: 14px; }

@media (max-width: 640px) {
    /* Keep the icon, drop the word — the bar is tight on phones. */
    .nz-role-chip { gap: 0; padding: 6px 9px; }
    .nz-role-chip span { display: none; }
    .nz-role-chip i { font-size: 13px; }
}

/* ---------- Scroll area ---------- */

/* `min-height: 0` is doing real work here.
   In a column flex container a child defaults to `min-height: auto`, so it
   refuses to shrink below its content. The nav list therefore grew past the
   viewport and pushed the bottom block (Settings) off the bottom of the
   screen instead of scrolling. */
.sidebar-scroll-area-pro {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 12px 18px !important;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    overscroll-behavior: contain;
}

/* Brand and footer hold their size; only the list scrolls. */
.sidebar-brand-pro,
.sidebar-bottom { flex: 0 0 auto !important; }

/* Scrollbar stays invisible until the rail is actually being used — the
   permanently visible track was adding noise to a narrow column. */
.dashboard-sidebar-pro:hover .sidebar-scroll-area-pro {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.sidebar-scroll-area-pro::-webkit-scrollbar { width: 4px; }
.sidebar-scroll-area-pro::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll-area-pro::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }

.dashboard-sidebar-pro:hover .sidebar-scroll-area-pro::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

/* ---------- Section labels ----------
   Grouping is the standard pattern for multi-module tools: a flat list of
   10+ rows is hard to scan. Collapsed, the label shrinks to a short rule so
   the grouping still reads without text. */

.dashboard-sidebar-pro .sidebar-section-label {
    position: relative;
    margin: 18px 0 6px;
    padding: 0 12px;
    height: 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
    white-space: nowrap;
    overflow: hidden;
    line-height: 14px;
}

.dashboard-sidebar-pro .sidebar-section-label:first-child { margin-top: 4px; }

/* Collapsed: hide the words, show a divider rule instead. */
.dashboard-sidebar-pro .sidebar-section-label {
    color: transparent;
    transition: color 0.22s ease;
}

.dashboard-sidebar-pro .sidebar-section-label::before {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    transition: opacity 0.22s ease;
}

.dashboard-sidebar-pro:hover .sidebar-section-label { color: rgba(255, 255, 255, 0.34); }
.dashboard-sidebar-pro:hover .sidebar-section-label::before { opacity: 0; }

/* ---------- Nav items ---------- */

.sidebar-item {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    width: 100% !important;
    margin: 3px 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--shell-ink-mute) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden;
    isolation: isolate;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* The old rules used ::before/::after for glow bars and a lock pip. */
.sidebar-item::before,
.sidebar-item::after {
    display: none !important;
    content: none !important;
}

.sidebar-item:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--shell-ink) !important;
    transform: none !important;
    box-shadow: none !important;
}

.sidebar-item:hover .sidebar-icon-circle i { color: #D7E2FF !important; }

/* Active row: lime-tinted glass pill. The indicator scales out from the
   centre on activation, following the Material 3 navigation-rail pattern. */
.sidebar-item.active {
    background: linear-gradient(95deg, rgba(59, 211, 4, 0.26) 0%, rgba(59, 211, 4, 0.10) 45%, rgba(59, 211, 4, 0.03) 100%) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(59, 211, 4, 0.30),
                0 2px 10px rgba(59, 211, 4, 0.10) !important;
    animation: nzActiveIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes nzActiveIn {
    from { box-shadow: inset 0 0 0 1px rgba(59, 211, 4, 0); transform: scaleX(0.94); }
    to   { transform: none; }
}

.sidebar-item.active::before {
    display: block !important;
    content: '' !important;
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 60%;
    border-radius: 0 4px 4px 0;
    background: var(--shell-lime);
    box-shadow: 0 0 10px rgba(59, 211, 4, 0.7);
    transform: translateY(-50%) scaleY(1);
    transform-origin: center;
    animation: nzMarkerIn 0.34s cubic-bezier(0.34, 1.4, 0.5, 1);
}

@keyframes nzMarkerIn {
    from { transform: translateY(-50%) scaleY(0); }
    to   { transform: translateY(-50%) scaleY(1); }
}

.sidebar-item:focus-visible {
    outline: 2px solid var(--shell-lime) !important;
    outline-offset: -2px;
}

/* Icons: flat glyphs, no circular chips. Centred in the rail, left-aligned
   once the panel opens. */
.dashboard-sidebar-pro .sidebar-icon-circle {
    position: relative;
    flex-shrink: 0;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: margin 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sidebar-icon-circle::before,
.sidebar-icon-circle::after { display: none !important; content: none !important; }

.dashboard-sidebar-pro:hover .sidebar-icon-circle { margin: 0 !important; }

.sidebar-item .sidebar-icon-circle i,
.sidebar-item i {
    font-size: 16px !important;
    color: inherit !important;
    transform: none !important;
    text-shadow: none !important;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.sidebar-item.active .sidebar-icon-circle { background: transparent !important; }

.sidebar-item.active .sidebar-icon-circle i {
    color: var(--shell-lime) !important;
    text-shadow: 0 0 14px rgba(59, 211, 4, 0.55);
}

.dashboard-sidebar-pro .sidebar-item span {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    color: inherit !important;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dashboard-sidebar-pro:hover .sidebar-item span {
    opacity: 1;
    transform: none;
}

/* ---------- Admin-only gating ----------
   MUST come after the `.sidebar-item { display: flex }` rule above.
   Both selectors are (0,1,0) with !important, so source order decides — and
   without this, forcing display on .sidebar-item revealed every admin row
   (including "Exit Admin") to farmers. */
.admin-only { display: none !important; }

body.role-admin .sidebar-item.admin-only,
body.role-admin .qa-tile.admin-only,
body.role-admin .btn-create-farm.admin-only { display: flex !important; }

body.role-admin .sidebar-section-label.admin-only { display: block !important; }

body:not(.role-admin) .farms-empty-admin-note { display: block; }
.farms-empty-admin-note { display: none; }

/* Mirror of .admin-only: content shown to everyone EXCEPT platform admins.
   Used where farmers and admins need different copy in the same empty state. */
.farmer-only { display: block; }
body.role-admin .farmer-only { display: none !important; }

/* .admin-only defaults to display:none and is revealed as flex for nav rows
   and buttons; block-level copy needs its own reveal. */
body.role-admin p.admin-only,
body.role-admin div.admin-only { display: block !important; }

body.role-admin a.btn-create-farm.admin-only { display: inline-flex !important; }

/* ---------- Locked (no organization yet) ----------
   Dimmed, not hidden: the farmer can see what unlocks once their
   organization is set up, which is better than an empty rail. */

.sidebar-item.locked {
    opacity: 0.34 !important;
    cursor: not-allowed;
    color: var(--shell-ink-faint) !important;
}

.sidebar-item.locked:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--shell-ink-faint) !important;
}

.sidebar-item.locked:hover .sidebar-icon-circle i { color: var(--shell-ink-faint) !important; }

/* Padlock badge sits on the icon in both collapsed and expanded states. */
.sidebar-item.locked .sidebar-icon-circle::after {
    display: flex !important;
    content: '\f023' !important;
    font-family: FontAwesome;
    position: absolute;
    top: -2px;
    right: -3px;
    width: 12px;
    height: 12px;
    font-size: 7px;
    align-items: center;
    justify-content: center;
    color: #00243C;
    background: rgba(255, 255, 255, 0.75);
    border: 0;
    border-radius: 50%;
}

/* ---------- Bottom ---------- */

.sidebar-bottom {
    width: 100%;
    padding: 10px 12px 14px !important;
    margin-top: auto;
    background: rgba(0, 0, 0, 0.14) !important;
    border-top: 1px solid var(--shell-rail-border) !important;
}

.sidebar-bottom .sidebar-item { margin: 2px 0 !important; }

/* ==========================================================================
   1a. RESOLVING GATE
   dashboard.html and org-home.html each ship BOTH states in their markup
   (has-organization / no-organization) and let JS hide one. That meant the
   full layout painted first and was then torn down — content appeared, then
   vanished, then "create an organization" showed up.

   `nz-resolving` is set on <html> before first paint and cleared once the
   user's organization state is known, so only the correct state is ever seen.
   ========================================================================== */

/* Hide the state-dependent blocks until the answer is known. The branded
   <netzero-loader> covers the workspace in the meantime — see
   js/netzero-loading.js, which now waits for this flag instead of
   dismissing on window.load. */

html.nz-resolving #welcomeView,
html.nz-resolving #orgDashboardView,
html.nz-resolving .welcome-section,
html.nz-resolving .org-overview,
html.nz-resolving .features-grid,
html.nz-resolving .top-bar {
    display: none !important;
}

/* The overlay was offset by a hardcoded 80px; the rail is 100px, which left a
   20px strip of bare page down the left edge. */
#loading-overlay {
    left: 100px !important;
    width: calc(100vw - 100px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--shell-page) !important;
}

/* Pages with no sidebar (create-org, search-org) get the full width. */
body:not(:has(dashboard-sidebar)) #loading-overlay {
    left: 0 !important;
    width: 100vw !important;
}

.spinning-ring { border-color: var(--shell-lime) !important; border-right-color: transparent !important; }
.net-zero-text { color: var(--shell-lime) !important; }
.aqua-text     { color: var(--shell-navy) !important; }

@media (max-width: 900px) {
    #loading-overlay { left: 0 !important; width: 100vw !important; }
}

@media (prefers-reduced-motion: reduce) {
    .spinning-ring { animation-duration: 2.4s !important; }
}

/* ==========================================================================
   1b. ORG-LOCK TOAST
   Replaces the blocking alert() the guard used to fire on locked nav items.
   ========================================================================== */

.nz-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 90vw;
    padding: 13px 18px;
    border-radius: 12px;
    background: #00243C;
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: 0 16px 40px rgba(8, 22, 40, 0.34);
    transform: translate(-50%, 14px);
    opacity: 0;
    transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

.nz-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

.nz-toast i { color: var(--shell-lime); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    .nz-toast { transition: none; }
    .sidebar-item.active,
    .sidebar-item.active::before { animation: none !important; }
}

/* ==========================================================================
   2. WORKSPACE
   ========================================================================== */

body {
    background: var(--shell-page) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--shell-text);
    -webkit-font-smoothing: antialiased;
}

.dashboard-content {
    margin: 0 0 0 100px !important;
    width: calc(100% - 100px) !important;
    transition: margin-left 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
                width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

dashboard-sidebar:hover ~ .dashboard-content,
.dashboard-sidebar-pro:hover ~ .dashboard-content {
    margin-left: 265px !important;
    width: calc(100% - 265px) !important;
}

.main-workspace {
    padding: 28px 32px 44px !important;
    max-width: 1560px;
}

@media (max-width: 900px) {
    .main-workspace { padding: 20px 18px 36px !important; }
}

/* Breadcrumb */

.breadcrumb-nav {
    font-size: 12.5px;
    color: var(--shell-text-3);
    margin-bottom: 14px;
}

.breadcrumb-nav a {
    color: var(--shell-text-2);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-nav a:hover { color: var(--shell-accent); text-decoration: underline; }

/* ==========================================================================
   3. SHARED CARD LANGUAGE
   Borders instead of large soft shadows — crisper, and consistent whatever
   sits behind the card.
   ========================================================================== */

.dash-card,
.biz-card,
.settings-card,
.kpi-card,
.org-card,
.members-card,
.feature-item,
.welcome-card {
    background: var(--shell-surface) !important;
    border: 1px solid var(--shell-border) !important;
    border-radius: var(--shell-radius) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.dash-card:hover,
.biz-card:hover,
.feature-item:hover,
.welcome-card:hover {
    transform: none !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07) !important;
}

/* Reveal animation from sidebar-pro.js — keep it, just make it subtler. */
[data-reveal] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

[data-reveal].reveal-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .dashboard-sidebar-pro,
    .dashboard-content,
    .sidebar-item span,
    .brand-text-pro { transition: none !important; }
}

/* ==========================================================================
   4. DASHBOARD
   ========================================================================== */

/* ---------- Page header ---------- */

.dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--shell-border);
}

.dash-header h1,
#dashGreeting {
    margin: 0 0 4px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    color: var(--shell-text) !important;
}

.dash-header p,
#dashDate {
    margin: 0 !important;
    font-size: 13.5px !important;
    color: var(--shell-text-2) !important;
}

.dash-weather-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--shell-surface);
    border: 1px solid var(--shell-border);
    border-radius: var(--shell-radius-sm);
    font-size: 15px;
    font-weight: 700;
    color: var(--shell-text);
    box-shadow: none;
}

.dash-weather-chip i { color: var(--shell-warn); font-size: 16px; }

.dash-weather-chip .chip-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--shell-text-3);
    padding-left: 10px;
    border-left: 1px solid var(--shell-border);
}

/* ---------- KPI row ---------- */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 18px !important;
}

.kpi-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 16px;
    background: var(--shell-accent-soft);
    color: var(--shell-accent);
    box-shadow: none !important;
}

.kpi-icon--green { background: #eaf6e2; color: #4d7c0f; }
.kpi-icon--blue  { background: var(--shell-accent-soft); color: var(--shell-accent); }
.kpi-icon--teal  { background: #e0f5f0; color: #0f6e56; }
.kpi-icon--amber { background: #fdf3e0; color: #b45309; }

.kpi-value {
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--shell-text) !important;
    font-variant-numeric: tabular-nums;
}

.kpi-label {
    margin-top: 2px;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--shell-text-2) !important;
}

.kpi-sub { margin-top: 2px; font-size: 11.5px; color: var(--shell-text-3); }

/* ---------- Card grids ---------- */

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 1100px) {
    .dash-grid { grid-template-columns: 1fr; }
}

.dash-card { padding: 0 !important; overflow: hidden; }

.dash-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    margin: 0;
    border-bottom: 1px solid var(--shell-border);
    background: var(--shell-surface-alt);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--shell-text);
}

.dash-card-title .title-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dash-card-title .title-left i {
    font-size: 13px;
    color: var(--shell-text-3);
}

.dash-card-title a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--shell-accent);
    text-decoration: none;
}

.dash-card-title a:hover { text-decoration: underline; }

/* Direct children of a card body need their own padding now the header is
   flush to the card edge. */
.wq-grid,
.alert-list,
.cycle-list,
.qa-grid,
.dash-chart-wrap { padding: 16px 18px; }

/* ---------- Water quality tiles ---------- */

.wq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
}

.wq-item,
.wq-tile {
    padding: 13px 14px;
    background: var(--shell-surface-alt);
    border: 1px solid var(--shell-border);
    border-radius: var(--shell-radius-sm);
}

.wq-value { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wq-label { font-size: 11.5px; color: var(--shell-text-2); margin-top: 2px; }

/* ---------- Alerts & cycles ---------- */

.alert-list,
.cycle-list { display: flex; flex-direction: column; gap: 10px; }

.alert-item,
.cycle-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px;
    background: var(--shell-surface-alt);
    border: 1px solid var(--shell-border);
    border-left-width: 3px;
    border-radius: var(--shell-radius-sm);
    font-size: 13px;
    line-height: 1.5;
}

.alert-item--warn   { border-left-color: var(--shell-warn); }
.alert-item--danger { border-left-color: var(--shell-danger); }
.alert-item--ok     { border-left-color: var(--shell-ok); }

.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 30px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--shell-text-3);
}

.dash-empty i { font-size: 20px; opacity: 0.55; }

.dash-chart-wrap { position: relative; min-height: 240px; }

/* ---------- Quick actions ---------- */

.qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 10px;
}

.qa-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    background: var(--shell-surface-alt);
    border: 1px solid var(--shell-border);
    border-radius: var(--shell-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--shell-text);
    text-decoration: none;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.qa-tile i { font-size: 15px; color: var(--shell-text-3); transition: color 0.16s ease; }

.qa-tile:hover {
    background: var(--shell-accent-soft);
    border-color: #cddffa;
    color: var(--shell-accent);
    text-decoration: none;
}

.qa-tile:hover i { color: var(--shell-accent); }

/* ---------- Welcome (no organization yet) ---------- */

.welcome-header { text-align: center; margin: 24px 0 34px !important; }

.welcome-header h1 {
    font-size: 27px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em;
    color: var(--shell-text) !important;
    margin-bottom: 8px !important;
}

.welcome-header p {
    font-size: 14.5px !important;
    color: var(--shell-text-2) !important;
    max-width: 520px !important;
}

.logo-top {
    width: 54px !important;
    height: 54px !important;
    background: var(--shell-navy) !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    margin-bottom: 18px !important;
}

.logo-top img { width: 30px !important; height: auto !important; }

/* Grid, not flex-wrap: equal-width columns AND equal-height rows, which is
   what makes the two cards' buttons line up. */
.cards-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: stretch;
    gap: 20px !important;
    max-width: 940px !important;
    margin: 0 auto;
}

.welcome-card {
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

.welcome-card .card-image { height: 130px !important; flex-shrink: 0; }

/* The body stretches; the button is pushed to the bottom by the auto margin
   on the bullet list, so both cards' CTAs sit on the same line regardless of
   how much description text each one carries. */
.card-content {
    display: flex !important;
    flex-direction: column;
    flex: 1;
}

.feature-bullets { margin-bottom: auto !important; }

.card-icon-overlay {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    font-size: 19px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(4px);
}

.card-content { padding: 22px !important; }

.card-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--shell-text) !important;
    margin-bottom: 7px !important;
}

.card-desc {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--shell-text-2) !important;
}

.feature-bullets { margin: 15px 0 20px !important; padding: 0 !important; list-style: none !important; }

.feature-bullets li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--shell-text-2);
}

.feature-bullets li::before {
    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 10px;
    color: var(--shell-ok);
}

.btn-action {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 20px !important;
    border-radius: var(--shell-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: opacity 0.16s ease;
}

.btn-action:hover { opacity: 0.9; transform: none !important; }

.btn-join   { background: var(--shell-accent) !important; color: #fff !important; }
.btn-create { background: var(--shell-navy) !important; color: #fff !important; }

/* ==========================================================================
   5. ORG HOME
   Same card language as the dashboard so moving between the two feels like
   one product rather than two.
   ========================================================================== */

.top-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 18px !important;
    margin-bottom: 22px !important;
    border-bottom: 1px solid var(--shell-border) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--shell-text) !important;
}

.profile-avatar {
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--shell-accent) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    cursor: pointer;
    box-shadow: none !important;
    border: 0 !important;
    transition: opacity 0.16s ease;
}

.profile-avatar:hover { opacity: 0.88; }

.profile-dropdown {
    min-width: 176px;
    padding: 6px !important;
    background: var(--shell-surface) !important;
    border: 1px solid var(--shell-border) !important;
    border-radius: var(--shell-radius-sm) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
}

.dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 11px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--shell-text) !important;
    text-decoration: none !important;
}

.dropdown-item i { font-size: 13px; color: var(--shell-text-3); }
.dropdown-item:hover { background: var(--shell-surface-alt) !important; }

/* ---------- Welcome strip ---------- */

.welcome-section {
    margin-bottom: 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.welcome-section h1 {
    margin: 0 0 5px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--shell-text) !important;
}

.welcome-section p {
    margin: 0 !important;
    max-width: 640px;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--shell-text-2) !important;
}

/* ---------- Org identity + members ---------- */

.org-overview {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;          /* both cards share the row height */
    gap: 16px !important;
    margin-bottom: 16px !important;
}

@media (max-width: 1100px) {
    .org-overview { grid-template-columns: 1fr; }
}

/* Everything left-aligned. org-home.css centred the name and type while the
   surrounding copy stayed left, which is what made the card look off. */
.org-card {
    position: relative;
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    padding: 22px !important;
    text-align: left !important;
}

.org-card__head {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    min-width: 0;
}

.org-icon-large {
    flex-shrink: 0;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 21px !important;
    color: var(--shell-accent) !important;
    background: var(--shell-accent-soft) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.org-details { flex: 1; min-width: 0; text-align: left !important; }

.org-details h2 {
    margin: 0 0 3px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--shell-text) !important;
    text-align: left !important;
    text-transform: none !important;
}

.org-details .sub-text {
    display: block;
    font-size: 13px !important;
    line-height: 1.5;
    color: var(--shell-text-2) !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px !important;
    justify-content: flex-start !important;
}

.tag {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--shell-text-2) !important;
    background: var(--shell-surface-alt) !important;
    border: 1px solid var(--shell-border) !important;
    border-radius: 999px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.tag i { font-size: 11px; color: var(--shell-text-3); }

/* Join code.
   org-home.css had `position: absolute; right: 30px; top: 35px` on this,
   which pulled it out of the card entirely and left it floating between the
   two columns. It's a normal block now, pinned to the bottom of the card. */
.org-code {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto !important;
    padding: 12px 14px !important;
    text-align: left !important;
    background: var(--shell-surface-alt) !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: var(--shell-radius-sm) !important;
    right: auto !important;
    top: auto !important;
}

.org-code-label {
    display: block;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase;
    color: var(--shell-text-3) !important;
    margin-bottom: 2px;
}

.org-code-value {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: var(--shell-text) !important;
}

.org-code__link {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--shell-accent);
    text-decoration: none;
}

.org-code__link:hover { text-decoration: underline; }

.org-code-value.is-placeholder {
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--shell-text-3) !important;
}

/* ---------- No-organization empty state ---------- */

.org-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 44px 28px;
    background: var(--shell-surface);
    border: 1px solid var(--shell-border);
    border-radius: var(--shell-radius);
}

.org-empty__icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 23px;
    color: var(--shell-accent);
    background: var(--shell-accent-soft);
    border-radius: 16px;
}

.org-empty h2 {
    margin: 0 0 9px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--shell-text) !important;
}

.org-empty p {
    margin: 0 0 22px !important;
    max-width: 470px;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: var(--shell-text-2) !important;
}

.org-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.org-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--shell-border);
    border-radius: var(--shell-radius-sm);
    background: var(--shell-surface);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--shell-text-2);
    text-decoration: none;
    transition: border-color 0.16s ease, color 0.16s ease;
}

.org-empty__btn:hover { border-color: #cbd5e1; color: var(--shell-text); text-decoration: none; }

.org-empty__btn--primary {
    background: var(--shell-accent);
    border-color: var(--shell-accent);
    color: #fff;
}

.org-empty__btn--primary:hover { opacity: 0.92; color: #fff; border-color: var(--shell-accent); }

.org-empty__btn i { font-size: 11px; }

body.no-org .features-grid { display: none !important; }

/* ---------- Members ---------- */

.members-card {
    display: flex !important;
    flex-direction: column;
    padding: 22px !important;
}

.members-card .feature-header { margin-bottom: 4px !important; }

.member-count {
    flex-shrink: 0;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--shell-accent);
    background: var(--shell-accent-soft);
    border-radius: 999px;
}

.members-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    max-height: 260px;
    font-size: 13px;
    color: var(--shell-text-2);
}

.member-list-ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }

.member-list-item {
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 11px 0 !important;
    border-bottom: 1px solid var(--shell-border) !important;
    background: transparent !important;
}

.member-list-item:last-child { border-bottom: 0 !important; }

.member-avatar {
    flex-shrink: 0;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--shell-accent) !important;
    background: var(--shell-accent-soft) !important;
    border-radius: 50% !important;
}

.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 13.5px !important; font-weight: 600 !important; color: var(--shell-text) !important; }
.member-email { font-size: 12px !important; color: var(--shell-text-2) !important; word-break: break-all; }

.member-tag,
.member-you {
    flex-shrink: 0;
    padding: 2px 8px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px !important;
    background: var(--shell-accent-soft) !important;
    color: var(--shell-accent) !important;
}

.member-you { background: #eaf6e2 !important; color: #4d7c0f !important; }

.members-error {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 13px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--shell-radius-sm);
    font-size: 12.5px;
    line-height: 1.5;
    color: #991b1b;
}

.members-loading {
    margin: 0;
    padding: 18px 0;
    font-size: 13px;
    color: var(--shell-text-3);
}

.member-remove {
    flex-shrink: 0;
    padding: 5px 11px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--shell-danger);
    cursor: pointer;
    transition: background 0.16s ease;
}

.member-remove:hover { background: #fef2f2; }

/* ---------- Feature tiles ---------- */

.features-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px !important;
}

.feature-item { padding: 18px !important; }

.feature-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px !important;
}

.feature-title-wrap { display: flex !important; align-items: center; gap: 11px; min-width: 0; }

.feature-icon {
    flex-shrink: 0;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px !important;
    color: var(--shell-accent) !important;
    background: var(--shell-accent-soft) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.feature-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    color: var(--shell-text) !important;
}

.explore-link {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--shell-accent) !important;
    text-decoration: none !important;
}

.explore-link:hover { text-decoration: underline !important; }

.feature-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--shell-text-2) !important;
}

/* Equal-height tiles across each grid row. */
.features-grid { align-items: stretch; }

.feature-item {
    display: flex !important;
    flex-direction: column;
}

.feature-item .feature-desc { flex: 1; }

/* Tiles whose destination doesn't exist yet — the links were href="#",
   which looked live but went nowhere. */
.feature-item.is-soon { opacity: 0.65; }

.feature-soon {
    flex-shrink: 0;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--shell-text-3);
    background: var(--shell-surface-alt);
    border: 1px solid var(--shell-border);
    border-radius: 999px;
}

/* Welcome strip alignment: the heading was centred while the paragraph
   beneath it was left-aligned. */
.welcome-section,
.welcome-section h1,
.welcome-section p { text-align: left !important; }

/* ==========================================================================
   6. LOGOUT MODAL — shared by the dashboard pages
   ========================================================================== */

.custom-modal .modal-content {
    padding: 26px !important;
    border-radius: var(--shell-radius) !important;
    border: 1px solid var(--shell-border) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
}

.custom-modal h3 {
    margin: 0 0 7px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--shell-text) !important;
}

.custom-modal p { font-size: 13.5px !important; color: var(--shell-text-2) !important; }

.mini-modal-actions { display: flex; gap: 10px; margin-top: 20px; }

.mini-modal-actions button {
    flex: 1;
    padding: 11px 18px !important;
    border-radius: var(--shell-radius-sm) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border: 0 !important;
    cursor: pointer;
}

.mini-modal-actions .cancel-btn {
    background: var(--shell-surface-alt) !important;
    color: var(--shell-text-2) !important;
    border: 1px solid var(--shell-border) !important;
}

.mini-modal-actions .confirm-btn {
    background: var(--shell-danger) !important;
    color: #fff !important;
}

/* ==========================================================================
   6b. REGISTER ORGANIZATION (create-org.html)
   Replaces a 265-line inline <style> block that duplicated the sidebar and
   defined its own form styling.
   ========================================================================== */

.co-wrap { max-width: 720px; margin: 0 auto; }

/* ---------- Header ---------- */

.co-header { text-align: center; margin: 8px 0 26px; }

.co-badge {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    color: #fff;
    background: var(--shell-navy);
    border-radius: 16px;
}

.co-header h1 {
    margin: 0 0 8px !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em;
    color: var(--shell-text) !important;
}

.co-header p {
    margin: 0 auto !important;
    max-width: 520px;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--shell-text-2) !important;
}

/* ---------- What happens next ---------- */

.co-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0 0 24px;
    padding: 14px 16px;
    background: var(--shell-surface);
    border: 1px solid var(--shell-border);
    border-radius: var(--shell-radius);
}

.co-steps li {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--shell-text-3);
}

.co-steps li + li::before {
    content: '';
    flex: 0 0 16px;
    height: 1px;
    background: var(--shell-border);
    margin-right: 2px;
}

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

.co-steps li.is-current { color: var(--shell-text); font-weight: 600; }

.co-steps li.is-current .co-steps__num {
    color: #fff;
    background: var(--shell-accent);
    border-color: var(--shell-accent);
}

@media (max-width: 700px) {
    .co-steps { flex-direction: column; align-items: flex-start; gap: 10px; }
    .co-steps li + li::before { display: none; }
}

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

.co-card {
    padding: 22px;
    margin-bottom: 16px;
    background: var(--shell-surface);
    border: 1px solid var(--shell-border);
    border-radius: var(--shell-radius);
}

.co-card__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px !important;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--shell-border);
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--shell-text) !important;
}

.co-card__title i { font-size: 13px; color: var(--shell-text-3); }

/* ---------- Fields ---------- */

.co-field { margin-bottom: 16px; }
.co-field:last-child { margin-bottom: 0; }

.co-row { display: flex; gap: 14px; }
.co-row .co-field { flex: 1; min-width: 0; }

@media (max-width: 600px) {
    .co-row { flex-direction: column; gap: 0; }
}

.co-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--shell-text);
}

.co-label span { color: var(--shell-danger); margin-left: 2px; }

.co-input {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--shell-text);
    background: var(--shell-surface-alt);
    border: 1.5px solid var(--shell-border);
    border-radius: var(--shell-radius-sm);
    outline: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.co-input:focus {
    background: #fff;
    border-color: var(--shell-accent);
    box-shadow: 0 0 0 3.5px rgba(0, 74, 247, 0.11);
}

.co-input::placeholder { color: #a8b3c4; }

.co-textarea { min-height: 92px; resize: vertical; line-height: 1.55; }

/* Native select arrow is stripped by appearance:none, so draw one. */
select.co-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

.co-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--shell-text-3);
}

/* Standalone hint above a group of fields, rather than under one. */
.co-hint--block {
    margin: -4px 0 16px !important;
    font-size: 12.5px !important;
    color: var(--shell-text-2) !important;
}

.co-field.is-invalid .co-input,
.co-field.is-invalid .co-phone {
    border-color: var(--shell-danger);
    background: #fef2f2;
}

/* Phone with a fixed country prefix */
.co-phone {
    display: flex;
    align-items: center;
    background: var(--shell-surface-alt);
    border: 1.5px solid var(--shell-border);
    border-radius: var(--shell-radius-sm);
    padding-left: 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.co-phone:focus-within {
    background: #fff;
    border-color: var(--shell-accent);
    box-shadow: 0 0 0 3.5px rgba(0, 74, 247, 0.11);
}

.co-phone__prefix {
    flex-shrink: 0;
    padding-right: 11px;
    margin-right: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--shell-text-2);
    border-right: 1px solid var(--shell-border);
}

.co-phone .co-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 11px;
}

/* ---------- Notes, alerts, actions ---------- */

.co-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 18px 0 0 !important;
    padding: 12px 14px;
    background: var(--shell-accent-soft);
    border: 1px solid #d6e4fb;
    border-radius: var(--shell-radius-sm);
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    color: var(--shell-accent) !important;
}

.co-note i { margin-top: 2px; flex-shrink: 0; }

.co-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
    padding: 13px 15px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--shell-radius-sm);
    font-size: 13.5px;
    line-height: 1.5;
    color: #991b1b;
}

.co-alert[hidden] { display: none; }
.co-alert i { margin-top: 2px; }

.co-actions { display: flex; gap: 12px; margin-top: 20px; }

.co-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    border: 0;
    border-radius: var(--shell-radius-sm);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.co-btn i { font-size: 12px; }

.co-btn--primary { flex: 1; background: var(--shell-accent); color: #fff; }
.co-btn--primary:hover { opacity: 0.92; color: #fff; text-decoration: none; }
.co-btn--primary:disabled { opacity: 0.6; cursor: not-allowed; }

.co-btn--ghost {
    flex: 0 0 auto;
    background: var(--shell-surface);
    border: 1.5px solid var(--shell-border);
    color: var(--shell-text-2);
}

.co-btn--ghost:hover { border-color: #cbd5e1; color: var(--shell-text); text-decoration: none; }

.co-footnote {
    margin: 20px 0 0 !important;
    text-align: center;
    font-size: 13px !important;
    color: var(--shell-text-2) !important;
}

.co-footnote a { color: var(--shell-accent); font-weight: 600; text-decoration: none; }
.co-footnote a:hover { text-decoration: underline; }

/* ---------- Settings-specific additions on the same language ---------- */

.co-header--left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
}

.co-header--left .co-badge { margin: 0; flex-shrink: 0; }
.co-header--left p { margin-left: 0 !important; max-width: 520px; }

/* Setup status strip */

.co-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: var(--shell-radius-sm);
    border: 1px solid;
    font-size: 13px;
    line-height: 1.55;
}

.co-status[hidden] { display: none; }

.co-status strong { display: block; font-weight: 700; margin-bottom: 1px; }

.co-status__dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-top: 6px;
    border-radius: 50%;
}

.co-status--pending {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.co-status--pending .co-status__dot {
    background: var(--shell-warn);
    animation: nzPulseDot 2s ease-out infinite;
}

@keyframes nzPulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.co-status--active {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.co-status--active .co-status__dot { background: var(--shell-ok); }

/* Success / warning variants of the note block */

.co-note--success {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
    margin: 0 0 16px !important;
}

.co-note--warn {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
    margin: 0 0 16px !important;
}

.co-note[hidden] { display: none !important; }

/* Join code plate */

.co-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--shell-surface-alt);
    border: 1px dashed #cbd5e1;
    border-radius: var(--shell-radius-sm);
}

.co-code__value {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--shell-text);
}

.co-code__copy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 7px 14px;
    border: 1px solid var(--shell-border);
    border-radius: 999px;
    background: var(--shell-surface);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--shell-accent);
    cursor: pointer;
    transition: border-color 0.16s ease;
}

.co-code__copy:hover { border-color: var(--shell-accent); }
.co-code__copy i { font-size: 11px; }

/* Account rows */

.co-linkrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--shell-border);
}

.co-linkrow:last-child { border-bottom: 0; padding-bottom: 0; }

.co-linkrow strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--shell-text);
}

.co-linkrow span { font-size: 12.5px; color: var(--shell-text-2); }
.co-linkrow .co-btn { padding: 9px 16px; font-size: 13px; flex: 0 0 auto; }

/* Danger zone */

.co-danger { border-color: #fecaca !important; }
.co-danger .co-card__title { color: #991b1b !important; border-bottom-color: #fecaca; }
.co-danger .co-card__title i { color: var(--shell-danger); }

.co-danger[hidden] { display: none !important; }

.co-danger__text {
    margin: 0 0 16px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--shell-text-2) !important;
}

.co-btn--danger {
    background: var(--shell-danger);
    color: #fff;
    flex: 0 0 auto;
}

.co-btn--danger:hover { opacity: 0.92; color: #fff; }

/* ==========================================================================
   6c. ADMIN CONSOLE — registration request queue
   ========================================================================== */

.req-count {
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 700;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 999px;
}

.req-count--zero { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }

.req-list { display: flex; flex-direction: column; }

.req-item {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--shell-border);
}

.req-item:last-child { border-bottom: 0; padding-bottom: 0; }

@media (max-width: 1000px) {
    .req-item { grid-template-columns: 1fr; gap: 10px; }
}

.req-main { min-width: 0; }

.req-name {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--shell-text);
}

.req-meta { margin-top: 3px; font-size: 12.5px; color: var(--shell-text-2); }

.req-desc {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--shell-text-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.req-contact { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.req-contact a,
.req-when {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--shell-text-2);
    text-decoration: none;
    word-break: break-all;
}

.req-contact a:hover { color: var(--shell-accent); text-decoration: underline; }
.req-contact i { width: 13px; color: var(--shell-text-3); flex-shrink: 0; }
.req-when { color: var(--shell-text-3); }

.req-actions { display: flex; gap: 8px; flex-shrink: 0; }

.req-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid var(--shell-border);
    border-radius: var(--shell-radius-sm);
    background: var(--shell-surface);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--shell-text-2);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.16s ease, color 0.16s ease;
}

.req-btn:hover { border-color: #cbd5e1; color: var(--shell-text); text-decoration: none; }
.req-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.req-btn--primary {
    background: var(--shell-accent);
    border-color: var(--shell-accent);
    color: #fff;
}

.req-btn--primary:hover { opacity: 0.92; color: #fff; border-color: var(--shell-accent); }

.co-pill {
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
}

.co-pill--pending { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }

/* Organization picker (admin opening create-farm without ?org=) */

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

.co-picklist li + li { border-top: 1px solid var(--shell-border); }

.co-picklist a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 4px;
    text-decoration: none;
}

.co-picklist a:hover { text-decoration: none; }
.co-picklist a:hover .co-picklist__name { color: var(--shell-accent); }

.co-picklist__name {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--shell-text);
}

.co-picklist__meta { font-size: 12.5px; color: var(--shell-text-2); }

/* ==========================================================================
   7. REQUEST-RECEIVED MODAL (organization registration)
   ========================================================================== */

.nz-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 29, 51, 0.6);
    backdrop-filter: blur(3px);
    animation: nzFade 0.18s ease;
}

@keyframes nzFade { from { opacity: 0; } to { opacity: 1; } }

.nz-modal {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px 30px 28px;
    text-align: center;
    background: var(--shell-surface);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(8, 29, 51, 0.3);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    animation: nzPop 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes nzPop {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.nz-modal__icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 22px;
    color: #fff;
    background: var(--shell-navy);
    border-radius: 50%;
}

.nz-modal h2 {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--shell-text);
}

.nz-modal__lede {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--shell-text-2);
}

.nz-modal__lede strong { color: var(--shell-text); font-weight: 700; }

.nz-modal__panel {
    padding: 15px 16px;
    margin-bottom: 20px;
    text-align: left;
    background: var(--shell-surface-alt);
    border: 1px dashed #cbd5e1;
    border-radius: var(--shell-radius-sm);
}

.nz-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.nz-modal__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shell-text-3);
}

.nz-modal__code {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--shell-text);
}

.nz-modal__hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--shell-text-3);
}

.nz-modal__steps {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    text-align: left;
}

.nz-modal__steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--shell-text-2);
}

.nz-modal__steps i { margin-top: 2px; font-size: 13px; color: var(--shell-text-3); }
.nz-modal__steps li:first-child i { color: var(--shell-ok); }
.nz-modal__steps li:nth-child(2) i { color: var(--shell-warn); }
.nz-modal__steps strong { color: var(--shell-text); font-weight: 600; }

.nz-modal__btn {
    width: 100%;
    padding: 13px 22px;
    border: 0;
    border-radius: var(--shell-radius-sm);
    background: var(--shell-accent);
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.16s ease;
}

.nz-modal__btn:hover { opacity: 0.92; }
.nz-modal__btn:focus-visible { outline: 2px solid var(--shell-lime); outline-offset: 2px; }

/* ---------- Ponds are admin-managed ----------
   Pond outlines are what the satellite analysis is keyed to, so they are traced
   once by the NetZero Aqua team when a farm is set up. Farmers read them; they
   don't redraw them.

   Hidden rather than deleted: js/farm-detail.js binds click listeners to these
   IDs on load and would throw a TypeError if the elements were absent, taking
   the rest of the page's initialisation down with it. `!important` is needed
   because the script sets `style.display` inline on #btnSavePond. */

#btnAddPondMode,
#btnSavePond,
.ponds-sidebar-footer,
.pond-item .edit-icon,
.pond-item .delete-icon,
/* Deleting a farm takes its ponds, cycles and satellite history with it.
   That's an admin action, not a one-click bin icon on a farmer's card. */
#btnDeleteFarm,
.delete-farm-btn { display: none !important; }

.ponds-managed-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 11px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--shell-text-2);
    background: var(--shell-surface-alt);
    border: 1px solid var(--shell-border);
    border-radius: var(--shell-radius-sm);
}

.ponds-managed-note i { margin-top: 2px; color: var(--shell-accent); flex-shrink: 0; }

/* ---------- No farm yet ----------
   Replaces the old "join or create an organization" cards. A farmer cannot
   create anything now, so this states the situation and gives them the one
   thing that helps: their buddy's number, as a tap-to-dial link. */

.nofarm {
    max-width: 540px;
    margin: 40px auto;
    padding: 36px 30px;
    text-align: center;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius);
    box-shadow: var(--nz-shadow);
}

.nofarm__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    font-size: 26px;
    color: var(--nz-lime-text);
    background: var(--nz-lime-soft);
    border-radius: 18px;
}

.nofarm h1 {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--nz-text);
}

.nofarm__lead {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--nz-text-2);
}

.nofarm__buddy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px;
    background: var(--nz-surface-alt);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-sm);
}

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

.nofarm__buddy strong { font-size: 17px; color: var(--nz-text); }

.nofarm__call {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: var(--nz-navy);
    border-radius: var(--nz-radius-pill);
}

.nofarm__call:hover { background: var(--nz-navy-tint); color: #fff; text-decoration: none; }

.nofarm__generic p { margin: 0 0 14px; font-size: 14.5px; color: var(--nz-text-2); }

.nofarm__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--nz-navy);
    border-radius: var(--nz-radius-sm);
}

.nofarm__note {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--nz-text-3);
}

/* No-farm state on org-home — same job as .nofarm on the dashboard. */
.org-empty__buddy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 340px;
    margin: 4px auto 0;
    padding: 20px;
    background: var(--nz-surface-alt);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-sm);
}

.org-empty__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nz-text-3);
}

.org-empty__buddy strong { font-size: 17px; color: var(--nz-text); }

.org-empty__call {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: var(--nz-navy);
    border-radius: var(--nz-radius-pill);
}

.org-empty__call:hover { background: var(--nz-navy-tint); color: #fff; text-decoration: none; }

/* The role chip signs you out.
   The little arrow appears on hover/focus rather than permanently — the chip's
   first job is still to say which account you are in, and a sign-out glyph
   sitting there all the time makes it read as a button before it reads as a
   label. */
.nz-role-chip { cursor: pointer; user-select: none; }

.nz-role-chip__out {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin-left: 0;
    transition: max-width .18s ease, opacity .18s ease, margin-left .18s ease;
}

.nz-role-chip:hover .nz-role-chip__out,
.nz-role-chip:focus-visible .nz-role-chip__out {
    max-width: 18px;
    opacity: .9;
    margin-left: 7px;
}

.nz-role-chip:focus-visible {
    outline: 2px solid var(--nz-lime, #3BD304);
    outline-offset: 2px;
}

/* Touch has no hover — show it always, and keep the target big enough. */
@media (hover: none) {
    .nz-role-chip__out { max-width: 18px; opacity: .9; margin-left: 7px; }
    .nz-role-chip { min-height: 40px; }
}

/* Settings — the note shown to farmers with no organization. */
.settings-note {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 15px 18px;
    margin: 0 0 22px;
    background: #f1f6fb;
    border: 1px solid #d8e5f1;
    border-radius: 12px;
    color: #2c567d;
}

.settings-note > i { flex: none; margin-top: 2px; font-size: 17px; }
.settings-note strong { display: block; font-size: 14.5px; font-weight: 700; }
.settings-note p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; }