/* ===================================================================
   Next Power Gen, site stylesheet

   Ann's words on 18 August 2026: like some of the classic banking
   systems, gets to the point, simple rather than colourful. Leon on
   14 September: base it on the Wyfold Shipping look, clean, cards,
   minimal.

   The structure is ported from the Wyfold Shipping site.css: a deep
   navy bar, a light canvas, white cards with a soft shadow, one blue
   accent for links and the primary button, and headings in wide spaced
   uppercase. Every colour is a token below, copied from
   Agent/Build/Branding/nextpowergen-theme.css, so a change to the
   brand is a change to the values and nothing else.

   The type is Open Sans, on Leon's word of 20 September 2026: a plain,
   standard face rather than the Montserrat carried over from Wyfold.
   The wordmark artwork is still drawn in Montserrat, which is a picture
   and needs no font on the page.

   First pass. Ann has not seen it yet.
   =================================================================== */

/* Open Sans is served from the portal, never from Google's servers. */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../lib/fonts/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../lib/fonts/open-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Navy: the bar, headings, table headers, the logo tile */
    --npg-navy:          #0b1f3a;
    --npg-navy-mid:      #14304f;
    --npg-navy-soft:     #1e3f66;

    /* Blue: links, the primary button, focus rings, active nav */
    --npg-blue:          #1d5fd1;
    --npg-blue-deep:     #164aa6;
    --npg-blue-bright:   #4c8df5;
    --npg-tint-blue:     #e8f0fd;

    /* Spark: one highlight per screen at most */
    --npg-spark:         #f2a900;
    --npg-tint-spark:    #fdf3dc;

    /* Text and lines */
    --npg-text:          #1d2433;
    --npg-text-muted:    #637083;
    --npg-text-faint:    #97a1b0;
    --npg-line:          #e3e8f0;
    --npg-line-soft:     #eef2f7;
    --npg-surface:       #ffffff;
    --npg-canvas:        #f4f6fa;

    /* Status. A colour always means the same thing everywhere. */
    --npg-green:         #2f8a55;   /* GO, approved, done, active */
    --npg-tint-green:    #e7f5ec;
    --npg-amber:         #b7791f;   /* HOLD, in progress, awaiting, expiring soon */
    --npg-tint-amber:    #fdf3dc;
    --npg-red:           #c9302c;   /* critical, rejected, overdue, past due */
    --npg-tint-red:      #fdecec;
    --npg-slate:         #6b7686;   /* PENDING, not started, draft, inactive */
    --npg-tint-slate:    #eef1f5;

    /* Risk ratings on the register and the dashboard */
    --npg-risk-low:      var(--npg-slate);
    --npg-risk-medium:   var(--npg-blue);
    --npg-risk-high:     var(--npg-amber);
    --npg-risk-critical: var(--npg-red);

    /* Map pins by technology on the portfolio map. Read by npg-map.js and the key under the map.
       Red and green are left out so a pin is never mistaken for a status. */
    --npg-tech-solar:    #e0a100;
    --npg-tech-wind:     #4c8df5;
    --npg-tech-csp:      #d9622b;
    --npg-tech-battery:  #7b5cc4;
    --npg-tech-gas:      #1f9aa0;
    --npg-tech-coal:     #3b4452;
    --npg-tech-hydro:    #164aa6;
    --npg-tech-diesel:   #8a5a2b;
    --npg-tech-biomass:  #6f8f2f;
    --npg-tech-nuclear:  #b0457f;
    --npg-tech-other:    var(--npg-slate);

    /* Shape */
    --npg-radius:        10px;
    --npg-radius-sm:     6px;
    --npg-radius-pill:   999px;
    --npg-shadow:        0 1px 2px rgba(11, 31, 58, 0.05), 0 4px 16px rgba(11, 31, 58, 0.07);
    --npg-shadow-hover:  0 2px 4px rgba(11, 31, 58, 0.06), 0 12px 28px rgba(11, 31, 58, 0.13);
    --npg-shadow-lg:     0 18px 50px rgba(11, 31, 58, 0.22);

    /* Type. Open Sans throughout, with the system font behind it if it ever fails to load. */
    --npg-font-head:     'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
    --npg-font-body:     'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

    /* Bootstrap reads these */
    --bs-body-bg:        var(--npg-canvas);
    --bs-body-color:     var(--npg-text);
    --bs-border-color:   var(--npg-line);
    --bs-primary:        var(--npg-blue);
    --bs-link-color:     var(--npg-blue);
}

/* --- Base --- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 15px;
    }
}

body {
    margin-bottom: 64px;
    font-family: var(--npg-font-body);
    background-color: var(--npg-canvas);
    color: var(--npg-text);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--npg-blue);
}

a:hover {
    color: var(--npg-blue-deep);
}

/* --- The bar --- */
/* Deep navy with a faint lift towards the right. */
.navbar-portal {
    background: linear-gradient(100deg, var(--npg-navy) 0%, var(--npg-navy-mid) 100%);
    padding-top: 0;
    padding-bottom: 0;
    min-height: 58px;
    box-shadow: 0 2px 14px rgba(11, 31, 58, 0.18);
}

/* The white logo is the name and the only way back to the dashboard. */
.navbar-portal-brand {
    display: flex;
    align-items: center;
    padding: 11px 24px 11px 0;
    margin-right: 0;
}

.npg-brand-logo {
    height: 36px;
    width: auto;
    display: block;
}

.navbar-portal-brand:hover .npg-brand-logo,
.navbar-portal-brand:focus .npg-brand-logo {
    opacity: 0.88;
}

.navbar-portal-link {
    color: rgba(255, 255, 255, 0.78) !important;
    font-family: var(--npg-font-head);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 20px 14px !important;
    white-space: nowrap;
    position: relative;
}

.navbar-portal-link:hover,
.navbar-portal-link:focus,
.navbar-portal-link.is-active {
    color: #ffffff !important;
}

