input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea {
    margin-bottom: 0px !important;
}

/* Font floor for the input types SiteAug19.css forgot.
   SiteAug19's font-family rule names text/password/tel/email/textarea/select
   but NOT date, number, search or url. Today nothing shows, because every
   client-*.css carries "input, button, select, textarea { font-family: ...
   !important }" and wins. But client-Default.css is a COPY-ME TEMPLATE -- a
   new trust's theme is hand-copied and adjusted, and dropping or narrowing
   that one block silently drops these four types back to the browser's own
   form font. On an EMPTY date input Chrome then renders the "dd/mm/yyyy"
   segment hint in a thin, widely-tracked face that reads as "dd-----yyyy".
   No !important and no added specificity ON PURPOSE: the client theme must
   still win. This only has to catch the case where nothing else sets it.
   inherit, not a named face, so it follows whatever font the theme chose. */
input[type="date"], input[type="number"], input[type="search"], input[type="url"] {
    font-family: inherit;
}

/* "Login As" impersonation banner -- unmissable bar shown on every page while an
   admin is acting inside a member's account (Site.Master pnlImpersonationBanner).
   z-index sits UNDER the header so its menus drop down over the bar (at 10000
   the bar hid the MY ACCOUNT / GRANTS lists, 29 Sep 2026). Header layers it must
   stay below: Classic #Top_bar 30, new-look #Header_wrapper 700, drop-down 705.
   The sticky only takes effect where #Content overflow is lifted (agm.css); there
   the bar now slides under the fixed header instead of covering it. */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 25;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px 18px;
    flex-wrap: wrap;
    overflow: visible;
    background: #b00020;
    color: #fff;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;               /* defeat any inherited nowrap so the text wraps */
    border-bottom: 4px solid #ffd166;  /* amber underline draws the eye */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
    animation: impersonationPulse 1.5s ease-in-out infinite;
}
@keyframes impersonationPulse {
    0%, 100% { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.65), 0 3px 12px rgba(0, 0, 0, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
    .impersonation-banner { animation: none; }
}
.impersonation-banner strong { color: #fff; }
/* flex-basis:100% forces the message onto its own full-width row so it WRAPS (never clips);
   the button then sits on the row below. min-width:0 lets the text shrink to wrap. */
.impersonation-banner__text {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
.impersonation-banner__btn {
    flex: 0 0 auto;
    background: #fff;
    color: #b00020;
    font-weight: bold;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none !important;
    white-space: nowrap;
}
.impersonation-banner__btn:hover { background: #ffe3e7; color: #7a0016; }

/* Passive "you are editing Reg# N" strip shown next to the registration Save/Next
   buttons (RegistrationPage pnlEditingWho). Calm teal -- an identity reminder, not
   an alarm (the red bar above is the alarm). */
.editing-who-strip {
    display: inline-block;
    margin: 0 0 8px 0;
    padding: 7px 13px;
    background: #eef7f5;
    color: #0b3b34;
    border-left: 4px solid #0b6b5f;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
}
.editing-who-strip strong { color: #0b6b5f; }

select {
    -webkit-appearance: menulist !important;
}
#Content {
    overflow-x: auto;
}
#Footer .footer_copy .one {
    margin-bottom: 0px;
    padding-top: 10px;
    min-height: 0px;
}

table {
    margin-bottom: 0px !important;
    width: auto !important;
}

    table td {
        text-align: left !important;
        border-color: transparent !important;
    }

    table tr:first-child td {
        box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
    }

    table th {
        box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0) !important;
        border-color: transparent !important;
        text-align: left !important;
    }

/* ===================================================================
   HEADINGS ON THE HAND-BUILT ADMIN GRIDS
   shortcodes.css clears every heading background with
   ".style-simple table:not(.recaptchatable) th", and every page carries
   style-simple. That selector outweighs a page's own ".cs-grid th", so the
   heading text (white, or cream on a cream-and-charcoal theme) sat on a white
   card and could not be read: consents, retention, Export ALL, site settings,
   run data script, reporting views, grant transfer and the data
   dictionary. Found in demo4 screenshots, 15 Sep 2026. The
   #Content anchor is what outweighs it; the colour is the page's own.
   =================================================================== */
#Content table.cs-grid th,
#Content table.rt-grid th,
#Content table.xa-table th,
#Content table.settings-grid th,
#Content table.rd-grid th,
#Content table.rv-grid th,
#Content table.gx-plan th,
#Content table.dd-grid th {
    background-color: var(--theme-grid-header-bg, #02516e);
}

label {
    display: inline !important;
}

#popup label {
    font-weight: normal !important;
}

#popup2 label {
    font-weight: normal !important;
}

.override-grid tr {
    line-height: 0px;
}

.override-grid th {
    padding: 0px 0px 0px 0px;
}

.bg {
    position: fixed;
    top: 0;
    left: 0;
    background-color: gray !important;
    opacity: 0.5 !important;
    filter: alpha(opacity=50) !important; /* For IE8 and earlier */
}

.bgwidth {
    width: 100%;
}

.bgheight {
    height: 100%;
}

/* ===================================================================
   "NO CONTACT DETAILS" BADGE
   A derived data-quality flag shown next to a member wherever they
   appear (admin search results, verify screen, registration/profile
   pages). It is an ATTRIBUTE, not a registration status. The rule that
   decides who gets it lives in Utils.HasNoContactDetails / NoContactSqlPredicate.
   =================================================================== */
.badge-nocontact {
    display: inline-block !important;
    vertical-align: middle;
    margin: 2px 0;
    padding: 2px 9px 2px 8px;
    font-family: 'Inter', 'Poppins', Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.2px;
    white-space: nowrap;
    color: #7a4c00 !important;
    background: #fff3d6;
    border: 1px solid #f0c66b;
    border-radius: 11px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
    cursor: help;
}

.badge-nocontact::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 50%;
    background: #e8a219;
}

/* ------------------------------------------------------------------------
   Pending email-change badge + click popover ("ecp" = email change pending).
   Rendered by Utils.PendingEmailChangeBadgeHtml on the Change Email form and
   the member-summary header. The popover is pure CSS/JS toggled by an inline
   onclick -- NOT an AjaxControlToolkit modal -- so it can't break the
   existing email-change modal.
   ------------------------------------------------------------------------ */
.ecp-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.ecp-badge {
    display: inline-block;
    vertical-align: middle;
    margin: 2px 0;
    padding: 2px 10px;
    font-family: 'Inter', 'Poppins', Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.2px;
    white-space: nowrap;
    border-radius: 11px;
    cursor: pointer;
    user-select: none;
}

.ecp-badge.ecp-pending {
    color: #7a4c00;
    background: #fff3d6;
    border: 1px solid #f0c66b;
}

.ecp-badge.ecp-expired {
    color: #98201a;
    background: #fdecea;
    border: 1px solid #f3b1a9;
}

.ecp-badge::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 50%;
    background: #e8a219;
}

.ecp-badge.ecp-expired::before { background: #c0392b; }

/* Hidden by default; the .ecp-open class (toggled by the inline onclick) shows it. */
.ecp-pop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    z-index: 1200;
    min-width: 230px;
    max-width: 320px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #d4d9d6;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.16);
    font-family: 'Inter', 'Poppins', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: #333;
    text-align: left;
    white-space: normal;
}

.ecp-pop.ecp-open { display: block; }

.ecp-pop-title {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    padding-right: 16px;
    color: #1b5e20;
}

.ecp-row { display: block; }

.ecp-note {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #777;
}

.ecp-close {
    position: absolute;
    top: 6px;
    right: 9px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: #999;
}

.ecp-close:hover { color: #555; }

/* Breathing room below the home-page CTA buttons (Click To Register / LOGIN ...)
   so any welcome text or per-client content beneath them isn't cramped against
   the buttons. Reads as separation only when content follows; harmless otherwise. */
.reg-cta-group {
    margin-bottom: 22px;
}

/* ===================================================================
   MOBILE-FRIENDLY ENHANCEMENTS
   Improves usability on phones for registration, login, and home pages.
   =================================================================== */

/* --- Base: touch-friendly inputs on all screen sizes --- */
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    box-sizing: border-box;
}

/* --- Mobile: screens up to 767px --- */
@media only screen and (max-width: 767px) {

    /* Allow content area to use full phone width */
    .section_wrapper,
    .container,
    .four.columns .widget-area {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* Stack form table rows vertically (label above input) */
    #Content table:not(.gridview):not(.override-grid) tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
    }

    #Content table:not(.gridview):not(.override-grid) td {
        display: block;
        width: 100% !important;
        padding: 2px 0 !important;
    }

    /* Full-width form inputs */
    #Content input[type="text"],
    #Content input[type="email"],
    #Content input[type="password"],
    #Content input[type="date"],
    #Content input[type="tel"],
    #Content input[type="number"],
    #Content input[type="url"],
    #Content input[type="search"],
    #Content select,
    #Content textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px; /* Apple HIG touch target */
        padding: 10px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    /* Touch-friendly buttons */
    #Content input[type="submit"],
    #Content input[type="button"],
    #Content button,
    #Content .btn,
    #Content .action_button {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px !important;
        font-size: 16px !important;
        box-sizing: border-box;
    }

    /* Login form: full width on mobile */
    .auth-form {
        max-width: 100% !important;
    }

    .auth-input {
        max-width: 100% !important;
        width: 100% !important;
        min-height: 44px;
    }

    .auth-actions {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .auth-actions input[type="submit"] {
        width: 100% !important;
    }

    /* Radio buttons: easier tap targets */
    #Content .RadioButtonList label,
    #Content input[type="radio"] + label,
    #Content span label {
        display: inline-block !important;
        padding: 8px 12px !important;
        margin: 2px 4px 2px 0 !important;
        font-size: 15px !important;
    }

    /* Stack radio button lists vertically */
    #Content table:not(.gridview) input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: 6px;
        vertical-align: middle;
    }

    /* Modals: proper mobile sizing */
    .modalPopup,
    .modal-popup {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Home page heading */
    h1 {
        font-size: 1.5em !important;
        word-wrap: break-word;
    }

    h2 {
        font-size: 1.2em !important;
    }

    /* Validation messages inline */
    span[id$="Validator"] {
        display: block !important;
        margin-top: 2px;
    }

    /* 2FA code inputs: larger touch targets */
    .code-input {
        width: 40px !important;
        height: 48px !important;
        font-size: 20px !important;
        text-align: center !important;
    }

    /* Navigation buttons row: stack if multiple */
    #Content > div > table + input[type="submit"],
    #Content > div > table + .aspNetDisabled {
        width: 100% !important;
        margin-bottom: 6px !important;
    }

    /* Ensure the sticky session timer doesn't obscure content */
    .sticky-top {
        font-size: 10px !important;
        top: 5px !important;
        padding: 2px 6px !important;
    }

    /* Grid views: horizontal scroll rather than break */
    .gridview,
    div[id*="GridView"],
    table.gridview {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Logo: smaller on mobile */
    .logo img {
        max-height: 50px !important;
    }
}

/* --- Small phones: 479px and below --- */
@media only screen and (max-width: 479px) {

    #Content input[type="text"],
    #Content input[type="email"],
    #Content input[type="password"],
    #Content input[type="date"],
    #Content select,
    #Content textarea {
        font-size: 16px !important;
    }

    /* 2FA code: tighter gap on very small screens */
    #verificationCodeContainer {
        gap: 3px !important;
    }

    .code-input {
        width: 34px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
}

/* --- Registration form: targeted mobile stacking --- */
@media only screen and (max-width: 767px) {
    table.reg-form {
        width: 100% !important;
    }

    table.reg-form tr {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 12px !important;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
    }

    table.reg-form td {
        display: block !important;
        width: 100% !important;
        padding: 2px 0 !important;
    }

    /* First td is the label */
    table.reg-form td:first-child {
        font-weight: 600;
        font-size: 14px;
        color: #333;
        padding-bottom: 4px !important;
    }

    table.reg-form input[type="text"],
    table.reg-form input[type="email"],
    table.reg-form input[type="password"],
    table.reg-form input[type="date"],
    table.reg-form input[type="tel"],
    table.reg-form select,
    table.reg-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px;
        padding: 10px !important;
        font-size: 16px !important;
        border: 1px solid #c9c9c9;
        border-radius: 4px;
        box-sizing: border-box !important;
    }

    table.reg-form input[type="submit"],
    table.reg-form button {
        width: 100% !important;
        min-height: 44px;
        padding: 10px 16px !important;
        font-size: 16px !important;
        margin-top: 4px !important;
    }
}

/* --- Centralised popup / modal styling.
   Most admin pages reference .modalPopup, .modalBackground, or .bg as
   BackgroundCssClass on ajaxToolkit:ModalPopupExtender but did not
   define them locally and there was no site-wide definition, so the
   popup rendered without dim/border/shadow. Defining them here once
   keeps every admin maintenance page consistent (AdminListBans,
   AdminGrantItem, AdminHapu, etc.) without duplicating styles. */

.modalBackground,
.bg {
    background-color: rgba(0, 0, 0, 0.55);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.modalPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    background: #fff;
    border: 1px solid #666;
    border-radius: 4px;
    padding: 12px 16px;
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
}

/* AddEditRecordPanel / CopyItemPanel / RichTextPanel etc. set BackColor=White
   inline but have no CssClass -- the ModalPopupExtender shows them via inline
   styles. Give them border + shadow when shown by an extender. */
.aspNetModalPopup,
[id$="_ModalPopupExtender"] + div[style*="display: block"],
[id$="Panel"][style*="display"] {
    /* Reserved hook -- extenders inject inline style on the target panel.
       The selectors above are intentionally narrow; panels without explicit
       inline display:block remain untouched. */
}

/* Panels shown by ModalPopupExtender. ASP.NET renders <asp:Panel BackColor="White">
   as <div style="background-color:White;...">, not bgcolor -- so target by ID
   suffix (the panel IDs are consistent across admin pages).
   Also constrain max-width so the form doesn't span the full viewport. */
div[id$="_AddEditRecordPanel"],
div[id$="_CopyItemPanel"],
div[id$="_PanelAddEdit"],
div[id$="_ConfirmAutoApprovePanel"],
div[id$="_FallbackAddNewPanel"] {
    border: 1px solid #666 !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    z-index: 10001;
    max-width: 560px !important;
}

/* RTE / RichText panels need more room for the editor -- relax the constraint. */
div[id$="_RichTextPanel"],
div[id$="_FallbackRichTextPanel"] {
    border: 1px solid #666 !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    z-index: 10001;
    max-width: 950px !important;
}

.popup-header {
    background: #1b5e20;
    color: #fff;
    margin: -12px -16px 12px -16px;
    padding: 8px 16px;
    border-radius: 4px 4px 0 0;
}

.popup-header h2 {
    color: #fff;
    margin: 0;
    font-size: 18px;
}

/* jQuery UI dialog -- ConfirmDelete.ascx uses this. Make sure the overlay
   sits BELOW the dialog so buttons remain clickable, and give the dialog
   a clear z-index above other floating panels. Some admin pages didn't
   load jquery-ui.css explicitly; centralising it (and these tweaks) keeps
   the dialog usable everywhere. */
.ui-widget-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 10000 !important;
}

.ui-dialog {
    z-index: 10001 !important;
    background: #fff;
    border: 1px solid #666;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ui-dialog .ui-dialog-titlebar {
    background: #1b5e20;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px 4px 0 0;
}

.ui-dialog .ui-dialog-title {
    color: #fff;
    font-weight: 600;
}

.ui-dialog .ui-dialog-content {
    padding: 12px 16px;
}

/* Field-level inline help text -- small grey hint that sits directly under
   a form field to remind admins what the field is for. Used on admin
   maintenance pages (AdminGrantItem, AdminHapu, etc.) where the field
   labels are terse and the underlying purpose isn't obvious. */
.field-help {
    display: block;
    font-size: 12px;
    color: #555;
    line-height: 1.35;
    margin: 2px 0 6px 0;
    font-weight: normal;
    font-style: italic;
}

/* The hapū and marae lists (22 Sep 2026): a row that is in use says what holds
   it, the edit box says so before anyone types, and a refused save says why in
   the box itself. The span is empty when there is nothing to say. */
#Content .list-in-use {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    color: #5f7167;
    font-style: italic;
}
#Content .list-in-use-note,
#Content .list-refused {
    display: block;
    max-width: 420px;
    font-size: 13px;
    line-height: 1.4;
    margin: 6px 0;
}
#Content .list-in-use-note { color: #5f7167; }
#Content .list-refused { color: #8c2b23; font-weight: 600; }
#Content .list-in-use-note:empty,
#Content .list-refused:empty { display: none; }

/* ===================================================================
   GRANTS DASHBOARD QUICK-TILE
   Admin-only clickable tile beside the header tree logo. Replaces the
   plain "DASHBOARD" text item that used to live in the PAY sub-menu;
   links to ~/AdminGrantsDashboard. Role-gated (Admin,System) server-side
   via the DashboardTileView LoginView in Site.Master.
   =================================================================== */
.dash-tile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 14px;
    padding: 7px 15px 7px 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0f6d63 0%, #12857a 55%, #17a294 100%);
    box-shadow: 0 4px 14px rgba(15,109,99,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
    text-decoration: none !important;
    vertical-align: middle;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.dash-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15,109,99,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
    filter: saturate(1.08);
}

.dash-tile:active {
    transform: translateY(0);
}

.dash-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    flex: 0 0 auto;
}

.dash-tile-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.12;
}

.dash-tile-text b {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.dash-tile-text i {
    color: rgba(255,255,255,0.82);
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.2px;
}

/* Collapse to just the chart icon on small screens so the mobile header
   stays clean while admins keep one-tap access to the dashboard. */
@media (max-width: 767px) {
    .dash-tile {
        margin-left: 8px;
        padding: 6px;
        gap: 0;
    }

    .dash-tile-text {
        display: none;
    }
}

/* ===================================================================
   DROPDOWN MENUS ARE AS WIDE AS THEIR LONGEST ROW (16 Sep 2026)
   layout.css:388 makes every dropdown row exactly 200px wide. Take off
   the theme's 20px padding each side and a row has 160px for its words,
   which at the 16px menu size is about eighteen capital letters. Longer
   rows either wrapped (GRANTS UNPAID LIST, GRANTS DASHBOARD and UPDATE
   ACCOUNT on two lines, demo grant names on three) or, where the row
   carries style="white-space: nowrap" in Site.Master, ran out past the
   edge of the panel: SEARCH EMAILS & DOCUMENTS by 71px and GRANT ROUND
   AMOUNTS by 25px (screenshots, 16 Sep).

   Each panel now sizes to its longest row. Never narrower than the old
   200px, so a menu of short rows looks exactly as it did. Never wider
   than 340px: the longest fixed row, SEARCH EMAILS & DOCUMENTS, at the
   largest AdminTheme size (18px) in the widest faces (Geologica and
   Inter) is 283px of text, plus the padding. Only words that come from
   data can pass that -- grant names in the GRANTS menu, say -- and
   those wrap onto a second line instead of making the panel huge.

   * white-space: normal !important beats those inline nowraps. They
     were only ever there to stop a row wrapping inside 200px. The panel
     grows instead now, so all they could still do is push a row past
     the cap. A new row does not need one.
   * A third level hangs off its parent's real right edge (100%), not
     the theme's fixed left:200px (layout.css:402), or it would sit on
     top of a wider parent. The new look turns it round to open
     leftwards (site-v2.css) and still wins on specificity.
   * Desktop only: 1240px and up, the theme's own switch point. Below
     that the menu lives in the slide-out panel -- see the next block.
   * The SYSTEM panel is left out; it is a grid with its own width.
   =================================================================== */
@media only screen and (min-width: 1240px) {
    #Top_bar .menu li ul.sub-menu:not(.sysmenu-panel) {
        width: max-content;
        min-width: 200px;
        max-width: 340px;
    }

    #Top_bar .menu li ul.sub-menu:not(.sysmenu-panel) > li {
        width: auto;
        white-space: normal !important;
    }

    #Top_bar .menu li ul.sub-menu li ul.sub-menu {
        left: 100%;
    }
}

/* A LIST THAT WOULD RUN OFF THE RIGHT EDGE OPENS LEFTWARDS (29 Sep 2026).
   The menu sits at the right of the bar, so the LAST list on a member's
   menu (GRANTS, or REPORTING) hung up to 141px past the edge of a 1280px
   window, where #Wrapper's overflow cut its words off. menu.js measures
   each list as it opens and adds .opens-left only when it would cross the
   edge, so every list that fits opens exactly as before.
   * Second level: anchored on its item's right edge instead of its left.
   * Third level: hangs off its parent's left side. The new look already
     does that for every third level (site-v2.css); this is for Classic.
   Both selectors beat layout.css:386 and the left:100% rule above. */