/* A blue rule under the link you point at, rather than a filled box. */
.navbar-portal-link::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--npg-blue-bright);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.navbar-portal-link:hover::before,
.navbar-portal-link:focus::before,
.navbar-portal-link.is-active::before {
    transform: scaleX(1);
}

.navbar-portal .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-portal .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-portal-dropdown {
    background-color: var(--npg-navy);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--npg-radius-sm);
    box-shadow: var(--npg-shadow-lg);
    min-width: 200px;
    padding: 6px 0;
    margin-top: 0 !important;
}

.navbar-portal-dropdown-item {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.85rem;
    padding: 9px 18px;
}

.navbar-portal-dropdown-item:hover,
.navbar-portal-dropdown-item:focus,
.navbar-portal-dropdown-item.active {
    color: #ffffff !important;
    background-color: var(--npg-navy-soft);
}

.navbar-portal-dropdown .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.12);
}

.navbar-portal-dropdown .dropdown-header {
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--npg-font-head);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.navbar-brand {
    white-space: normal;
}

/* The signed in person's company, small under their name on the right of the bar. */
.npg-user-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.25;
}

.npg-user-company {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
}

@media (max-width: 991.98px) {
    .navbar-portal-link {
        padding: 12px 4px !important;
    }

    .navbar-portal-link::before {
        display: none;
    }

    .navbar-portal .navbar-collapse {
        padding-bottom: 10px;
    }
}

/* --- Headings --- */
/* The page heading is set like the wordmark: bold, uppercase and widely spaced. */
h4 {
    font-family: var(--npg-font-head);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--npg-navy);
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
}

h5 {
    font-family: var(--npg-font-head);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--npg-navy);
}

h6 {
    font-family: var(--npg-font-head);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--npg-navy);
}

/* Under the page heading, a short blue rule rather than a line across the page. Only the
   rule straight after a page heading gets this. A rule anywhere else stays a faint line. */
main hr {
    border: 0;
    border-top: 1px solid var(--npg-line);
    opacity: 1;
    margin: 1.4rem 0;
}

main h4 + hr {
    border-top: 0;
    height: 3px;
    width: 44px;
    border-radius: 2px;
    background: var(--npg-blue-bright);
    margin: 0 0 1.6rem 0;
}

/* A small spaced label above a heading. */
.npg-eyebrow {
    display: block;
    font-family: var(--npg-font-head);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--npg-blue);
    margin-bottom: 4px;
}

/* --- Focus --- */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--npg-blue-bright);
    box-shadow: 0 0 0 0.2rem rgba(29, 95, 209, 0.18);
    outline: none;
}

/* --- Buttons --- */
/* One primary button per page, blue. Every other button is secondary. */
.btn {
    border-radius: var(--npg-radius-sm);
    font-weight: 600;
    transition: all 0.18s ease;
}

.btn-sm {
    font-size: 0.8rem;
    padding: 7px 15px;
}

.btn-sm.p-1 {
    padding: 5px !important;
}

.btn-primary {
    color: #ffffff;
    background: var(--npg-blue);
    border: 1px solid var(--npg-blue);
    box-shadow: 0 2px 8px rgba(29, 95, 209, 0.24);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #ffffff;
    background: var(--npg-blue-deep);
    border-color: var(--npg-blue-deep);
    box-shadow: 0 4px 14px rgba(29, 95, 209, 0.32);
}

.btn-secondary {
    color: var(--npg-text);
    background: var(--npg-surface);
    border: 1px solid var(--npg-line);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: var(--npg-blue-deep);
    background: var(--npg-tint-blue);
    border-color: rgba(29, 95, 209, 0.35);
}

.btn-danger {
    color: #ffffff;
    background: var(--npg-red);
    border: 1px solid var(--npg-red);
}

.btn-danger:hover,
.btn-danger:focus {
    color: #ffffff;
    background: #a52622;
    border-color: #a52622;
}

/* --- Form controls --- */
.form-control,
.form-select {
    border-color: var(--npg-line);
    border-radius: var(--npg-radius-sm);
    font-size: 0.875rem;
    color: var(--npg-text);
    background-color: var(--npg-surface);
}

.form-control::placeholder {
    color: var(--npg-text-faint);
}

.form-control[readonly],
.form-control:disabled {
    background-color: var(--npg-canvas);
    color: var(--npg-text);
}

.form-label,
.col-form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--npg-text);
}

.form-check-input:checked {
    background-color: var(--npg-blue);
    border-color: var(--npg-blue);
}

.form-text {
    color: var(--npg-text-muted);
    font-size: 0.78rem;
}

.text-danger {
    color: var(--npg-red) !important;
    font-size: 0.8rem;
}

.text-muted {
    color: var(--npg-text-muted) !important;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* A group heading inside a long horizontal form, lined up with the input column. */
.npg-form-group-heading {
    font-family: var(--npg-font-head);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--npg-navy);
    padding-bottom: 8px;
    margin: 8px 0 14px 0;
    border-bottom: 1px solid var(--npg-line);
}

/* --- Cards --- */
/* A white card on the canvas with a soft shadow and no border. Every dashboard tile and
   every panel is one of these. Bootstrap's .card looks the same. */
.npg-card,
.card {
    background: var(--npg-surface);
    border: none;
    border-radius: var(--npg-radius);
    box-shadow: var(--npg-shadow);
}

.npg-card {
    padding: 22px 24px;
    margin-bottom: 18px;
}

/* A small uppercase heading with a short blue rule under it. */
.npg-card-heading,
.card-title {
    font-family: var(--npg-font-head);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--npg-navy);
    margin-bottom: 18px;
    padding-bottom: 10px;
    position: relative;
}

.npg-card-heading::after,
.card-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: var(--npg-blue-bright);
}

/* A card heading with an action on the right, such as Add task. */
.npg-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.npg-card-head .npg-card-heading {
    margin-bottom: 18px;
}