@media only screen and (min-width: 1240px) {
    #Top_bar .menu > li > ul.sub-menu.opens-left {
        left: auto;
        right: 0;
    }

    #Top_bar .menu li ul.sub-menu li ul.sub-menu.opens-left {
        left: auto;
        right: 100%;
    }
}

/* ===================================================================
   THE PHONE SLIDE-OUT MENU FITS ITS PANEL (16 Sep 2026)
   Below 1240px scripts.js moves nav#menu into #Side_slide, a panel
   250px wide (layout.css:633). Measured at 390px wide with every admin
   menu, the SYSTEM panel and menu.js's "+" buttons in place:

   * THE PANEL SCROLLED 40px SIDEWAYS. Every row is width:100%
     (layout.css:655), and on a phone Site.Master's own <style> adds
     padding-left:20px to each sub-menu row on top of that width. So a
     second-level row was 270px and a third-level row 290px in the
     250px panel, and the "+" beside LOOK, EMAIL, GRANTS, SPECIAL and
     the other ADMIN groups sat 15px off the side of the screen.
     border-box puts that indent inside the width instead.
   * THE ROOM THAT TAKES COMES BACK FROM THE RIGHT. The theme keeps
     margin-right:50px on every row (layout.css:657) for a "+" button
     (40px wide, 5px in from the edge, layout.css:664), but only a row
     WITH a sub-menu has one. The rest now keep 15px, which leaves their
     words 20px clear of the edge of the phone -- the same inset the
     top-level rows have on the left.
   * On a phone the third level steps its words in 35px from its divider
     line, as the second level does, instead of the theme's 50px. Its
     rows already sit 20px further in from Site.Master's indent; with
     both, REPORT DEFINITIONS would have wrapped.
   * The nowraps from Site.Master (see the block above) pushed SEARCH
     EMAILS & DOCUMENTS 25px off the screen; here a long row wraps.
   * NO "+" ON A PHONE. Site.Master holds every sub-menu open up to
     768px, so there a "+" only turned into "-" and back. Its rule to
     hide them never matched and is fixed in Site.Master; with no button,
     a row that has a sub-menu (LOOK, SPECIAL...) keeps 15px like the
     rest. From 769px the "+" opens and closes the list, so it stays.

   Checked against the look before these two blocks, in Inter,
   Geologica, Poppins, Open Sans and Segoe UI at the phone's 14px: the
   panel no longer scrolls sideways and no "+" and no words leave the
   screen (nearest 21px). The rows that now wrap are the ones that ran
   off the screen or up to its edge: SEARCH EMAILS & DOCUMENTS, GRANT
   ROUND AMOUNTS in Inter and Geologica, and RECORD A SUCCESSION (a
   DISTRIBUTIONS row no site has on). A few others stopped wrapping.

   From 769px to 1239px there is no Site.Master indent and the words
   are 16px. On a touch tablet, where a scrollbar takes no width, the
   result is the same as on a phone. In a desktop window narrowed below
   1240px, whose scrollbar takes 15px of the panel, ten rows stop
   wrapping and six that squeezed onto one line now wrap -- GRANTS -
   DRAFT stops wrapping and GRANTS - SUBMITTED starts.
   =================================================================== */
#Side_slide #menu ul.sub-menu:not(.sysmenu-panel) > li {
    white-space: normal !important;
}

#Side_slide #menu ul.sub-menu > li {
    box-sizing: border-box;
}

#Side_slide #menu ul.sub-menu a {
    margin-right: 15px;
}

#Side_slide #menu ul.sub-menu li.submenu > a {
    margin-right: 50px;
}

@media (max-width: 768px) {
    #Side_slide #menu ul.sub-menu ul.sub-menu > li > a {
        padding-left: 35px;
    }

    #Side_slide #menu ul.sub-menu li.submenu > a {
        margin-right: 15px;
    }
}

/* THE SYSTEM LIST IN THE SLIDE-OUT (16 Sep 2026). Every rule in the SYSTEM
   MENU PANEL block below starts "#Top_bar", and below 1240px the menu is not
   in #Top_bar, so in the slide-out none of them apply -- including that
   block's own "Mobile" part. On a phone the heading read "System ConsoleAll
   27 tools, searchable", the group names were 16px (the tools under them are
   14px) and sat 35px to their left, and they were WHITE on every site: the
   panel is <div id="Side_slide" class="right dark"> and layout.css:1641 gives
   .dark color:#fff !important. On the light sites' rows that is 1.1:1, as
   good as invisible. Migrations, Developer tools and One-off updates also
   lost the amber that marks them one-way on the desktop.

   Now the heading is two lines, and group names are small capitals lined up
   with the tools, in the row colour. A one-way group gets an amber stripe
   down its left rather than the desktop's amber words: #d98a00 words measure
   2.5:1 on the #f2f2f2 / #fbf7ee / #f2fafc rows of the light sites (5:1 on
   the dark ones), the row colour 5.7:1 or better on all five. */
#Side_slide #menu ul.sysmenu-panel a.sysmenu-banner b,
#Side_slide #menu ul.sysmenu-panel a.sysmenu-banner i {
    display: block;
}

#Side_slide #menu ul.sysmenu-panel a.sysmenu-banner i {
    font-size: 12px;
    font-style: normal;
}

#Side_slide #menu ul.sysmenu-panel .sysmenu-head {
    display: block;
    padding: 16px 15px 6px 35px;
    color: var(--theme-submenu-text, inherit);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#Side_slide #menu ul.sysmenu-panel .sysmenu-col.is-danger {
    box-shadow: inset 3px 0 0 #d98a00;
}

/* ===================================================================
   SYSTEM MENU PANEL
   The SYSTEM dropdown used to be nineteen flat items in a single
   column -- ordered by the date each page was added, tall enough to
   run off a laptop screen, and with "Countries" (a lookup list) and
   "Adhoc Query" (raw SQL against live data, no undo) looking
   identical to each other.

   It is now a grouped, three-column panel. The MARKUP comes from
   Code/SystemTools.cs (BuildMenuPanel), which is also what /SystemHub
   renders its cards from, so the menu and the console page cannot
   drift apart.

   Three things to know before editing this:

   * THEME COLOURS ARE INHERITED, NOT SET. The submenu palette is
     per-client: Styles/client-*.css paint "#Top_bar .menu > li ul"
     and its links from --theme-submenu-bg / --theme-submenu-text /
     --theme-menu-hover, all with !important. Demo is dark charcoal,
     Demo2 is light cream, Default is light grey. So this block sets
     NO background and NO link colour -- hard-coding either would look
     correct on exactly one client. Separators use grey alpha, which
     reads on both light and dark; group headings use --theme-accent.

   * THE PANEL IS ONE <li> HOLDING A CSS GRID. menu.js fades the <ul>
     in with jQuery, which writes display:block onto it inline. A grid
     declared on the <ul> itself would be overwritten and the columns
     would stack into one tall list -- which is what we started with.

   * SELECTORS CARRY TWO CLASSES so they beat the theme's
     "#Top_bar .menu li ul li" rules (which hard-set width:200px and
     10px/20px link padding) on specificity. !important is used only
     where a client stylesheet already claimed the property with
     !important -- i.e. the caution-coloured links.
   =================================================================== */
#Top_bar .menu > li.sysmenu-root {
    position: relative;
}

/* Right-anchored: SYSTEM sits near the end of the bar, so the panel
   has to grow leftwards or it hangs off the side of the window. */
#Top_bar .menu li ul.sysmenu-panel {
    left: auto;
    right: 0;
    width: 700px;
    padding: 0 0 4px;
    background-image: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

#Top_bar .menu ul.sysmenu-panel > li.sysmenu-shell {
    width: auto;
    padding: 0;
}

/* Banner strip -- the way through to the full console page. Kept
   transparent so it sits on whatever the client's submenu colour is. */
#Top_bar .menu ul.sysmenu-panel a.sysmenu-banner {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.28);
}

#Top_bar .menu ul.sysmenu-panel a.sysmenu-banner b {
    color: var(--theme-accent, #1b5e20);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#Top_bar .menu ul.sysmenu-panel a.sysmenu-banner i {
    font-size: 11px;
    font-style: normal;
    opacity: 0.65;
}

#Top_bar .menu ul.sysmenu-panel .sysmenu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 10px 6px 0;
}

#Top_bar .menu ul.sysmenu-panel .sysmenu-col {
    padding: 0 10px 12px;
}

#Top_bar .menu ul.sysmenu-panel .sysmenu-head {
    display: block;
    padding: 0 6px 5px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.28);
    color: var(--theme-accent, #6a7d70);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Beats the theme's 10px/20px padding and per-item bottom border,
   which at nineteen items was most of why the old list was so tall. */
#Top_bar .menu ul.sysmenu-panel .sysmenu-col a {
    padding: 5px 6px;
    border-bottom: 0;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.3;
}

/* Caution columns: migrations and developer tools are one-way. Amber
   is legible on every client submenu colour in the estate (charcoal,
   cream, light grey), which is why it is a literal and not a var.
   !important because client-*.css claims link colour with it. */
#Top_bar .menu ul.sysmenu-panel .sysmenu-col.is-danger .sysmenu-head {
    color: #d98a00;
    border-bottom-color: rgba(217, 138, 0, 0.45);
}

#Top_bar .menu ul.sysmenu-panel .sysmenu-col a.is-danger {
    color: #d98a00 !important;
}

/* Narrow desktops: drop to two columns before the panel can reach the
   left edge of the window. */
@media (max-width: 1240px) {
    #Top_bar .menu li ul.sysmenu-panel {
        width: 480px;
    }

    #Top_bar .menu ul.sysmenu-panel .sysmenu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: written for the theme's vertical accordion in #Top_bar. This
   fleet never uses it: Site.Master's <body> carries mobile-side-slide, so
   below 1240px the menu moves into #Side_slide and these rules reach
   nothing. The phone look is "THE SYSTEM LIST IN THE SLIDE-OUT" above. */
@media (max-width: 767px) {
    #Top_bar .menu li ul.sysmenu-panel {
        width: 100%;
        right: auto;
        left: 0;
        box-shadow: none;
        border-radius: 0;
    }

    #Top_bar .menu ul.sysmenu-panel .sysmenu-grid {
        grid-template-columns: 1fr;
    }

    #Top_bar .menu ul.sysmenu-panel .sysmenu-col a {
        padding: 8px 6px;
        font-size: 13px;
    }
}