/* A line of plain fact inside a card: a muted label on the left, the value on the right. */
.npg-rows {
    margin: 0;
}

.npg-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--npg-line-soft);
    font-size: 0.875rem;
}

.npg-row:last-child {
    border-bottom: none;
}

.npg-row-label {
    color: var(--npg-text-muted);
    font-size: 0.8rem;
    flex: 0 0 auto;
}

.npg-row-value {
    font-weight: 600;
    color: var(--npg-text);
    text-align: right;
    overflow-wrap: anywhere;
}

.npg-row-value.is-empty {
    color: var(--npg-text-faint);
    font-weight: 400;
}

.npg-muted {
    color: var(--npg-text-muted);
    font-size: 0.82rem;
}

/* A quiet written panel in place of something that cannot show, such as a map. */
.npg-panel-note {
    background: var(--npg-tint-slate);
    border-radius: var(--npg-radius-sm);
    color: var(--npg-text-muted);
    padding: 22px 18px;
    text-align: center;
    font-size: 0.875rem;
}

/* --- Figure tiles --- */
/* A row of cards, each with a small muted label and a large figure. */
/* The figures across the top of a dashboard. One low strip rather than a row of separate cards:
   the cells sit on a hairline grid, which is quieter to look at and takes far less height.
   Two tiles wide on a phone, then three, then all of them in one line on a wide screen. */
.npg-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--npg-line);
    border-radius: var(--npg-radius);
    box-shadow: var(--npg-shadow);
    overflow: hidden;
    margin-bottom: 18px;
}

@media (min-width: 768px) {
    .npg-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .npg-tiles.is-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Wide enough for the whole strip in one line: six figures, or eight on a project. */
@media (min-width: 1280px) {
    .npg-tiles.is-three {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (min-width: 1500px) {
    .npg-tiles {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

.npg-tile {
    background: var(--npg-surface);
    padding: 12px 14px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.npg-tile-label {
    font-family: var(--npg-font-head);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--npg-text-muted);
    line-height: 1.3;
}

.npg-tile-figure {
    font-family: var(--npg-font-head);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--npg-navy);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.npg-tile-figure.is-text {
    font-size: 0.95rem;
    line-height: 1.3;
}

.npg-tile-figure.is-blue   { color: var(--npg-blue); }
.npg-tile-figure.is-amber  { color: var(--npg-amber); }
.npg-tile-figure.is-red    { color: var(--npg-red); }
.npg-tile-figure.is-green  { color: var(--npg-green); }

.npg-tile-unit {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--npg-text-faint);
    margin-left: 4px;
}

.npg-tile-under {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--npg-text-muted);
}

/* --- Progress --- */
/* A small bar with the percentage beside it. */
.npg-progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    width: 100%;
}

.npg-progress-track {
    flex: 1 1 auto;
    height: 6px;
    background: var(--npg-line);
    border-radius: var(--npg-radius-pill);
    overflow: hidden;
    min-width: 50px;
}

.npg-progress-bar {
    display: block;
    height: 100%;
    background: var(--npg-blue);
    border-radius: var(--npg-radius-pill);
}

.npg-progress.is-done .npg-progress-bar {
    background: var(--npg-green);
}

.npg-progress-value {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--npg-text);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
}

/* --- Status dots and pills --- */
/* A status is a small coloured dot followed by its name, never a filled badge.
   Green is GO, approved or done. Amber is HOLD, in progress or expiring. Slate is PENDING or
   not started. Red is critical, rejected or overdue. Risk ratings: Low slate, Medium blue,
   High amber, Critical red. */
.npg-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--npg-font-head);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--npg-text);
    white-space: nowrap;
}

.npg-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--npg-slate);
    flex-shrink: 0;
}

.npg-status.is-go            { color: var(--npg-green); }
.npg-status.is-go::before    { background: var(--npg-green); box-shadow: 0 0 0 3px rgba(47, 138, 85, 0.16); }
.npg-status.is-hold          { color: var(--npg-amber); }
.npg-status.is-hold::before  { background: var(--npg-amber); box-shadow: 0 0 0 3px rgba(183, 121, 31, 0.16); }
.npg-status.is-pending       { color: var(--npg-slate); }
.npg-status.is-pending::before { background: var(--npg-slate); }
.npg-status.is-critical      { color: var(--npg-red); }
.npg-status.is-critical::before { background: var(--npg-red); box-shadow: 0 0 0 3px rgba(201, 48, 44, 0.16); }

.npg-status.is-low           { color: var(--npg-risk-low); }
.npg-status.is-low::before   { background: var(--npg-risk-low); }
.npg-status.is-medium        { color: var(--npg-risk-medium); }
.npg-status.is-medium::before { background: var(--npg-risk-medium); }
.npg-status.is-high          { color: var(--npg-risk-high); }
.npg-status.is-high::before  { background: var(--npg-risk-high); box-shadow: 0 0 0 3px rgba(183, 121, 31, 0.16); }

/* An outlined pill for a short tag such as a technology. */
.npg-pill {
    display: inline-block;
    font-family: var(--npg-font-head);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--npg-radius-sm);
    border: 1px solid currentColor;
    white-space: nowrap;
    color: var(--npg-navy-soft);
    background: var(--npg-tint-blue);
}

.npg-pill.is-slate { color: var(--npg-slate); background: var(--npg-tint-slate); }
.npg-pill.is-amber { color: var(--npg-amber); background: var(--npg-tint-amber); }
.npg-pill.is-red   { color: var(--npg-red);   background: var(--npg-tint-red); }
.npg-pill.is-green { color: var(--npg-green); background: var(--npg-tint-green); }

/* --- Tables --- */
/* A navy header with white uppercase text, plain white rows, no stripes. On a narrow screen
   the table scrolls sideways inside its own rounded card. */
.table-wrapper,
.table-responsive {
    background: var(--npg-surface);
    border-radius: var(--npg-radius);
    box-shadow: var(--npg-shadow);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    font-size: 0.85rem;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    width: 100%;
}

.table thead th {
    background: var(--npg-navy);
    color: #ffffff;
    font-family: var(--npg-font-head);
    font-weight: 700;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    padding: 11px 12px;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
}

.table thead th a {
    color: #ffffff;
    text-decoration: none;
}

.table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
    border-top: 1px solid var(--npg-line-soft);
    border-bottom: none;
    color: var(--npg-text);
    background: var(--npg-surface);
}

.table td.cell-nowrap {
    white-space: nowrap;
}

/* Figures line up down the column. */
.table td.cell-num,
.table th.cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The thing the eye looks for first on a row, such as a project name. It is a link to whatever
   that row's action is, so it is set in the ordinary weight and only shows itself on hover. */
.table td.cell-name {
    font-weight: 400;
    color: var(--npg-text);
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--npg-surface);
    --bs-table-bg-type: var(--npg-surface);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--npg-tint-blue) !important;
    color: var(--npg-text);
}

/* A marked row, such as a project behind schedule. */
.table tbody tr.is-flagged > td:first-child {
    box-shadow: inset 3px 0 0 var(--npg-red);
}

/* A table sitting inside a card: no second shadow. */
.npg-card .table-wrapper {
    box-shadow: 0 0 0 1px var(--npg-line);
}

/* --- Sorting --- */
.table.sortable thead th {
    cursor: pointer;
    user-select: none;
    padding-right: 24px;
}

.table.sortable thead th:hover {
    background: var(--npg-navy-soft);
}

.sortable th::after {
    content: '\2195';
    position: absolute;
    right: 9px;
    opacity: 0.4;
    font-size: 0.7rem;
}

.sortable th.sort-asc::after {
    content: '\2191';
    opacity: 1;
    color: var(--npg-blue-bright);
}

.sortable th.sort-desc::after {
    content: '\2193';
    opacity: 1;
    color: var(--npg-blue-bright);
}

.table.sortable thead th.no-sort {
    cursor: default;
    padding-right: 12px;
}

.table.sortable thead th.no-sort:hover {
    background: var(--npg-navy);
}

.sortable th.no-sort::after {
    content: '';
}

/* --- Row actions --- */
.table-action-link {
    color: var(--npg-blue);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.8rem;
    white-space: nowrap;
}

.table-action-link:hover {
    color: var(--npg-blue-deep);
    text-decoration: underline;
}

/* An action on a row that changes something, so it is a button in a posted form, styled as the links beside it. */
.table-action-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--npg-blue);
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
}

.table-action-button:hover {
    color: var(--npg-blue-deep);
    text-decoration: underline;
}

.table-action-delete {
    color: var(--npg-red);
}

.table-action-delete:hover {
    color: #a52622;
}

/* A row action that posts is a button made to look exactly like the links beside it. */
.table-action-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--npg-blue);
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
}

.table-action-button:hover {
    color: var(--npg-blue-deep);
    text-decoration: underline;
}

.action-icon {
    width: 18px;
    height: 18px;
    margin: 0 4px;
    opacity: 0.7;
}

/* --- The list toolbar --- */
/* Search and filters on the left, PDF, Excel and the one Add button on the right. On a
   phone the two groups stack and each takes the full width. */
.npg-toolbar {
    flex-wrap: wrap;
    gap: 10px;
}

.npg-toolbar > div {
    flex-wrap: wrap;
}

.npg-toolbar .form-control-sm,
.npg-toolbar .form-select-sm {
    border-radius: var(--npg-radius-sm);
}

.npg-toolbar .npg-toolbar-select {
    width: 180px;
}

@media (max-width: 575.98px) {
    .npg-toolbar > div {
        width: 100%;
    }

    .npg-toolbar input[type="text"] {
        flex: 1 1 150px;
        width: auto !important;
        min-width: 0;
    }

    .npg-toolbar .npg-toolbar-select {
        flex: 1 1 100%;
        width: 100% !important;
    }

    .npg-toolbar > div:last-child {
        justify-content: flex-end;
    }
}

/* --- Tabs --- */
/* The tab strip on a project: small spaced uppercase words with a blue rule under the open one. */
.npg-tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--npg-line);
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.npg-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 2px 10px 2px;
    color: var(--npg-text-muted);
    text-decoration: none;
    font-family: var(--npg-font-head);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.npg-tab:hover {
    color: var(--npg-navy);
}

.npg-tab.is-on {
    color: var(--npg-navy);
    font-weight: 700;
    border-bottom-color: var(--npg-blue-bright);
}

/* --- Layout helpers --- */
.border-top {
    border-top: 1px solid var(--npg-line);
}

.border-bottom {
    border-bottom: 1px solid var(--npg-line);
}

.box-shadow {
    box-shadow: var(--npg-shadow);
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 64px;
    font-size: 0.78rem;
    color: var(--npg-text-faint);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #ffffff;
    background-color: var(--npg-blue);
}

.alert {
    font-size: 0.9rem;
    border-radius: var(--npg-radius-sm);
}

.toast.bg-success {
    background-color: var(--npg-green) !important;
}

/* --- Modals --- */
.modal-content {
    border: none;
    border-radius: var(--npg-radius);
    box-shadow: var(--npg-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--npg-line);
    padding: 16px 22px;
}

.modal-title {
    font-family: var(--npg-font-head);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--npg-navy);
}

.modal-footer {
    border-top: 1px solid var(--npg-line);
    padding: 12px 22px;
}

/* --- The PDF preview modal --- */
/* Every PDF in the portal opens here first: a preview, Download and Close. */
.pdf-modal-body {
    position: relative;
    height: 75vh;
    background: var(--npg-tint-slate);
}

.pdf-modal-body iframe {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.pdf-modal-loading {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--npg-text-muted);
    margin: 0;
}

#pdfModal.is-loaded .pdf-modal-loading {
    display: none;
}