/* =====================================================================
   TOP STRIP -- the look and colour bar above the header

   Lives in _override.css, NOT site-v2.css, because it has to be visible
   while the CLASSIC look is showing -- that is the only way to switch
   INTO the new look.

   POSITIONING
   The strip is fixed to the top of the window and body reserves its
   height, so it is always reachable whatever the page is doing.

   Under the NEW look the theme's fixed #Top_bar becomes a plain block
   inside a STICKY #Header_wrapper instead. That is not tidying: a fixed
   bar reserves its space with a guessed min-height on #Header, so the
   moment the menu wraps to a second row (which is the point of the
   change in site-v2.css) the extra row slides underneath the page.
   A sticky wrapper takes part in normal flow, so the header always
   reserves its own real height, and still sticks on scroll. It has to
   be #Header_wrapper rather than #Top_bar itself, because a sticky
   element can only travel inside its own parent and #Header is exactly
   as tall as the bar -- sticking it there does nothing at all.

   The CLASSIC look keeps the theme's fixed header untouched and is
   simply pushed down by the strip's height.

   One height, one variable: change --v2-strip-h and the strip, the body
   reservation, the sticky offset and the classic push all follow.

   TWO variables now, and the split matters. --v2-strip-min is how tall the
   BAR is when it fits on one line. --v2-strip-h is how much room the PAGE
   reserves for it, which is the same number until the bar wraps -- and once
   it wraps, Scripts/look-strip.js measures the real height and writes it
   here. Everything downstream (the body padding, the sticky offset, the
   classic push, the preview bar, the session pill) still reads the one
   variable and follows for free.
   ===================================================================== */
:root {
    --v2-strip-min: 40px;
    --v2-strip-h: 40px;
}

.v2-topstrip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: var(--v2-strip-min);
    z-index: 703;
    background: #1f2a33;
    color: #dfe7ec;
    font-size: 12px;
    line-height: 1;
}

body.has-topstrip { padding-top: var(--v2-strip-h); }

/* WRAPPING IS OPT-IN, AND THE OPT-IN IS "JAVASCRIPT RAN".
   Wrapping makes the bar taller, and nothing else on the page knows that
   without the measurement in look-strip.js writing --v2-strip-h. So the bar
   only wraps once that script has added .v2-strip-ready; with no script, or
   before it runs, the bar is the single line it has always been and the
   header sits exactly where it always did. Fail-safe, not fail-pretty. */
html.v2-strip-ready .v2-topstrip__in { flex-wrap: wrap; overflow: visible; }

/* The reader's own choice, kept in localStorage: squeeze it back onto one
   line. Same state the page falls back to with no script at all. */
html.v2-strip-tight .v2-topstrip { height: var(--v2-strip-min); }
html.v2-strip-tight .v2-topstrip__in { flex-wrap: nowrap; overflow-x: auto; }

/* Collapse / expand. Sits over the right-hand end of the bar rather than in
   the flex row, so it stays put on whichever line the groups end on. */
.v2-strip-toggle {
    position: absolute;
    top: 0;
    right: 6px;
    height: var(--v2-strip-min);
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #93a4b0;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
}