@media (max-width: 767.98px) {
    .pdf-modal-body {
        height: 68vh;
    }

    #pdfModal .modal-footer {
        justify-content: flex-end !important;
    }
}

/* --- The login page --- */
/* The stacked logo centred above one card, on the canvas colour. */
.npg-login {
    background-color: var(--npg-canvas);
}

.npg-login-wrap {
    max-width: 400px;
    margin: 0 auto;
    padding: 48px 0 24px 0;
}

.npg-login-logo {
    display: block;
    width: 200px;
    max-width: 70%;
    height: auto;
    margin: 0 auto 28px auto;
}

.npg-login-card {
    padding: 28px;
}

.npg-login-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    font-size: 0.85rem;
}

.login-container {
    max-width: 400px;
    margin: 0 auto;
}

/* A small table inside a half width card, such as the fixed cost lines. */
.table.npg-table-compact {
    font-size: 0.8rem;
}

.table.npg-table-compact thead th,
.table.npg-table-compact tbody td {
    padding: 7px 8px;
}

/* --- Gates on a project --- */
/* Each gate is a card whose heading opens and closes it. The current gate has a blue edge. */
.npg-gate {
    padding: 0;
    overflow: hidden;
}

.npg-gate.is-current {
    box-shadow: inset 3px 0 0 var(--npg-blue), var(--npg-shadow);
}

.npg-gate-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    background: none;
    border: 0;
    padding: 18px 24px;
    text-align: left;
    cursor: pointer;
}

.npg-gate-head:hover {
    background: var(--npg-canvas);
}

.npg-gate-head .npg-card-heading {
    padding-bottom: 0;
}

.npg-gate-head .npg-card-heading::after {
    display: none;
}

.npg-gate-title {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.npg-gate-meta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.82rem;
}

.npg-gate-progress {
    width: 150px;
}

.npg-gate-body {
    padding: 0 24px 22px 24px;
    border-top: 1px solid var(--npg-line-soft);
    padding-top: 16px;
}

/* On a narrow screen the task table scrolls sideways rather than squeezing the description into a column of single words. */
.npg-gate .table td:nth-child(2) {
    min-width: 220px;
}

/* A status inside a tile may run to two lines rather than past the card's edge. */
.npg-tile .npg-status {
    white-space: normal;
    align-items: baseline;
}

.npg-tile .npg-status::before {
    position: relative;
    top: 1px;
}

/* On a phone the tiles sit two across, so the dashboard is not a long single column. */
@media (max-width: 575.98px) {
    .npg-tile {
        padding: 11px 12px 12px;
    }

    .npg-tile-figure {
        font-size: 1.35rem;
    }

    .npg-tile-figure.is-text {
        font-size: 0.98rem;
    }
}

/* The six gates as rows on a project dashboard. Each row opens the Gates and Tasks tab. */
.npg-gate-rows {
    display: flex;
    flex-direction: column;
}

.npg-gate-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 130px 90px;
    gap: 10px;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--npg-line-soft);
    color: var(--npg-text);
    text-decoration: none;
    font-size: 0.86rem;
    border-radius: var(--npg-radius-sm);
}

.npg-gate-row:last-child {
    border-bottom: none;
}

.npg-gate-row:hover {
    background: var(--npg-tint-blue);
    color: var(--npg-text);
}

.npg-gate-row.is-current {
    box-shadow: inset 3px 0 0 var(--npg-blue);
    background: var(--npg-canvas);
}

.npg-gate-row-name strong {
    color: var(--npg-navy);
    margin-right: 4px;
}

@media (max-width: 575.98px) {
    .npg-gate-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .npg-gate-row-date,
    .npg-gate-row-progress {
        grid-column: 1 / -1;
    }
}

/* A setting or file name in help text, as a quiet tag rather than the browser's pink. */
code {
    font-size: 0.85em;
    color: var(--npg-navy-soft);
    background: var(--npg-tint-blue);
    padding: 1px 5px;
    border-radius: 4px;
}

/* --- Maps --- */
/* A map container, and the written panel it shows when there is no map to draw. */
.npg-map-wrap {
    position: relative;
}

.npg-map {
    width: 100%;
    border-radius: var(--npg-radius-sm);
    overflow: hidden;
    background: var(--npg-tint-slate);
}

.npg-map.npg-map-empty,
.npg-map:has(> .npg-map-empty-inner) {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--npg-tint-slate);
    border: 1px dashed var(--npg-line);
}

.npg-map-empty-inner {
    max-width: 440px;
    padding: 18px;
    text-align: center;
}

.npg-map-empty-heading {
    font-family: var(--npg-font-head);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--npg-navy);
    margin-bottom: 4px;
}

.npg-map-empty-detail {
    font-size: 0.82rem;
    color: var(--npg-text-muted);
    margin: 0;
}

.npg-map-pin {
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 13px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(11, 31, 58, 0.35);
    color: #ffffff;
    font-family: var(--npg-font-head);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.npg-map-bubble {
    font-family: var(--npg-font-body);
    font-size: 0.85rem;
    max-width: 240px;
}

.npg-map-bubble-title {
    font-weight: 700;
    color: var(--npg-navy);
}

.npg-map-bubble-detail {
    color: var(--npg-text-muted);
    margin-top: 2px;
}

.npg-map-bubble-link {
    display: inline-block;
    margin-top: 6px;
    font-weight: 600;
}

/* Every decision made on a gate, newest first. */
.npg-history {
    list-style: none;
    padding: 8px 0 0 0;
    margin: 0;
    font-size: 0.84rem;
}

.npg-history li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 5px 0;
    border-bottom: 1px solid var(--npg-line-soft);
}

.npg-history li:last-child {
    border-bottom: none;
}

/* A small form opened in place, such as a task or gate editor. */
.npg-inline-form {
    background: var(--npg-canvas);
    border-radius: var(--npg-radius-sm);
    padding: 12px;
}

@media (max-width: 575.98px) {
    .npg-gate-head,
    .npg-gate-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .npg-gate-meta {
        gap: 10px;
    }
}