.v2-strip-toggle:hover { color: #dfe7ec; background: rgba(255, 255, 255, .07); }
.v2-strip-toggle:focus-visible { outline: 2px solid #66c6b8; outline-offset: -2px; }
.v2-strip-toggle svg { transition: transform .18s ease; display: block; }

/* Drawn pointing DOWN, which is what it means while the bar is squeezed:
   there is more to show. Flipped while the bar is already open. */
html.v2-strip-ready:not(.v2-strip-tight) .v2-strip-toggle svg { transform: rotate(180deg); }

/* No script, no toggle: it would be a button that cannot do anything. */
html:not(.v2-strip-ready) .v2-strip-toggle { display: none; }

/* THE GAP HAS TO SURVIVE A FOURTH GROUP.
   This was gap:26px with overflow:hidden and no min-width on the groups, which held
   while the strip carried three of them (Page, Colours, Photos). Adding Shapes on
   2026-08-12 pushed it past the window at 1280px and flex did what flex does -- it
   shrank the groups until the labels sat ON the group before them ("WhenuaPHOTOS",
   "BothSHAPES"). The groups now refuse to shrink below their content, and the row
   WRAPS rather than overlapping itself -- see the .v2-strip-ready note above for why
   wrapping waits for the script, and why squeezed-onto-one-line is still the fallback.

   The right-hand padding is the collapse button's room. It is absolutely positioned
   over the bar, so nothing else reserves space for it. */
.v2-topstrip__in {
    display: flex;
    align-items: center;
    gap: 8px 22px;
    min-height: var(--v2-strip-min);
    padding: 4px 46px 4px 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.v2-topstrip__in::-webkit-scrollbar { display: none; }

.v2-topstrip__grp {
    display: flex;
    align-items: center;
    gap: 9px;
    /* NOT min-width:0. That is what let flex shrink a group past its own content and
       slide the next group's label over it -- see the note on .v2-topstrip__in. */
    flex: 0 0 auto;
}

.v2-topstrip__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #93a4b0;
    white-space: nowrap;
}

/* "Locked" -- the one group on the strip that is a sentence rather than a
   control. Shown only to an admin on a site whose trust has asked that just
   the site's own settings apply, so the admin knows the four controls beside
   it are theirs alone. Deliberately quiet: it is an explanation, not a
   warning, and the strip is not where a warning belongs.

   Sentence case and no letter-spacing, unlike the label it sits next to --
   the uppercase tracking that reads as a heading over three words is unreadable
   over a line of prose. */
.v2-topstrip__note {
    font-size: 11px;
    color: #93a4b0;
    white-space: nowrap;
    font-style: italic;
}

/* Segmented control, shared by the look switch and the palette row. */
.v2-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
}

.v2-seg__opt {
    display: inline-block;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: #cfdae2 !important;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.v2-seg__opt:hover { background: rgba(255, 255, 255, .16); color: #fff !important; }

/* The choice currently in force. Deliberately a NEUTRAL light chip rather
   than the client's accent: this strip sits above the header in every
   palette, including the ones it is used to choose, and an accent-coloured
   pill on a dark strip disappears the moment somebody picks a dark accent. */
.v2-seg__opt.is-on {
    background: #eef3f6;
    color: #1f2a33 !important;
    cursor: default;
}

.v2-seg__opt.is-on:hover { background: #eef3f6; color: #1f2a33 !important; }

/* --- palette swatches --- */
.v2-swatch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: #cfdae2 !important;
    padding: 4px 11px 4px 7px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.v2-swatch:hover { background: rgba(255, 255, 255, .16); color: #fff !important; }

.v2-swatch.is-on {
    background: #eef3f6;
    color: #1f2a33 !important;
    cursor: default;
}

.v2-swatch.is-on:hover { background: #eef3f6; color: #1f2a33 !important; }

.v2-swatch__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}

/* Each dot wears its own palette's accent, so the row reads as colours
   rather than as a list of words. "Site" is the client's own accent, which
   is the one colour here that is not fixed. */
.v2-swatch--site      .v2-swatch__dot { background: var(--theme-accent, #7d918c); }
.v2-swatch--pounamu   .v2-swatch__dot { background: #0e7c6d; }
.v2-swatch--kahurangi .v2-swatch__dot { background: #20549f; }
.v2-swatch--kokowai   .v2-swatch__dot { background: #a32b22; }
.v2-swatch--whenua    .v2-swatch__dot { background: #6e5a1f; }

/* When the strip is SQUEEZED onto one line, the palette words go and the dots
   carry the meaning on their own.

   TIED TO THE SQUEEZE, NOT TO THE WINDOW WIDTH, since 2026-08-12. It was a plain
   1100px media query, raised to 1400px when Shapes became a fourth group and the
   words were the difference between everything fitting and the newest control being
   pushed off the right-hand edge. Wrapping is the better answer to that -- there is
   no width at which anything has to be dropped now -- so the words only go when a
   reader has actually asked for one line, and the dots were always designed to carry
   it when they do. */
html.v2-strip-tight .v2-swatch__name { display: none; }
html.v2-strip-tight .v2-swatch { padding: 5px 7px; }

/* The locked note is a whole sentence, so it is the first thing to go when a
   reader has asked for one line -- it explains the strip rather than working it,
   and "LOCKED" on its own still carries the point. */
html.v2-strip-tight .v2-topstrip__note { display: none; }

/* Below about 1100px the strip is the least important thing on screen whatever the
   reader has chosen, so the dots carry it there too. */
@media (max-width: 1100px) {
    .v2-swatch__name { display: none; }
    .v2-swatch { padding: 5px 7px; }
    .v2-topstrip__in { gap: 6px 16px; padding: 4px 44px 4px 12px; }
    .v2-topstrip__note { display: none; }
}

@media (max-width: 767px) {
    .v2-topstrip__label { display: none; }
    /* The label is gone and the note went at 1100px, so the group would be an
       empty flex child taking gap on both sides. Take the whole thing. */
    .v2-topstrip__grp--locked { display: none; }
}

/* NEW LOOK: the bar stops being fixed and its wrapper sticks instead, so
   the header reserves its own real height (see the note above).

   #Wrapper carries overflow:hidden in the ported theme, and an ancestor
   with any overflow other than visible silently turns off position:sticky
   for everything inside it -- the element simply never sticks, with no
   error and no clue. It has to be lifted for the header to work, so the
   pages are checked for horizontal overflow instead; the landing bands
   and the grids all size to the window rather than exceeding it. */
body.chrome-v2.has-topstrip #Wrapper { overflow: visible; }

body.chrome-v2.has-topstrip #Header_wrapper {
    position: sticky;
    top: var(--v2-strip-h);
    z-index: 700;
}

body.chrome-v2.has-topstrip #Top_bar {
    position: static !important;
    top: auto !important;
}

body.chrome-v2.has-topstrip #Header,
body.chrome-v2.has-topstrip #Header_wrapper {
    min-height: 0 !important;
    height: auto !important;
}

/* CLASSIC with the strip showing -- an admin on a site that has not been
   switched over. The theme's header is still fixed to the window here, so
   without this it would cover the strip and there would be no way to
   switch INTO the new look, which is the one thing the strip exists for. */
body.has-topstrip:not(.chrome-v2) #Top_bar { top: var(--v2-strip-h) !important; }

body.has-topstrip .v2-preview-bar { top: var(--v2-strip-h); z-index: 702; }

/* The session countdown used to be hidden behind the fixed header, which is
   the only reason nobody noticed it sitting in the middle of it. With the
   header in normal flow it lands ON the header, so it moves to the right
   end of the strip -- which is where a status readout belongs anyway. */
body.has-topstrip #sessionInfo.sticky-top {
    position: fixed;
    top: 0;
    right: 14px;
    left: auto !important;
    width: auto;
    height: var(--v2-strip-h);
    line-height: var(--v2-strip-h);
    padding: 0 !important;
    margin: 0;
    background: transparent !important;
    color: #ffd479;
    font-size: 11px !important;
    font-style: normal;
    text-align: right;
    /* It is a readout, not a control. Without this it is a transparent
       fixed block lying across the strip, swallowing clicks meant for the
       palette swatches underneath it. */
    pointer-events: none;
    z-index: 704;
}

/* Both, so a squeezed bar is 34 tall AND the page reserves 34 for it. The
   script overwrites --v2-strip-h with the measured height the moment the bar
   wraps; --v2-strip-min is the floor it never goes below. */
@media (max-width: 1100px) {
    :root { --v2-strip-min: 34px; --v2-strip-h: 34px; }
    .v2-strip-toggle { width: 30px; right: 4px; }
}

/* On a phone the strip is exactly wide enough for the two switches and
   nothing else, so the session readout would sit on top of the palette
   dots. It is the least important thing here. */
@media (max-width: 900px) {
    body.has-topstrip #sessionInfo.sticky-top { display: none !important; }
}

/* The preview ribbon belongs under the strip, not behind it. */
body.has-topstrip .v2-preview-bar { top: 34px; z-index: 702; }

/* ===================================================================
   .demo-closed-bar -- the bar on every page of a closed demo
   -------------------------------------------------------------------
   SiteSettings.SiteDemoClosed; markup in Site.Master. Here rather than
   site-v2.css because it has to show in BOTH looks. It floats across
   the MIDDLE of the window (21 Sep 2026) and stays there while
   the page scrolls, so it never fights the strip, the ribbon or the
   header for the top.

   pointer-events: none is load-bearing: the bar lies over the sign-in
   boxes on /Login, and System has to be able to click through it to get
   in and untick the setting. Slightly see-through for the same reason.
   =================================================================== */
.demo-closed-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9998;
    padding: 22px 16px;
    background: rgba(138, 28, 28, .9);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    pointer-events: none;
}
/* The sign-in page only: the middle of the window is where the password box
   is, so the bar drops to the bottom there. Class from SiteMaster.DemoClosedBodyClass. */
body.demo-closed-signin .demo-closed-bar { top: auto; bottom: 0; transform: none; }


/* ===================================================================
   .btn-solid -- an <a> that reads as a solid button
   -------------------------------------------------------------------
   Every client-*.css carries a blanket

       a { color: var(--theme-link-color) !important; }

   and it is linked AFTER this file, so an anchor dressed up as a button
   came out with the theme's LINK colour sitting on its dark fill --
   dark green on dark green under the pounamu palettes, which is what
   "View Share Transaction Report" looked like on /ShareRegistration.

   An inline style="color:#fff" does NOT rescue it: an !important author
   declaration outranks a non-important inline one. A class does, because
   important declarations are ordered by specificity first, and (0,1,0)
   beats the type selector's (0,0,1) -- load order never comes into it.

   So: any anchor that is really a button gets this class, and never an
   inline colour. Keep positional bits (margins) inline; keep the skin
   here.
   =================================================================== */
.btn-solid,
.btn-solid:link,
.btn-solid:visited,
.btn-solid:hover,
.btn-solid:focus,
.btn-solid:active {
    display: inline-block;
    padding: 7px 14px;
    background: #1b5e20;
    color: #fff !important;
    border: 0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
    cursor: pointer;
}

.btn-solid:hover,
.btn-solid:focus {
    background: #2e7d32;
}

/* Sits beside a normal WebForms <asp:Button>, so it has to match its height. */
.btn-solid--sm {
    padding: 6px 12px;
}


/* ===================================================================
   #gridTopScroll -- the horizontal scrollbar ABOVE a wide GridView
   -------------------------------------------------------------------
   7 Sep 2026: "need a scroll bar at the top of the list, like
   there is at the bottom of the list". A grid wider than the page had
   one scrollbar, under its last row: reading the right-hand columns of
   the FIRST row meant scrolling to the bottom of the page, dragging,
   and coming back up.

   Built and kept in step by Scripts/25_06_02_gridview.js, which is what
   every page with a #gridScrollWrapper loads (AuditPage, AdminGrantList,
   AdminGrantPay, AdminGrantPayNew, SubscriptionAudit, GrantsDraft,
   Distribution, the verifier list).

   IT IS HERE AND NOT IN THE CLIENT THEMES ON PURPOSE. Each client-*.css
   carries its own copy of the #gridScrollWrapper scrollbar rules -- ten
   near-identical blocks, which is exactly how one site ends up with a
   scrollbar the others have not got. This file is loaded by every site,
   so one block covers the fleet; the colours come from the theme's own
   variables, so it still looks like each site.

   The height is 18px to match the ::-webkit-scrollbar height those
   blocks set. Nothing here is !important: no client theme names this
   element, so there is nothing to beat.
   =================================================================== */
#gridTopScroll {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 18px;
    margin-bottom: 3px;
    /* Firefox and Edge/IE: show a real bar, in the theme's colours. */
    scrollbar-width: auto;
    scrollbar-color: var(--theme-accent, #02516e) rgba(0, 0, 0, .07);
}

#gridTopScrollInner {
    height: 1px;
}

#gridTopScroll::-webkit-scrollbar {
    display: block;
    height: 18px;
    width: auto;
}

#gridTopScroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .07);
    border-radius: 9px;
}

#gridTopScroll::-webkit-scrollbar-thumb {
    background: var(--theme-accent, #02516e);
    border-radius: 9px;
    /* The border is the track colour showing through, which is what makes the
       thumb read as a thumb rather than as a filled bar. */
    border: 3px solid transparent;
    background-clip: padding-box;
}

#gridTopScroll::-webkit-scrollbar-thumb:hover {
    background: var(--theme-accent-alt, var(--theme-accent, #02516e));
    background-clip: padding-box;
}

/* =====================================================================
   CLASSIC HEADER WORDMARK -- a site with no logo file on disk.

   The classic header used to emit its four <img> tags whatever was on
   disk, so a client with no artwork drew the browser's broken-image icon
   and the alt text "homepage-logo" in the top-left corner of every page.
   Site.Master now draws the trust's name instead when the file is missing
   (Utils.HasClientLogo), and this is what makes that name look like a
   wordmark rather than a stray link.

   Shared, not per-client: every theme reaches it the moment a site has no
   logo, and ten client stylesheets duplicating the same six rules is the
   trap this file exists to avoid. Colours come from the theme variables,
   so it reads correctly on a light header and on a dark one.
   ===================================================================== */
#Top_bar #logo.logo-wordmark {
    display: inline-block;
    padding: 18px 0;
    font-family: var(--theme-font-family, "Open Sans"), "Segoe UI", Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.2px;
    /* The nav text colour, not the heading colour: this sits ON the header
       band, and several clients run a dark band with a light menu. */
    color: var(--theme-menu-text, #444) !important;
    text-decoration: none !important;
    /* No image to bound the height, so give the anchor the same vertical
       room the logo images had or the bar collapses around it. */
    min-height: 60px;
}

#Top_bar #logo.logo-wordmark:hover {
    color: var(--theme-menu-hover, var(--theme-accent, #02516e)) !important;
    text-decoration: none !important;
}

@media only screen and (max-width: 767px) {
    #Top_bar #logo.logo-wordmark {
        font-size: 17px;
        min-height: 44px;
        padding: 12px 0;
    }
}

/* ========================================================================
   ADMIN BUTTONS -- the one place a new screen's buttons should come from.

   WHY THIS EXISTS. Four screens in a row have each had to fight the same
   fight and win it separately (AGM r2500, Grants r2522, and before them the
   yellow inline styles in AdminGrant.aspx.cs and site-v2.css's .smallButton).
   Every look styles bare buttons with !important of its own:

     client-*.css   button, input[type=submit], input[type=button]
                    { background-color: var(--theme-button-bg) !important;
                      border: 2px solid !important; border-radius: 2px
                      !important; padding: 7px 18px !important }      (0,1,1)
     base.css       .button-stroke button,
                    .button-stroke input[type=submit]
                    { background: transparent !important }            (0,2,1)
     site-v2.css    body.chrome-v2 input[type=submit]
                    { background-color / border-radius / padding /
                      font-size / font-weight !important }            (0,2,1)

   A page-local .my-button class is (0,1,0) and loses to all three EVEN WITH
   !important, so a screen that does not know this ships buttons that all
   look identical -- primary, secondary and destructive alike -- and small
   round controls come out as little empty boxes. That is not a theory: it is
   what "Clear everything" looked like next to "Import these owners", and
   what the "?" chips looked like on the Grants screen.

   HOW IT WINS. #Content is one ID, which beats every rule above outright no
   matter what order the stylesheets load in (this file loads BEFORE
   client-*.css and site-v2.css, so equal specificity would lose). Every
   admin page puts its content inside #Content -- Site.Master's MainContent
   placeholder sits there -- so the anchor reaches all of them and nothing
   else. Each rule then re-states EVERY property a theme forces: background,
   colour, border, radius, padding, size, weight, shadow and the hover lift.
   Leave one out and the theme keeps that one, which is how filter pills came
   out as 2px-radius rectangles.

   OPT-IN ON PURPOSE. This deliberately does NOT restyle bare <button> across
   the site. Hand-written buttons in this codebase mean custom UI carrying
   their own styling -- the NZ Post lookup icon, the helper's controls, modal
   closes -- and restyling those turned the NZ Post icon into a solid gold
   block once already (site-v2.css, ss1). A screen asks for this by name.

   HOW TO USE IT. Nothing else needed -- no page CSS, no inline styles:

     <asp:Button CssClass="admin-btn admin-btn-primary" Text="Save" />
     <asp:Button CssClass="admin-btn"                   Text="Start again" />
     <asp:Button CssClass="admin-btn admin-btn-danger"  Text="Delete" />
     <asp:Button CssClass="admin-btn admin-btn-caution" Text="Turn off" />
     <button class="admin-btn admin-btn-small">Undo</button>
     <button class="admin-btn admin-btn-plain">Show more</button>
     <button class="admin-dot" title="What does this do?">?</button>
     <button class="admin-chip on">Everyone</button>

   Colour follows the trust through --theme-heading-color / --theme-accent.
   The destructive red and the caution amber do NOT: they mean "this one is
   different", and must not turn into a trust's brand colour.

   The AGM screens and the Grants screen use these (r2524). What is left in
   agm.css and AdminGrant.aspx is only what is genuinely theirs -- the door's
   bigger "Mark present", the monospace token pill -- and each is written as
   ".admin-btn.agm-mark" / ".admin-chip.placeholder-chip" so it outranks the
   rule it modifies instead of tying with it and depending on which
   stylesheet loads last. Write a modifier the same way.

   The token pill was the exception to that and is no longer: both pages had
   written the same .placeholder-chip rule, so it is defined once below.
   ======================================================================== */

#Content .admin-btn {
    font-family: inherit;
    cursor: pointer;
    /* Works on <a> as well as <button> and <input>: several admin screens
       use a link where the action is "go to that page and download it".
       text-decoration has to be !important -- the themes underline links
       with one of their own. */
    display: inline-block;
    text-align: center;
    text-decoration: none !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #1b5e20) 28%, #fff) !important;
    background: #fff !important;
    color: var(--theme-heading-color, #1b5e20) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

#Content .admin-btn:hover {
    background: color-mix(in srgb, var(--theme-accent, #1b5e20) 8%, #fff) !important;
    transform: none !important;
}

#Content .admin-btn[disabled] {
    opacity: .5;
    cursor: default;
}

#Content .admin-btn-primary {
    background: var(--theme-heading-color, #1b5e20) !important;
    color: #fff !important;
    border-color: var(--theme-heading-color, #1b5e20) !important;
    font-weight: 600 !important;
}

/* Restates the background because .admin-btn:hover carries one class more
   than this rule does and would otherwise tint the primary on hover. */
#Content .admin-btn-primary:hover {
    background: var(--theme-heading-color, #1b5e20) !important;
    filter: brightness(1.12);
}

/* Destructive. Deliberately NOT theme-coloured. */
#Content .admin-btn-danger {
    background: #fff !important;
    color: #8c2b23 !important;
    border-color: #e0b4b0 !important;
    font-weight: 600 !important;
}

#Content .admin-btn-danger:hover {
    background: #fdf2f1 !important;
    color: #8c2b23 !important;
}

/* Careful, but not destructive: switching a feature off, taking something
   out of use, anything reversible that still deserves a second look. Amber
   is this codebase's existing word for that -- see .agm-note.warn -- and
   like the destructive red it does NOT follow the trust's colour, because
   it has to keep meaning "careful" on a site whose brand IS amber. */
#Content .admin-btn-caution {
    background: #fff !important;
    color: #6b4a00 !important;
    border-color: #e8c98a !important;
    font-weight: 600 !important;
}

#Content .admin-btn-caution:hover {
    background: #fff7e8 !important;
    color: #6b4a00 !important;
}

/* A button that should read as a LINK: "Show more criteria", "Choose fields",
   "Show the matrix". No box at all -- it sits in a sentence or under a table
   and a bordered button there reads as a second action when it is really a
   disclosure. Three screens had written this by hand and none of them reached
   the screen: "background: none; border: none" without !important loses to
   every look. */
#Content .admin-btn-plain {
    background: transparent !important;
    border: 0 !important;
    color: var(--theme-heading-color, #1b5e20) !important;
    padding: 2px 2px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

#Content .admin-btn-plain:hover {
    background: transparent !important;
    color: var(--theme-heading-color, #1b5e20) !important;
    text-decoration: underline !important;
    transform: none !important;
}

/* The quiet correction beside a main action -- Undo, Remove, Cancel. */
#Content .admin-btn-small {
    font-size: 12px !important;
    padding: 5px 11px !important;
    border-radius: 7px !important;
    color: #5f7167 !important;
    border-color: #cfd9d3 !important;
}

#Content .admin-btn-small:hover {
    background: #f4f7f5 !important;
    color: #b3261e !important;
    border-color: #e0b4b0 !important;
}