/* --- Portfolio dashboard --- */
.npg-text-red   { color: var(--npg-red); }
.npg-text-amber { color: var(--npg-amber); }

/* A column of long text kept to one line, with the rest of it in the tooltip, so a wide table still fits. */
.table td.cell-clip {
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A column of longer text that keeps a readable width when the table scrolls on a phone. */
.table td.cell-wide {
    min-width: 260px;
}

/* A row that opens its record when clicked anywhere. */
.table tbody tr.npg-row-link {
    cursor: pointer;
}

.npg-plain-link {
    color: inherit;
    text-decoration: none;
}

.npg-plain-link:hover {
    color: var(--npg-blue);
    text-decoration: underline;
}

/* A small dot in a technology's pin colour. The colour is passed in as --npg-dot. */
.npg-tech-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 0;
    background: var(--npg-dot, var(--npg-tech-other));
}

.npg-map-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--npg-text-muted);
}

/* Bars drawn with the theme colours, one per row, such as projects at each gate. */
.npg-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.npg-bar-row {
    display: grid;
    grid-template-columns: minmax(120px, 44%) 1fr 28px;
    align-items: center;
    gap: 12px;
    font-size: 0.84rem;
}

.npg-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.npg-bar-track {
    height: 14px;
    background: var(--npg-line-soft);
    border-radius: var(--npg-radius-pill);
    overflow: hidden;
}

.npg-bar-fill {
    display: block;
    height: 100%;
    background: var(--npg-blue);
    border-radius: var(--npg-radius-pill);
}

.npg-bar-fill.is-done {
    background: var(--npg-green);
}

.npg-bar-value {
    font-family: var(--npg-font-head);
    font-weight: 700;
    text-align: right;
    color: var(--npg-navy);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .npg-bar-row {
        grid-template-columns: 1fr 28px;
        gap: 4px 12px;
    }

    .npg-bar-label {
        grid-column: 1 / -1;
        white-space: normal;
    }
}

/* ===================================================================
   Layout, set under Configure, Layout: the menu dark or light, along
   the top or down the side. The body carries npg-menu-dark or
   npg-menu-light, and npg-layout-top or npg-layout-side.
   =================================================================== */

:root {
    --npg-side-w: 236px;
    --npg-rail-w: 66px;
}

/* --- Light Mode, the bar along the top --- */
/* White, with a shadow under it so the page can see where the menu ends, and navy words. */
.navbar-portal.navbar-portal-light {
    background: #ffffff;
    box-shadow: 0 1px 0 var(--npg-line), 0 4px 18px rgba(11, 31, 58, 0.09);
}

.navbar-portal-light .navbar-portal-link {
    color: var(--npg-text-muted) !important;
}

.navbar-portal-light .navbar-portal-link:hover,
.navbar-portal-light .navbar-portal-link:focus,
.navbar-portal-light .navbar-portal-link.is-active {
    color: var(--npg-navy) !important;
}

.navbar-portal-light .navbar-portal-link::before {
    background: var(--npg-blue);
}

.navbar-portal-light .npg-user-company {
    color: var(--npg-text-muted);
}

.navbar-portal-light .navbar-toggler {
    border-color: var(--npg-line);
}

.navbar-portal-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2811, 31, 58, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-portal-light .navbar-portal-dropdown {
    background-color: #ffffff;
    border: 1px solid var(--npg-line);
}

.navbar-portal-light .navbar-portal-dropdown-item {
    color: var(--npg-text) !important;
}

.navbar-portal-light .navbar-portal-dropdown-item:hover,
.navbar-portal-light .navbar-portal-dropdown-item:focus,
.navbar-portal-light .navbar-portal-dropdown-item.active {
    color: var(--npg-blue-deep) !important;
    background-color: var(--npg-tint-blue);
}

.navbar-portal-light .navbar-portal-dropdown .dropdown-divider {
    border-color: var(--npg-line);
}

/* --- Side Layout, the frame --- */
body.npg-layout-side {
    margin-bottom: 0;
}

.npg-layout-side .npg-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.npg-layout-side .npg-main {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--npg-side-w);
    position: relative;
    min-height: 100vh;
    padding-top: 1.5rem;
    padding-bottom: 64px;
    transition: margin-left 0.2s ease;
}

/* --- The side menu, Dark Mode first --- */
.npg-sidebar {
    width: var(--npg-side-w);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, var(--npg-navy) 0%, var(--npg-navy-mid) 100%);
    box-shadow: 2px 0 14px rgba(11, 31, 58, 0.18);
    /* Visible, so the Configure, company and name menus can open out of the foot. The list of
       items scrolls on its own. */
    overflow: visible;
    transition: width 0.2s ease;
}

.npg-side-brand-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 64px;
    padding: 12px 12px 12px 16px;
    flex-shrink: 0;
    position: relative;
}

.npg-side-brand-row::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--npg-blue-bright), transparent);
    opacity: 0.55;
}

.npg-side-brand {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
}

.npg-side-brand .npg-brand-logo {
    height: 30px;
}

/* The bolt on its own, for the folded menu. */
.npg-brand-mark {
    display: none;
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

.npg-rail-toggle {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--npg-radius-sm);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    transition: background 0.15s ease, color 0.15s ease;
}

.npg-rail-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.npg-rail-toggle svg {
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease;
}

.npg-side-nav {
    flex: 1 1 auto;
    padding: 14px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.npg-side-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 10px;
    margin-bottom: 2px;
    border: none;
    border-radius: var(--npg-radius-sm);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--npg-font-head);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.npg-side-item:hover,
.npg-side-item:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* On navy the page you are on turns white. */
.npg-side-item.active,
.npg-side-item.active:hover {
    background: #ffffff;
    color: var(--npg-navy);
    box-shadow: 0 2px 10px rgba(9, 20, 38, 0.28);
}

.npg-side-item.active .npg-side-icon {
    color: var(--npg-blue);
    opacity: 1;
}