/* Small round "?" that opens an explainer. The theme's forced 7px/18px
   padding inside an 18px circle is what produced the empty boxes with a
   speck in the corner, so width, height and padding all have to be held. */
#Content .admin-dot {
    width: 18px !important;
    height: 18px !important;
    min-width: 0 !important;
    /* The touch rule below sets min-height:44px on every #Content button.
       Held here, or an 18px circle is drawn as a 44px-tall oval. The phone
       gets a proper round tap target instead -- see the media block. */
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #1b5e20) 35%, #fff) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--theme-heading-color, #1b5e20) !important;
    font: 700 11px/16px Arial, sans-serif !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none !important;
}

#Content .admin-dot:hover,
#Content .admin-dot:focus {
    background: var(--theme-heading-color, #1b5e20) !important;
    color: #fff !important;
    border-color: var(--theme-heading-color, #1b5e20) !important;
    transform: none !important;
    outline: none;
}

/* Filter pills. The selected one is often the only thing on screen saying
   which list you are looking at, so .on beating the theme matters most. */
#Content .admin-chip {
    font-family: inherit;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #1b5e20) 25%, #fff) !important;
    background: #fff !important;
    color: var(--theme-heading-color, #1b5e20) !important;
    box-shadow: none !important;
}

#Content .admin-chip:hover {
    background: color-mix(in srgb, var(--theme-accent, #1b5e20) 8%, #fff) !important;
    transform: none !important;
}

#Content .admin-chip.on {
    background: var(--theme-heading-color, #1b5e20) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-color: var(--theme-heading-color, #1b5e20) !important;
}

#Content .admin-chip.on:hover {
    background: var(--theme-heading-color, #1b5e20) !important;
    filter: brightness(1.12);
}

/* The token pill in a wording editor -- {FirstName} and the rest. It is an
   admin-chip like any other; the only thing different about it is that a
   token is code the admin copies exactly, so it is monospace and an l is not
   an outline of a 1.

   Written with one class more than the rule it modifies so it outranks it
   rather than tying. It lives here rather than in the two pages that draw
   these chips (Grants and Email templates) because it was written twice,
   identically, and the copies had already started to drift.

   The .mono in the markup is not decoration -- site-v2.css forces the trust
   face onto everything inside #Content in the New look, with a selector that
   scores one id and five classes. No page rule beats that. .mono is the
   exclusion it honours, next to the icon-font ones. */
#Content .admin-chip.placeholder-chip {
    padding: 4px 10px !important;
    border-radius: 14px !important;
    font-family: Consolas, monospace !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* On a phone the rule further up this file puts every #Content button and
   submit input at 16px. That is right for a full-size button -- a bigger tap
   target -- and wrong for the three controls that are meant to read as
   small, so those are put back.

   The element name is here for the INPUT case only. That rule reaches an
   <input> as "#Content input[type=submit]", which counts an attribute and so
   outranks a plain "#Content .admin-chip"; naming the element matches it, and
   this block sits later in the same file, so the tie falls this way. A bare
   <button> needs none of that -- one class already outranks one element --
   but both are named so the pair cannot drift apart. */
@media only screen and (max-width: 767px) {
    #Content input.admin-btn-small,
    #Content button.admin-btn-small { font-size: 12px !important; }
    #Content input.admin-chip,
    #Content button.admin-chip { font-size: 13px !important; }
    /* Bigger and still round, rather than 18px and hard to hit. */
    #Content input.admin-dot,
    #Content button.admin-dot {
        width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        font-size: 13px !important;
        line-height: 26px !important;
    }
}

/* ========================================================================
   MY GRANTS (Grants/GrantsDraft.aspx) and the applicant's own application
   page (23 Sep 2026).

   The member's grant list used to be the office grid with a search panel;
   it is now cards: what they can start, what they have not sent, what the
   office has. The application page gets a status pill in its heading, the
   shared button family on its four buttons (set in Grants/GrantBase.aspx.cs)
   and a "Before you send" checklist (Scripts/grant-apply.js).

   Anchored on #Content for the same reason as the buttons above: every
   client stylesheet colours every <a> with !important and the new look
   forces p/li/label, so the cards are built from div/span/b/i and every
   colour on an anchor is restated here with the ID in front.
   ======================================================================== */

#Content .mg-wrap h2 { margin-bottom: 6px; }
#Content .mg-section { margin: 26px 0 0; }
#Content .mg-section h3 {
    text-transform: none !important;
    font-size: 17px !important;
    margin: 0 0 4px !important;
    letter-spacing: 0 !important;
}
#Content .mg-sub, #Content .mg-foot, #Content .mg-empty {
    color: #5a6b67;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px;
    max-width: 70ch;
}
#Content .mg-foot { margin-top: 26px; font-size: 13px; }
#Content .mg-empty {
    background: #fff;
    border: 1px dashed #cfd8d5;
    border-radius: 10px;
    padding: 18px 20px;
}