.npg-side-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.85;
}

.npg-side-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.npg-side-caret {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: transform 0.18s ease;
}

.npg-side-dropup [aria-expanded="true"] > .npg-side-caret {
    transform: rotate(180deg);
}

.npg-side-foot {
    flex-shrink: 0;
    padding: 8px 10px 12px;
}

.npg-side-company,
.npg-side-configure {
    margin-bottom: 6px;
}

.npg-side-user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 8px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.npg-side-user:hover {
    background: rgba(255, 255, 255, 0.08);
}

.npg-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--npg-blue-bright), var(--npg-navy-soft));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--npg-font-head);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.npg-side-user-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.npg-side-user-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.npg-side-user-role {
    display: block;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The menus that open upward out of the foot. */
.npg-side-menu {
    min-width: 220px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    border: 1px solid var(--npg-line);
    border-radius: var(--npg-radius);
    box-shadow: var(--npg-shadow-lg);
    padding: 8px;
}

.npg-side-menu-head {
    font-family: var(--npg-font-head);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--npg-text-muted);
    padding: 4px 10px 8px;
}

.npg-side-menu .dropdown-item {
    border-radius: var(--npg-radius-sm);
    font-size: 0.85rem;
    padding: 8px 10px;
    color: var(--npg-text);
}

.npg-side-menu .dropdown-item:hover,
.npg-side-menu .dropdown-item:focus,
.npg-side-menu .dropdown-item.active {
    background: var(--npg-tint-blue);
    color: var(--npg-blue-deep);
}

.npg-side-menu .dropdown-item.active {
    font-weight: 600;
}

/* --- The side menu in Light Mode --- */
/* White, with a shadow down its edge and navy words. */
.npg-menu-light .npg-sidebar {
    background: #ffffff;
    box-shadow: 1px 0 0 var(--npg-line), 4px 0 18px rgba(11, 31, 58, 0.08);
}

.npg-menu-light .npg-side-brand-row::after {
    background: linear-gradient(90deg, var(--npg-blue), transparent);
    opacity: 0.35;
}

.npg-menu-light .npg-rail-toggle {
    background: var(--npg-tint-slate);
    color: var(--npg-text-muted);
}

.npg-menu-light .npg-rail-toggle:hover {
    background: var(--npg-line);
    color: var(--npg-navy);
}

.npg-menu-light .npg-side-nav {
    scrollbar-color: rgba(11, 31, 58, 0.16) transparent;
}

.npg-menu-light .npg-side-item {
    color: var(--npg-text-muted);
}

.npg-menu-light .npg-side-item:hover,
.npg-menu-light .npg-side-item:focus-visible {
    background: var(--npg-tint-slate);
    color: var(--npg-navy);
}

.npg-menu-light .npg-side-item.active,
.npg-menu-light .npg-side-item.active:hover {
    background: var(--npg-tint-blue);
    color: var(--npg-blue-deep);
    box-shadow: inset 3px 0 0 var(--npg-blue);
}

.npg-menu-light .npg-side-user {
    border-top-color: var(--npg-line);
}

.npg-menu-light .npg-side-user:hover {
    background: var(--npg-tint-slate);
}

.npg-menu-light .npg-side-user-name {
    color: var(--npg-navy);
}

.npg-menu-light .npg-side-user-role {
    color: var(--npg-text-muted);
}

/* --- Folded to its icons --- */
.npg-shell.npg-rail .npg-sidebar,
.npg-pre-collapsed .npg-sidebar {
    width: var(--npg-rail-w);
}

.npg-layout-side .npg-shell.npg-rail .npg-main,
.npg-pre-collapsed .npg-layout-side .npg-main {
    margin-left: var(--npg-rail-w);
}

.npg-shell.npg-rail .npg-side-label,
.npg-shell.npg-rail .npg-side-caret,
.npg-shell.npg-rail .npg-side-user-text,
.npg-pre-collapsed .npg-side-label,
.npg-pre-collapsed .npg-side-caret,
.npg-pre-collapsed .npg-side-user-text {
    display: none;
}

.npg-shell.npg-rail .npg-side-brand-row,
.npg-pre-collapsed .npg-side-brand-row {
    flex-direction: column;
    gap: 10px;
    padding: 14px 8px 12px;
}

.npg-shell.npg-rail .npg-side-brand-row::after,
.npg-pre-collapsed .npg-side-brand-row::after {
    left: 12px;
    right: 12px;
}

/* Folded, the wordmark does not fit, so the bolt takes its place. */
.npg-shell.npg-rail .npg-side-brand,
.npg-pre-collapsed .npg-side-brand {
    flex: none;
    justify-content: center;
}

.npg-shell.npg-rail .npg-brand-full,
.npg-pre-collapsed .npg-brand-full {
    display: none;
}

.npg-shell.npg-rail .npg-brand-mark,
.npg-pre-collapsed .npg-brand-mark {
    display: block;
}

.npg-shell.npg-rail .npg-rail-toggle svg,
.npg-pre-collapsed .npg-rail-toggle svg {
    transform: rotate(180deg);
}

.npg-shell.npg-rail .npg-side-nav,
.npg-shell.npg-rail .npg-side-foot,
.npg-pre-collapsed .npg-side-nav,
.npg-pre-collapsed .npg-side-foot {
    padding-left: 8px;
    padding-right: 8px;
}

.npg-shell.npg-rail .npg-side-item,
.npg-shell.npg-rail .npg-side-user,
.npg-pre-collapsed .npg-side-item,
.npg-pre-collapsed .npg-side-user {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
}

/* Folded, each icon names itself on hover. Placed by site.js against the window. */
.npg-rail-tip {
    position: fixed;
    transform: translateY(-50%);
    background: var(--npg-navy);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: var(--npg-radius-sm);
    box-shadow: var(--npg-shadow-lg);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 1200;
}

.npg-rail-tip.show {
    opacity: 1;
}

/* --- The bar that opens the side menu on a phone or tablet --- */
.npg-appbar,
.npg-scrim {
    display: none;
}

@media (max-width: 991.98px) {
    .npg-appbar {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 58px;
        padding: 0 16px;
        background: linear-gradient(100deg, var(--npg-navy) 0%, var(--npg-navy-mid) 100%);
        box-shadow: 0 2px 14px rgba(11, 31, 58, 0.18);
    }

    .npg-menu-light .npg-appbar {
        background: #ffffff;
        box-shadow: 0 1px 0 var(--npg-line), 0 4px 18px rgba(11, 31, 58, 0.09);
    }

    .npg-appbar-brand {
        padding: 0;
    }

    .npg-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 34px;
        flex-shrink: 0;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: var(--npg-radius-sm);
        color: #ffffff;
    }

    .npg-menu-light .npg-hamburger {
        border-color: var(--npg-line);
        color: var(--npg-navy);
    }

    .npg-hamburger svg {
        width: 18px;
        height: 18px;
    }

    .npg-scrim {
        position: fixed;
        inset: 0;
        background: rgba(11, 31, 58, 0.5);
        z-index: 1035;
    }

    .npg-drawer-open .npg-scrim {
        display: block;
    }

    /* The menu slides in over the page, always at full width. Folding is a desktop idea. */
    .npg-sidebar,
    .npg-shell.npg-rail .npg-sidebar,
    .npg-pre-collapsed .npg-sidebar {
        width: var(--npg-side-w);
        transform: translateX(-100%);
        transition: transform 0.22s ease-in-out;
        box-shadow: var(--npg-shadow-lg);
    }

    .npg-shell.npg-drawer-open .npg-sidebar {
        transform: translateX(0);
    }

    .npg-rail-toggle {
        display: none;
    }

    .npg-shell.npg-rail .npg-side-label,
    .npg-shell.npg-rail .npg-side-caret,
    .npg-shell.npg-rail .npg-side-user-text,
    .npg-pre-collapsed .npg-side-label,
    .npg-pre-collapsed .npg-side-caret,
    .npg-pre-collapsed .npg-side-user-text {
        display: block;
    }

    .npg-shell.npg-rail .npg-side-brand-row,
    .npg-pre-collapsed .npg-side-brand-row {
        flex-direction: row;
        padding: 12px 12px 12px 16px;
    }

    .npg-shell.npg-rail .npg-side-brand,
    .npg-pre-collapsed .npg-side-brand {
        flex: 1;
        justify-content: flex-start;
        width: auto;
    }

    .npg-shell.npg-rail .npg-brand-full,
    .npg-pre-collapsed .npg-brand-full {
        display: block;
    }

    .npg-shell.npg-rail .npg-brand-mark,
    .npg-pre-collapsed .npg-brand-mark {
        display: none;
    }

    .npg-shell.npg-rail .npg-side-item,
    .npg-shell.npg-rail .npg-side-user,
    .npg-pre-collapsed .npg-side-item,
    .npg-pre-collapsed .npg-side-user {
        justify-content: flex-start;
        gap: 11px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .npg-layout-side .npg-main,
    .npg-layout-side .npg-shell.npg-rail .npg-main,
    .npg-pre-collapsed .npg-layout-side .npg-main {
        margin-left: 0;
        padding-top: 0;
    }

    .npg-layout-side .npg-main > .container {
        margin-top: 1.25rem;
    }
}

@media print {
    .npg-sidebar,
    .npg-appbar,
    .npg-scrim {
        display: none !important;
    }

    .npg-layout-side .npg-main {
        margin-left: 0 !important;
    }
}

/* --- The choices on the Layout page --- */
.npg-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 575.98px) {
    .npg-choice-grid {
        grid-template-columns: 1fr;
    }
}

.npg-choice-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.npg-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--npg-line);
    border-radius: var(--npg-radius);
    background: var(--npg-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.npg-choice:hover {
    border-color: var(--npg-blue-bright);
}

.npg-choice-input:checked + .npg-choice {
    border-color: var(--npg-blue);
    box-shadow: 0 0 0 3px rgba(29, 95, 209, 0.16);
}

.npg-choice-input:focus-visible + .npg-choice {
    outline: 2px solid var(--npg-blue);
    outline-offset: 2px;
}

.npg-choice-name {
    font-family: var(--npg-font-head);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--npg-navy);
    margin-top: 6px;
}

.npg-choice-input:checked + .npg-choice .npg-choice-name::after {
    content: ' \2713';
    color: var(--npg-blue);
}

.npg-choice-note {
    font-size: 0.8rem;
    color: var(--npg-text-muted);
}

/* The small picture: a page with the menu drawn on it, across the top or down the side,
   navy or white. */
.npg-choice-picture {
    position: relative;
    display: block;
    height: 92px;
    border-radius: var(--npg-radius-sm);
    background: var(--npg-canvas);
    border: 1px solid var(--npg-line);
    overflow: hidden;
}

.npg-choice-menu {
    position: absolute;
    background: linear-gradient(170deg, var(--npg-navy), var(--npg-navy-mid));
}

.npg-choice-picture.is-light .npg-choice-menu {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(11, 31, 58, 0.16);
}

.npg-choice-picture.is-top .npg-choice-menu {
    left: 0;
    right: 0;
    top: 0;
    height: 18px;
}

.npg-choice-picture.is-side .npg-choice-menu {
    left: 0;
    top: 0;
    bottom: 0;
    width: 34px;
}

/* A white card on the page, standing for the content. */
.npg-choice-page {
    position: absolute;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(11, 31, 58, 0.1);
}

.npg-choice-picture.is-top .npg-choice-page {
    left: 14px;
    right: 14px;
    top: 30px;
    bottom: 10px;
}

.npg-choice-picture.is-side .npg-choice-page {
    left: 46px;
    right: 12px;
    top: 12px;
    bottom: 10px;
}