/* --- start cards: one per grant the menu offers --- */
#Content .mg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}
#Content a.mg-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e2e8e6;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 36, 32, .07), 0 4px 14px rgba(16, 36, 32, .05);
    text-decoration: none !important;
    color: #2a3532 !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#Content a.mg-card:hover, #Content a.mg-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(16, 36, 32, .10), 0 10px 28px rgba(16, 36, 32, .12);
    border-color: color-mix(in srgb, var(--theme-accent, #1b5e20) 45%, #e2e8e6);
    text-decoration: none !important;
}
#Content .mg-ico {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 10px;
    font-size: 24px; font-weight: 500; line-height: 1;
    background: color-mix(in srgb, var(--theme-accent, #1b5e20) 12%, transparent);
    color: var(--theme-accent, #1b5e20);
}
#Content .mg-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#Content a.mg-card .mg-txt b {
    font-size: 15.5px; font-weight: 600 !important; line-height: 1.3;
    color: color-mix(in srgb, var(--theme-heading-color, #1b5e20) 55%, #16211f) !important;
}
#Content a.mg-card .mg-txt i {
    font-style: normal; font-size: 13.5px; line-height: 1.45;
    color: #5a6b67 !important;
}
#Content a.mg-card .mg-go {
    margin-top: 8px; align-self: flex-start;
    background: var(--theme-heading-color, #1b5e20);
    color: #fff !important;
    font-size: 13px; font-weight: 600; line-height: 1.3;
    padding: 7px 14px; border-radius: 8px;
}

/* --- one application --- */
#Content .mg-list { display: grid; gap: 12px; }
#Content .mg-app {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 18px;
    align-items: start;
    background: #fff;
    border: 1px solid #e2e8e6;
    border-left: 4px solid #cfd8d5;
    border-radius: 10px;
    padding: 16px 20px;
}
#Content .mg-app-draft { border-left-color: #d9b34a; }
#Content .mg-app-sent  { border-left-color: var(--theme-accent, #1b5e20); }
#Content .mg-app-info  { border-left-color: #e08a00; }
#Content .mg-app-wait  { border-left-color: #8fa4a0; }
#Content .mg-app-ok, #Content .mg-app-paid { border-left-color: #2e8b57; }
#Content .mg-app-no    { border-left-color: #b3423a; }
#Content .mg-app-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#Content .mg-app-title {
    font-size: 16px; font-weight: 600; line-height: 1.3;
    color: color-mix(in srgb, var(--theme-heading-color, #1b5e20) 55%, #16211f);
}
#Content .mg-facts { font-size: 13.5px; color: #5a6b67; line-height: 1.45; }
#Content .mg-steps { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: #5a6b67; }
#Content .mg-steps b { font-weight: 600 !important; color: #2a3532 !important; }
#Content .mg-hint {
    font-size: 13.5px; line-height: 1.5; color: #4a5f5b;
    background: #f6f8f7; border-radius: 8px; padding: 8px 12px; margin-top: 2px;
}
#Content .mg-app-info .mg-hint { background: #fff6e5; color: #6b4a00; }
#Content .mg-actions { display: flex; gap: 8px; align-items: center; padding-top: 2px; }
@media (max-width: 600px) {
    #Content .mg-app { grid-template-columns: 1fr; }
    #Content .mg-actions { padding-top: 4px; }
}

/* --- status pill: cards, and the heading of the application page --- */
#Content .mg-pill {
    display: inline-block;
    align-self: flex-start;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef1f0;
    color: #3b4a47 !important;
    vertical-align: middle;
    white-space: nowrap;
}
#Content .mg-pill-draft { background: #f7efd6; color: #6b5210 !important; }
#Content .mg-pill-sent  { background: color-mix(in srgb, var(--theme-accent, #1b5e20) 14%, #fff); color: var(--theme-heading-color, #1b5e20) !important; }
#Content .mg-pill-info  { background: #fff0d6; color: #7a4a00 !important; }
#Content .mg-pill-wait  { background: #e9eeed; color: #3b4a47 !important; }
#Content .mg-pill-ok    { background: #e3f3e8; color: #1f6b3a !important; }
#Content .mg-pill-paid  { background: #1f6b3a; color: #fff !important; }
#Content .mg-pill-no    { background: #fdecea; color: #8c2b23 !important; }
#Content h2 .mg-pill, #Content h3 .mg-pill { margin-left: 8px; position: relative; top: -2px; }

/* The "I agree, apply" button on every client's grant landing page: the main
   action on that page, so it wears the primary look without a page edit. */
#Content input[id$='_ApplyButton'] {
    font-family: inherit;
    cursor: pointer;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    border: 1px solid var(--theme-heading-color, #1b5e20) !important;
    background: var(--theme-heading-color, #1b5e20) !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
#Content input[id$='_ApplyButton']:hover { filter: brightness(1.12); transform: none !important; }

/* --- "Before you send" checklist above the application's buttons --- */
#Content .ga-check {
    max-width: 560px;
    margin: 6px 0 18px;
    background: #fff;
    border: 1px solid #e2e8e6;
    border-radius: 10px;
    padding: 14px 18px 12px;
}
#Content .ga-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#Content .ga-head b { font-size: 15px; font-weight: 600 !important; color: #2a3532 !important; }
#Content .ga-count { font-size: 12.5px; color: #5a6b67; white-space: nowrap; }
#Content .ga-count-all { color: #1f6b3a; font-weight: 600; }
#Content .ga-bar { height: 6px; border-radius: 999px; background: #e9eeed; margin: 10px 0 12px; overflow: hidden; }
#Content .ga-bar span { display: block; height: 100%; border-radius: 999px; background: var(--theme-accent, #1b5e20); transition: width .3s ease; }
#Content .ga-rows { display: flex; flex-direction: column; gap: 7px; }
#Content .ga-row { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; }
#Content .ga-tick {
    width: 20px; height: 20px; flex: 0 0 auto;
    border-radius: 50%; border: 1.5px solid #b9c6c2;
    display: grid; place-items: center;
    font-size: 12px; line-height: 1; color: #fff;
}
#Content .ga-done .ga-tick { background: #2e8b57; border-color: #2e8b57; }
#Content .ga-done .ga-label { color: #5a6b67; text-decoration: line-through; text-decoration-color: #b9c6c2; }
#Content .ga-todo .ga-label { color: #2a3532; }
#Content .ga-check a.ga-jump {
    margin-left: auto;
    font-size: 12.5px; font-weight: 600;
    color: var(--theme-heading-color, #1b5e20) !important;
    text-decoration: none !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #1b5e20) 28%, #fff);
    border-radius: 999px; padding: 2px 10px;
}
#Content .ga-check a.ga-jump:hover { background: color-mix(in srgb, var(--theme-accent, #1b5e20) 8%, #fff); }
#Content .ga-note { font-size: 13px; line-height: 1.5; color: #5a6b67; margin-top: 12px; }
#Content .ga-note b { font-weight: 600 !important; color: #2a3532 !important; }

/* ========================================================================
   REGISTRATION STEPS (23 Sep 2026). Drawn by RedirectControl.GetStepTracker
   above the heading of every section page (personal information, hapu and
   marae, whakapapa, shares, documents, declaration): done, here, to come.
   An <ol> so a screen reader reads "list, 5 items" and "current step"; the
   theme's list and li rules are put back to nothing under #Content, and the
   new look's forced 15px on li is overridden on the spans inside.
   ======================================================================== */

#Content ol.rs-steps {
    list-style: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 0;
    margin: 6px 0 16px !important;
    padding: 0 !important;
    max-width: none !important;
}
#Content ol.rs-steps li.rs-step {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 18px 0 0 !important;
    position: relative;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #5a6b67 !important;
}
/* the line between one step and the next */
#Content ol.rs-steps li.rs-step:not(:last-child)::after {
    content: "";
    width: 10px;
    height: 2px;
    margin-left: 8px;
    background: #cfd8d5;
    border-radius: 2px;
}
#Content ol.rs-steps li.rs-done:not(:last-child)::after { background: var(--theme-accent, #1b5e20); }
#Content ol.rs-steps .rs-n {
    width: 26px; height: 26px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 2px solid #cfd8d5;
    background: #fff;
    font-size: 12.5px; font-weight: 600; line-height: 1;
    color: #5a6b67;
}
#Content ol.rs-steps .rs-t { font-size: 13px; white-space: nowrap; }
#Content ol.rs-steps li.rs-done .rs-n {
    background: var(--theme-accent, #1b5e20);
    border-color: var(--theme-accent, #1b5e20);
    color: #fff;
}
#Content ol.rs-steps li.rs-now .rs-n {
    border-color: var(--theme-heading-color, #1b5e20);
    color: var(--theme-heading-color, #1b5e20);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #1b5e20) 18%, transparent);
}
#Content ol.rs-steps li.rs-now .rs-t {
    font-weight: 600;
    color: color-mix(in srgb, var(--theme-heading-color, #1b5e20) 55%, #16211f);
}
#Content ol.rs-steps li.rs-todo .rs-t { color: #7c8b87; }
/* On a phone only the current step keeps its name; the rest are numbered
   dots, so six steps fit on one line. */
@media (max-width: 600px) {
    #Content ol.rs-steps li.rs-step { padding-right: 10px !important; }
    #Content ol.rs-steps li.rs-step:not(:last-child)::after { width: 6px; margin-left: 2px; }
    #Content ol.rs-steps li.rs-step:not(.rs-now) .rs-t { display: none; }
    #Content ol.rs-steps .rs-t { white-space: normal; }
}

/* Registration form on a wide screen: the boxes were the theme's 230px, which
   cut an email address in half. Let them use the column, up to a sane width;
   the phone rules above already do this below 768px. */
@media (min-width: 768px) {
    #Content table.reg-form { width: 100% !important; max-width: 860px; }
    #Content table.reg-form td:first-child { width: 42%; padding-right: 14px; }
    #Content table.reg-form input[type="text"],
    #Content table.reg-form input[type="email"],
    #Content table.reg-form input[type="password"],
    #Content table.reg-form input[type="tel"],
    #Content table.reg-form select,
    #Content table.reg-form textarea {
        width: 100% !important;
        max-width: 440px !important;
        min-width: 230px;
        box-sizing: border-box !important;
    }
}

/* ========================================================================
   FIRST IMPRESSIONS (23 Sep 2026): the sign-in form as a card with the
   other way in and the way to register under it (Account/Login.aspx), and
   the new-registration screen's three steps (RegistrationPage.aspx,
   divheadingNewReg). Both pages keep their own logic; this is only how
   they sit on the page.
   ======================================================================== */

#Content .auth-form {
    background: #fff;
    border: 1px solid #e2e8e6;
    border-radius: 12px;
    padding: 22px 24px 18px;
    box-shadow: 0 1px 3px rgba(16, 36, 32, .07), 0 4px 14px rgba(16, 36, 32, .05);
    box-sizing: border-box;
}
#Content .auth-alt { max-width: 460px; margin-top: 14px; }
#Content .auth-alt p {
    margin: 0 0 6px !important;
    font-size: 14px !important;
    color: #5a6b67 !important;
    line-height: 1.5;
}
#Content .auth-alt p a { font-weight: 600; }

/* --- new registration: three steps, then the boxes --- */
#Content .nr-how {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin: 10px 0 14px;
    max-width: 900px;
}
#Content .nr-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e2e8e6;
    border-radius: 10px;
    padding: 16px 18px;
}
#Content .nr-n {
    width: 30px; height: 30px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--theme-accent, #1b5e20);
    color: #fff;
    font-size: 14px; font-weight: 600; line-height: 1;
}
#Content .nr-step > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#Content .nr-step b {
    font-size: 15px; font-weight: 600 !important; line-height: 1.3;
    color: color-mix(in srgb, var(--theme-heading-color, #1b5e20) 55%, #16211f) !important;
}
#Content .nr-step i {
    font-style: normal; font-size: 13.5px; line-height: 1.5;
    color: #5a6b67;
}
#Content .nr-step i b { font-size: 13.5px; }
#Content .nr-note {
    max-width: 900px;
    margin: 0 0 18px;
    padding: 10px 14px;
    border-left: 4px solid var(--theme-accent, #1b5e20);
    background: color-mix(in srgb, var(--theme-accent, #1b5e20) 7%, #fff);
    border-radius: 0 8px 8px 0;
    font-size: 14px; line-height: 1.5; color: #2a3532;
}
#Content .nr-note b { font-weight: 600 !important; }

/* ========================================================================
   SCREEN HELP (23 Sep 2026). The small "Help" button on an admin screen and
   the panel it opens (Code/AdminHelp.cs ScreenHelp, Scripts/screen-help.js).
   The panel is moved to <body> by the script, so these rules are written
   against body rather than #Content; the button stays where the page put it.
   Every client stylesheet colours links and fills buttons with !important,
   so the few properties that matter are restated with a class in front.
   ======================================================================== */

#Content button.sh-open, body button.sh-open {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px 12px 5px 6px !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #1b5e20) 30%, #fff) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--theme-heading-color, #1b5e20) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transform: none !important;
}
#Content button.sh-open:hover, body button.sh-open:hover {
    background: color-mix(in srgb, var(--theme-accent, #1b5e20) 8%, #fff) !important;
}
body .sh-open .sh-q {
    width: 20px; height: 20px;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: var(--theme-accent, #1b5e20);
    color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1;
}

html.sh-lock, html.sh-lock body { overflow: hidden !important; }

body .sh-shade {
    position: fixed; inset: 0;
    background: rgba(16, 24, 22, .38);
    z-index: 100000;
    opacity: 0;
    transition: opacity .2s ease;
}
body .sh-shade.is-open { opacity: 1; }
body .sh-shade[hidden], body .sh-panel[hidden] { display: none !important; }

body .sh-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(460px, 100vw);
    z-index: 100001;
    display: flex; flex-direction: column;
    background: #fff;
    box-shadow: -8px 0 32px rgba(16, 24, 22, .22);
    transform: translateX(104%);
    transition: transform .2s ease;
    font-family: var(--theme-font-family, "Open Sans"), "Segoe UI", Arial, sans-serif;
    color: #24352f;
    font-size: 14.5px;
    line-height: 1.6;
    text-align: left;
}
body .sh-panel.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) {
    body .sh-panel, body .sh-shade { transition: none; }
}

body .sh-panel .sh-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px 14px 22px;
    border-bottom: 1px solid #e4ebe8;
    background: color-mix(in srgb, var(--theme-accent, #1b5e20) 6%, #fff);
}
body .sh-panel .sh-title { font-size: 16px; font-weight: 700; color: var(--theme-heading-color, #1b5e20); }
body .sh-panel button.sh-x {
    width: 34px !important; height: 34px !important;
    min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important;
    border: 1px solid #d5dfdb !important; border-radius: 50% !important;
    background: #fff !important; color: #3b4a47 !important;
    font-size: 20px !important; font-weight: 400 !important; line-height: 1 !important;
    box-shadow: none !important; cursor: pointer; transform: none !important;
}
body .sh-panel button.sh-x:hover { background: #f1f5f3 !important; }

body .sh-panel .sh-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 22px 20px; overscroll-behavior: contain; }
body .sh-panel .sh-more {
    margin: 20px 0 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #6a7a75;
}
body .sh-panel details.sh-art { border-bottom: 1px solid #edf1ef; }
body .sh-panel details.sh-art > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 26px 12px 0;
    position: relative;
    font-size: 15px; font-weight: 600; line-height: 1.35;
    color: #1f2f2a;
}
body .sh-panel details.sh-art > summary::-webkit-details-marker { display: none; }
body .sh-panel details.sh-art > summary::after {
    content: "+";
    position: absolute; right: 2px; top: 10px;
    font-size: 20px; font-weight: 400; color: var(--theme-accent, #1b5e20);
}
body .sh-panel details.sh-art[open] > summary::after { content: "\2212"; }
body .sh-panel details.sh-art:first-of-type > summary { font-size: 18px; padding-top: 16px; }
body .sh-panel .sh-in { padding: 0 0 16px; }
body .sh-panel .sh-in p { margin: 0 0 10px; }
body .sh-panel .sh-in ul, body .sh-panel .sh-in ol { margin: 0 0 12px; padding-left: 22px; }
/* The theme takes the bullets off every list; put them back in here. */
body .sh-panel .sh-in ul, body .sh-panel .hp-see ul { list-style: disc outside !important; }
body .sh-panel .sh-in ol { list-style: decimal outside !important; }
body .sh-panel .sh-in li { margin: 0 0 6px; display: list-item !important; }
body .sh-panel .sh-in h4, body .sh-panel .sh-in h4.hp-h {
    margin: 16px 0 6px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: var(--theme-heading-color, #1b5e20);
}
body .sh-panel .sh-in .hp-note {
    margin: 0 0 12px; padding: 8px 12px;
    border-left: 4px solid #d98a00; background: #fdf6e8; border-radius: 0 6px 6px 0;
}
body .sh-panel .sh-in code { font-size: 13px; background: #f2f5f4; padding: 0 3px; border-radius: 3px; }
body .sh-panel .sh-where { font-size: 13px; color: #55655f; margin: 0 0 10px; }
body .sh-panel .sh-where b { font-weight: 700; color: #3b4a47; margin-right: 4px; }
body .sh-panel .sh-flag {
    display: inline-block; margin: 0 0 10px; padding: 2px 10px; border-radius: 999px;
    background: #f7efd6; color: #6b5210; font-size: 12px; font-weight: 600;
}
body .sh-panel .hp-see { margin: 12px 0 4px; padding: 10px 12px; background: #f6f8f7; border-radius: 8px; }
body .sh-panel .hp-see .hp-fk {
    display: block; margin-bottom: 4px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6a7a75;
}
body .sh-panel .hp-see ul { margin: 0; padding-left: 18px; }
body .sh-panel .hp-see li { margin: 0 0 3px; }
body .sh-panel .sh-ref { margin-top: 10px; font-size: 12px; color: #7a8a85; font-family: Consolas, "Courier New", monospace; }
body .sh-panel a {
    color: var(--theme-link-color, #1b5e20) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
body .sh-panel a:hover { color: var(--theme-link-hover, #1b5e20) !important; }
body .sh-panel .sh-foot {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    padding: 12px 22px 16px;
    border-top: 1px solid #e4ebe8;
    font-size: 13px; color: #6a7a75;
}
body .sh-panel .sh-foot a { font-weight: 600; }
@media print { body .sh-panel, body .sh-shade, .sh-open { display: none !important; } }

/* ========================================================================
   BULK EMAIL STEPS (10 Oct 2026). The numbered steps across the top of the
   five bulk email screens, with Opt-In Audit and the Help button on the
   right (Code/BulkEmailSteps.cs). Every property the themes force on lists,
   list items and links is restated with #Content in front: the New look sets
   15px and its ink colour on every li !important, and every client stylesheet
   colours and underlines every link !important. Each color-mix() has a plain
   colour before it, for a browser too old to read it.
   ======================================================================== */
#Content nav.bes {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 18px;
    margin: 4px 0 18px;
}
#Content nav.bes ol.bes-steps {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 0 !important; padding: 0 !important;
    list-style: none !important;
    /* The New look caps every list at a reading width (805px measured at 1366
       wide), which put step 6 on a line of its own with room to spare. */
    max-width: none !important;
}
#Content nav.bes ol.bes-steps > li {
    display: flex; margin: 0 !important; padding: 0 !important;
    list-style: none !important; background: none !important;
    font-size: 13px !important; line-height: 1.3 !important;
}
#Content nav.bes ol.bes-steps > li::before { content: none !important; display: none !important; }
#Content nav.bes a.bes-step {
    display: inline-flex !important; align-items: center; gap: 7px;
    padding: 5px 13px 5px 5px !important;
    border: 1px solid #cfd9d3 !important;
    border-color: color-mix(in srgb, var(--theme-accent, #1b5e20) 28%, #fff) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--theme-heading-color, #1b5e20) !important;
    font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important;
    text-decoration: none !important; white-space: nowrap;
    box-shadow: none !important;
}
#Content nav.bes a.bes-step:hover, #Content nav.bes a.bes-step:focus-visible {
    background: #f4f7f5 !important;
    background: color-mix(in srgb, var(--theme-accent, #1b5e20) 8%, #fff) !important;
    color: var(--theme-heading-color, #1b5e20) !important;
    text-decoration: none !important;
}
#Content nav.bes a.bes-step .bes-n {
    width: 22px; height: 22px; flex: 0 0 22px;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: #e8efeb;
    background: color-mix(in srgb, var(--theme-accent, #1b5e20) 14%, #fff);
    color: var(--theme-heading-color, #1b5e20);
    font-size: 12px; font-weight: 700; line-height: 1;
}
#Content nav.bes a.bes-step .bes-done { color: #1e7d32; font-weight: 700; }
/* The screen you are on: filled. On /BulkEmail that is steps 3, 4 and 5. */
#Content nav.bes a.bes-step.is-here {
    background: var(--theme-heading-color, #1b5e20) !important;
    border-color: var(--theme-heading-color, #1b5e20) !important;
    color: #fff !important;
}
#Content nav.bes a.bes-step.is-here:hover, #Content nav.bes a.bes-step.is-here:focus-visible {
    background: var(--theme-heading-color, #1b5e20) !important;
    color: #fff !important;
    filter: brightness(1.12);
}
#Content nav.bes a.bes-step.is-here .bes-n { background: #fff; color: var(--theme-heading-color, #1b5e20); }
#Content nav.bes a.bes-step.is-here .bes-done { color: #fff; }
#Content nav.bes .bes-more { display: flex; align-items: center; gap: 12px; margin-left: auto; }
#Content nav.bes a.bes-side {
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--theme-link-color, #1b5e20) !important;
}
#Content nav.bes a.bes-side.is-here { color: #3b4a47 !important; text-decoration: none !important; cursor: default; }
/* Words for a screen reader only ("Step 3:", "(done)"). */
#Content nav.bes .bes-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 767px) {
    #Content nav.bes ol.bes-steps { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    #Content nav.bes a.bes-step { width: 100%; white-space: normal; }
    #Content nav.bes .bes-more { width: 100%; justify-content: space-between; margin-left: 0; }
}
@media print { #Content nav.bes { display: none !important; } }