/*
 * The ScoutProgress theme, in one file.
 *
 * Why it exists: the colours were stated inline in every page's :root, and
 * the pages had drifted. --navy meant one thing on Group Members and
 * Adventure Skills, another on Group Admin and a third on the Platform Admin
 * screens - three different navies under one variable name,
 * and Group Members had no navy at all in its older half - it was still on
 * the 2019 Material blue with a grey tab bar. Four opinions about one colour
 * is what made "make it navy" a change to six files.
 *
 * The old hex values are deliberately NOT quoted here. Phase 25 greps every
 * themed page and this file for them, and a comment naming one would pass
 * that check straight into a permanent failure.
 *
 * Peter's decision 12, 12 September 2026: navy #07073F, white, and a page
 * background of #EEF3FA. The greens go.
 *
 * Loaded FIRST by every themed page, before that page's own <style>, so a
 * page can still override something deliberately. The pages no longer
 * declare these colours themselves; if one of them starts to again, phase 25
 * of the test suite fails.
 *
 * Not loaded by index.html. That page is a compiled React bundle whose source
 * is not in this repository, so it cannot be re-themed here. Recovering that
 * source is separate work.
 */

/* The two typefaces, served from this site rather than from Google.

   Peter, 15 October 2026: headlines and headings in Jost, body text in
   Inter (he first named Aptos, which only Windows 11 and Office have and
   whose licence does not allow a website to send it; Inter is the close
   free alternative he chose). Both are under the SIL Open Font License,
   whose text sits beside the files in assets/fonts.

   Hosted here so no visitor's browser contacts Google to draw a page. Each
   file is the variable version of the font, so the one file carries both
   weights the system uses, 400 and 500. Latin only: every character in the
   app's English and Irish text is in it. swap shows the fallback straight
   away and the font when it arrives, so a slow connection never shows a
   blank page. */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    /* The file is Jost's variable font, so every weight is real, not one the
       browser fakes by smearing the medium (16 October 2026). */
    font-weight: 100 900;
    font-display: swap;
    src: url(assets/fonts/jost-latin.woff2) format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url(assets/fonts/inter-latin.woff2) format('woff2');
}

:root {
    --navy: #07073F;        /* headers, primary buttons, the active nav tab */
    --navy-deep: #050530;   /* hover and pressed */
    --white: #FFFFFF;       /* cards, the nav pill, text on navy */
    --page-bg: #EEF3FA;     /* the page behind the cards */
    --ink: #1F2937;         /* body text */
    --muted: #64748B;       /* labels, help text */
    --line: #D8E2F0;        /* borders and rules, re-tinted from the green-grey */
    --red: #C9283E;         /* destructive only */

    /* Kept because pages still refer to them. --green and --paper are
       deliberately navy and white now rather than deleted: a page that still
       says var(--green) gets navy instead of falling back to nothing and
       rendering black on black. Phase 25 checks the pages for the green hex
       values; this is the safety net under that, not a substitute for it. */
    --green: #07073F;
    --paper: #FFFFFF;
    --cream: #EEF3FA;
    --gold: #F2B544;

    /* How far below the top of the window the shell has to start. Zero in
       production; local and staging put a fixed environment banner across
       the top (sp-env.js), and a header at top:0 would slide underneath it.
       sp-nav.js measures the banner and sets this. */
    --sp-nav-offset: 0px;

    /* ---- The shell's measurements, stated once -----------------------
       The breakpoint itself cannot be a variable - media queries do not
       read them - so it is written out as 1023px wherever it is used:
       1024px and wider gets the sidebar, anything narrower the dock. */
    --sp-sidebar-width: 248px;
    --sp-topbar-height: 56px;
    --sp-dock-height: 64px;
    /* What fixed navigation covers at the foot of the screen. Zero on a
       desktop; the dock plus the iPhone home bar on a phone. Anything else
       fixed or sticky to the bottom - a submit button, a toast - stands on
       this rather than guessing. */
    --sp-shell-bottom: 0px;
    /* Kept for anything that still reads the old name. */
    --sp-nav-height: var(--sp-topbar-height);

    /* Spacing, on a 4px rhythm. */
    --sp-space-1: 4px;
    --sp-space-2: 8px;
    --sp-space-3: 12px;
    --sp-space-4: 16px;
    --sp-space-5: 20px;
    --sp-space-6: 24px;
    --sp-space-8: 32px;
    --sp-space-10: 40px;
    --sp-space-12: 48px;

    /* Page widths and padding. */
    --sp-page-max: 1280px;
    --sp-page-pad-x: var(--sp-space-8);
    --sp-page-pad-y: var(--sp-space-6);

    /* ---- Type --------------------------------------------------------
       Peter approved the lighter hierarchy on 13 October 2026: two weights,
       400 and 500. Bold (600-800) is no longer a routine weight - hierarchy
       comes from size and spacing. On 15 October the faces changed: Jost
       for headlines, headings, card titles and the wordmark; Inter for
       everything else - navigation, body text, controls and tables. Both
       are hosted here (see the @font-face rules above); Arial is only the
       fallback while they load. */
    --sp-font: Inter, Arial, Helvetica, system-ui, sans-serif;
    /* Headlines, headings and the wordmark (15 October 2026). */
    --sp-font-heading: Jost, Arial, Helvetica, sans-serif;
    --sp-font-brand: var(--sp-font-heading);
    --sp-weight-normal: 400;
    --sp-weight-medium: 500;
    --sp-weight-title: 600;    /* page titles: Peter, 16 October 2026 */
    --sp-text-body: 16px;      --sp-leading-body: 24px;
    --sp-text-h1: 24px;        --sp-leading-h1: 30px;
    --sp-text-h2: 16px;        --sp-leading-h2: 24px;
    --sp-text-control: 14px;   --sp-leading-control: 20px;
    --sp-text-small: 12px;     --sp-leading-small: 16px;

    /* ---- Surfaces and states ------------------------------------------- */
    --surface: var(--white);
    --surface-quiet: #F7F9FC;  /* inside a card: rows, wells */
    --line-strong: #B9C6DE;    /* hover and selected borders */
    --sp-focus: var(--navy);
    --sp-warning-bg: #FFF3D6;  --sp-warning-ink: #805C00;  --sp-warning-line: #E5B84B;
    --sp-success-bg: #E8F6EF;  --sp-success-ink: #0B5B41;  --sp-success-line: #A7D9C4;
    --sp-danger-bg: #FCEDEF;   --sp-danger-ink: #A61E32;   --sp-danger-line: #F0C9C9;
    --sp-info-bg: #E9F1FD;     --sp-info-ink: #1C3F7C;     --sp-info-line: #9DB6EA;

    /* ---- Geometry ---------------------------------------------------------
       One radius for controls and one for cards, where there were ten. */
    --sp-radius-control: 10px;
    --sp-radius-card: 16px;
    --sp-radius-pill: 999px;
    --sp-touch-target: 44px;
    --sp-control-height: 40px;

    /* Padding inside a card: compact rows, the default, and the larger
       panels that genuinely need room. */
    --sp-pad-compact: 12px;
    --sp-pad: 20px;
    --sp-pad-spacious: 24px;
    --sp-gap: 16px;
    --sp-gap-tight: 12px;

    /* A soft lift, so a card sits just above the page. Peter, 14 October
       2026: "a little more shadow to each tile to lift it slightly". Two
       layers - a tight one for the edge and a wide, faint one for the lift -
       read as depth without looking heavy. Hover lifts a little further. */
    --sp-shadow-card: 0 1px 2px rgba(7, 7, 63, .06), 0 4px 14px rgba(7, 7, 63, .07);
    --sp-shadow-hover: 0 2px 4px rgba(7, 7, 63, .07), 0 10px 24px rgba(7, 7, 63, .11);
    --sp-shadow-dialog: 0 18px 48px rgba(7, 7, 63, .22);

    /* One focus ring, on light surfaces and on navy. */
    --sp-focus-light: 3px solid var(--sp-focus);
    --sp-focus-dark: 3px solid var(--gold);
}

@media (max-width: 1023px) {
    :root {
        --sp-shell-bottom: calc(var(--sp-dock-height) + env(safe-area-inset-bottom, 0px));
        --sp-page-pad-x: var(--sp-space-4);
        --sp-page-pad-y: var(--sp-space-6);
    }
}

@media (max-width: 700px) {
    :root {
        --sp-text-h1: 20px;
        --sp-leading-h1: 25px;
        --sp-pad: 16px;
        --sp-pad-spacious: 20px;
        --sp-gap: 12px;
    }
}

@media (pointer: coarse) {
    :root { --sp-control-height: 44px; }
}

/* =====================================================================
 * The application shell
 *
 * Desktop, 1024px and wider: a navy sidebar of grouped modules on the left
 * and a thin white utility header across the top - which group you are in,
 * where you are, who you are, Help and Logout. The header is for context and
 * utilities only; it must never become a second row of modules.
 *
 * Phone and tablet, narrower than 1024px: no sidebar and no header. A navy
 * dock across the bottom holds four shortcuts and More, and More opens every
 * page, grouped exactly as the sidebar groups them. A leader is standing in
 * a hall holding a phone in one hand, and the destinations belong under the
 * thumb.
 *
 * Everything is FIXED, not sticky. Peter's report against the first bar was
 * that it jumped around while scrolling, which is what a sticky element does
 * once it reaches the end of its parent's box. Fixed has no parent box to
 * run out of, and the body carries padding to make room.
 *
 * One shell, one set of styles, one markup shape, on every page. A page opts
 * in with <div id="spNavMount"></div> and sp-nav.js; the markup is built
 * there and styled here.
 * ===================================================================== */

/* Room for the shell. Keyed off a class sp-nav.js puts on <html> when it has
   actually drawn one, not applied to every page that loads this file:
   help.html and roadmap.html are public and carry no shell, and Group Members
   shows a sign-in form before there is a session. */
html.sp-has-nav body {
    padding-top: calc(var(--sp-topbar-height) + var(--sp-nav-offset));
    padding-left: var(--sp-sidebar-width);
}

/* Not scrolled behind the header when a page jumps to an anchor. */
html.sp-has-nav {
    scroll-padding-top: calc(var(--sp-topbar-height) + var(--sp-nav-offset) + var(--sp-space-3));
    scroll-padding-bottom: calc(var(--sp-shell-bottom) + var(--sp-space-3));
}

/* The environment banners, local and staging, sit above the shell. The shell
   already starts below them (--sp-nav-offset), so the spacer sp-env.js puts
   at the top of the page would only add the same height a second time. */
html.sp-has-nav #spEnvBannerSpacer { display: none; }
html.sp-has-nav .sp-env-note {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
}

/* The page behind an open menu stays where it is. */
html.sp-sheet-open,
html.sp-sheet-open body { overflow: hidden; }

.sp-shell { font: 400 15px/20px var(--sp-font); }
.sp-shell *, .sp-shell *::before, .sp-shell *::after { box-sizing: border-box; }
.sp-nav-list,
.sp-dock-list { margin: 0; padding: 0; list-style: none; }

/* The pages style bare buttons for their own forms - app.css gives every
   button a 10px top margin, a shadow, a lift on hover and full width. None
   of that belongs in the shell, and 0,1,1 outranks a bare button rule
   without outranking the shell's own classes below by much. */
.sp-shell button,
.sp-shell button:hover {
    width: auto;
    margin: 0;
    box-shadow: none;
    transform: none;
    letter-spacing: normal;
}
.sp-nav-group-label,
.sp-sheet-title { margin: 0; }
.sp-context,
.sp-account { margin: 0; }

/* The menu's icons are theme.css's outline .sp-icon drawings. */
.sp-nav-icon { opacity: .9; }

/* The phone's name strip: hidden on a desktop, where the sidebar says it. */
.sp-mobilebar { display: none; }

/* ---- Skip link: hidden until a keyboard reaches it -------------------- */
.sp-skip-link {
    position: fixed;
    top: calc(var(--sp-nav-offset) + var(--sp-space-2));
    left: var(--sp-space-2);
    z-index: 60;
    padding: 10px 16px;
    border-radius: var(--sp-radius-control);
    background: var(--white);
    color: var(--navy);
    font: 500 14px/20px var(--sp-font);
    text-decoration: none;
    transform: translateY(-200%);
}
.sp-skip-link:focus { transform: none; outline: var(--sp-focus-light); outline-offset: 2px; }

/* ---- Sidebar ------------------------------------------------------------ */
.sp-sidebar {
    position: fixed;
    top: var(--sp-nav-offset);
    bottom: 0;
    left: 0;
    z-index: 40;            /* below every dialog on every page */
    display: flex;
    flex-direction: column;
    width: var(--sp-sidebar-width);
    background: var(--navy);
    color: var(--white);
    box-shadow: 2px 0 14px rgba(7, 7, 63, .18);
}

.sp-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-space-3);
    flex: none;
    height: var(--sp-topbar-height);
    padding: 0 var(--sp-space-5);
    color: var(--white);
    font: 500 1.05rem var(--sp-font-brand);  /* the wordmark, in the heading face */
    letter-spacing: -.01em;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sp-sidebar-brand:hover { color: var(--white); text-decoration: none; }
.sp-sidebar-brand:focus-visible { outline: var(--sp-focus-dark); outline-offset: -3px; }
/* The mark sits straight on the navy: the mountain mark is transparent and
   light-coloured, so there is no white tile behind it. */
.sp-sidebar-mark { width: 32px; height: 32px; border-radius: 0; background: transparent; object-fit: contain; }

/* The list scrolls inside the sidebar, so a module added later can never push
   the page about or fall off the bottom of a short laptop screen. */
.sp-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-space-3) var(--sp-space-3) var(--sp-space-6);
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.sp-nav-group + .sp-nav-group { margin-top: var(--sp-space-4); }

.sp-nav-group-label {
    padding: var(--sp-space-2) var(--sp-space-3) var(--sp-space-1);
    color: rgba(255, 255, 255, .62);
    font: 500 12px/16px var(--sp-font);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sp-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-space-3);
    min-height: 42px;
    margin-top: 2px;
    padding: var(--sp-space-2) var(--sp-space-3);
    border-radius: var(--sp-radius-control);
    color: rgba(255, 255, 255, .86);
    font: 400 15px/20px var(--sp-font);
    text-decoration: none;
    /* A long name wraps onto a second line rather than widening anything. */
    overflow-wrap: anywhere;
}
.sp-nav-link:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    text-decoration: none;
}
.sp-nav-link:focus-visible { outline: var(--sp-focus-dark); outline-offset: 0; }

/* The page you are on: the white pill the old bar used, with a gold edge so
   it does not rely on the fill alone. */
.sp-nav-link[aria-current="page"] {
    background: var(--white);
    color: var(--navy);
    box-shadow: inset 4px 0 0 var(--gold);
    font-weight: var(--sp-weight-medium);
}

/* ---- Utility header -------------------------------------------------- */
.sp-topbar {
    position: fixed;
    top: var(--sp-nav-offset);
    left: var(--sp-sidebar-width);
    right: 0;
    z-index: 39;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-space-4);
    height: var(--sp-topbar-height);
    padding: 0 var(--sp-space-6);
    background: var(--white);
    flex-wrap: nowrap;
    /* !important because badges.html strips the border off every <header>
       on its page, its own and therefore this one. */
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 2px 10px rgba(7, 7, 63, .06);
    color: var(--ink);
}

.sp-context {
    display: flex;
    align-items: baseline;
    gap: var(--sp-space-3);
    min-width: 0;
}
.sp-context-group,
.sp-context-page {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sp-context-group { color: var(--navy); font: 500 16px/24px var(--sp-font); }
.sp-context-page { color: var(--muted); font-size: .88rem; }

.sp-utilities {
    display: flex;
    align-items: center;
    gap: var(--sp-space-2);
    flex: none;
}

.sp-account {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: var(--sp-space-2);
    line-height: 1.2;
    max-width: 220px;
}
.sp-account-name {
    font-weight: var(--sp-weight-medium);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink);
    font-size: .88rem;
}
.sp-account-role { color: var(--muted); font-size: .76rem; }

.sp-utility-link,
.sp-utility-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--sp-radius-control);
    font: 500 14px/20px var(--sp-font);
    text-decoration: none;
    cursor: pointer;
}
.sp-utility-link {
    background: var(--page-bg);
    color: var(--navy);
}
.sp-utility-link:hover { background: var(--line); color: var(--navy); text-decoration: none; }
/* The same red as the Logout button at the foot of every page. */
.sp-utility-logout {
    background: transparent;
    color: var(--red);
    border: 2px solid var(--red);
}
.sp-utility-logout:hover { background: var(--red); color: var(--white); }
.sp-utility-link:focus-visible,
.sp-utility-logout:focus-visible { outline: var(--sp-focus-light); outline-offset: 2px; }

/* The local and staging test-account switcher (sp-env.js) is pinned top
   right, which is where Help and Logout now are. On a desktop it moves down
   below the header. Its position is an inline style, hence !important. */
@media (min-width: 1024px) {
    html.sp-has-nav #spEnvSwitcher {
        top: calc(var(--sp-nav-offset) + var(--sp-topbar-height) + 8px) !important;
    }
}

/* ---- Dock and More: hidden on a desktop ---------------------------------- */
.sp-dock { display: none; }

.sp-sheet {
    /* Laid out only while open; a closed dialog is display:none already. */
    width: min(420px, 100%);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0 0 0 auto;
    padding: calc(var(--sp-space-4) + env(safe-area-inset-top, 0px)) var(--sp-space-4)
             calc(var(--sp-space-6) + env(safe-area-inset-bottom, 0px));
    border: 0;
    background: var(--navy);
    color: var(--white);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sp-sheet[open] { display: flex; flex-direction: column; gap: var(--sp-space-4); }
.sp-sheet::backdrop { background: rgba(7, 7, 63, .55); }

.sp-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-space-3);
}
.sp-sheet-title { color: var(--white); font: 500 18px/24px var(--sp-font); }
.sp-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sp-touch-target);
    height: var(--sp-touch-target);
    border: 0;
    border-radius: var(--sp-radius-control);
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
}
.sp-sheet-close:hover { background: rgba(255, 255, 255, .22); }
.sp-sheet-close:focus-visible { outline: var(--sp-focus-dark); outline-offset: 2px; }

.sp-sheet-context {
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-space-3) var(--sp-space-4);
    border-radius: var(--sp-radius-control);
    background: rgba(255, 255, 255, .08);
}
.sp-sheet-context .sp-context-group { color: var(--white); }
.sp-sheet-context .sp-context-page { color: rgba(255, 255, 255, .72); }

.sp-sheet .sp-nav-link { min-height: 48px; font-size: 1rem; }

/* A group's menu (Progress): a small row of tiles just above the dock, set
   over the shortcuts by sp-nav.js's placePop; until then, centred. */
.sp-pop {
    position: fixed;
    inset: auto auto calc(var(--sp-shell-bottom) + 8px) 50%;
    width: min(360px, calc(100% - 16px));
    height: auto;
    max-height: none;
    margin: 0;
    padding: 6px;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(7, 7, 63, .34);
    overflow: visible;
    transform: translateX(-50%);
}
.sp-pop.is-placed { transform: none; }
.sp-pop[open] { display: block; }
.sp-pop::backdrop { background: rgba(7, 7, 63, .32); }
.sp-pop-list {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sp-pop-list > li { flex: 1 1 0; min-width: 0; display: flex; }
.sp-pop-link {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    border-radius: var(--sp-radius-control);
    color: rgba(255, 255, 255, .9);
    font: 500 12px/15px var(--sp-font);
    text-align: center;
    text-decoration: none;
}
.sp-pop-link .sp-nav-icon { width: 22px; height: 22px; }
.sp-pop-link:hover { background: rgba(255, 255, 255, .12); color: var(--white); text-decoration: none; }
.sp-pop-link:focus-visible { outline: var(--sp-focus-dark); outline-offset: -3px; }
.sp-pop-link[aria-current="page"] { background: var(--white); color: var(--navy); }

.sp-sheet-utilities {
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--sp-space-4);
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.sp-sheet-utilities .sp-account {
    flex: 1 0 100%;
    align-items: flex-start;
    max-width: none;
    margin: 0 0 var(--sp-space-2);
}
.sp-sheet-utilities .sp-account-name { color: var(--white); font-size: .95rem; }
.sp-sheet-utilities .sp-account-role { color: rgba(255, 255, 255, .72); }
.sp-sheet-utilities .sp-utility-link,
.sp-sheet-utilities .sp-utility-logout { min-height: 48px; flex: 1 1 0; justify-content: center; }
.sp-sheet-utilities .sp-utility-link { background: rgba(255, 255, 255, .12); color: var(--white); }
.sp-sheet-utilities .sp-utility-logout { background: var(--white); color: var(--red); border-color: var(--white); }
.sp-sheet-utilities .sp-utility-link:focus-visible,
.sp-sheet-utilities .sp-utility-logout:focus-visible { outline: var(--sp-focus-dark); }

/* ---------------------------------------------------------------------
 * Narrower than 1024px: the dock replaces the sidebar and header.
 *
 * env(safe-area-inset-bottom) clears the iPhone home bar; without it the
 * last few pixels of the dock sit under the system gesture area and the
 * shortcuts are hard to hit. Targets are at least 44px, Apple's minimum and
 * about the width of an adult fingertip.
 * --------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .sp-sidebar,
    .sp-topbar { display: none; }

    html.sp-has-nav body {
        /* Nothing above, and room below for the dock plus the home bar. */
        padding-top: var(--sp-nav-offset);
        padding-left: 0;
        padding-bottom: var(--sp-shell-bottom);
    }
    html.sp-has-nav { scroll-padding-top: calc(var(--sp-nav-offset) + var(--sp-space-3)); }

    .sp-dock {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;        /* below every dialog on every page */
        padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        background: var(--navy);
        box-shadow: 0 -2px 14px rgba(7, 7, 63, .26);
    }

    .sp-dock-list {
        display: flex;
        align-items: stretch;
        gap: 2px;
        max-width: 640px;
        height: var(--sp-dock-height);
        margin: 0 auto;
        padding: 6px;
    }
    .sp-dock-list > li { flex: 1 1 0; min-width: 0; display: flex; }

    .sp-dock-link {
        flex: 1 1 auto;
        min-width: 0;       /* so a long label cannot prop the dock open */
        min-height: var(--sp-touch-target);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 0 2px;
        border: 0;
        border-radius: var(--sp-radius-control);
        background: transparent;
        color: rgba(255, 255, 255, .84);
        font: 500 12px/16px var(--sp-font);
        letter-spacing: .005em;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }
    .sp-dock-link .sp-nav-icon { width: 22px; height: 22px; }

    .sp-mobilebar {
        display: flex;
        align-items: center;
        gap: var(--sp-space-2);
        min-height: 52px;
        padding: 0 var(--sp-page-pad-x);
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        color: var(--navy);
    }
    .sp-mobilebar .sp-sidebar-mark { width: 28px; height: 28px; border: 0; }
    .sp-mobilebar-name { font: var(--sp-weight-medium) 16px/24px var(--sp-font-brand); }
    .sp-mobilebar-group {
        min-width: 0;
        margin-left: auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--muted);
        font-size: var(--sp-text-control);
    }
    .sp-dock-link .sp-nav-label {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .sp-dock-link:hover { background: rgba(255, 255, 255, .12); color: var(--white); text-decoration: none; }
    .sp-dock-link:focus-visible { outline: var(--sp-focus-dark); outline-offset: -3px; }

    /* The white pill for where you are. More takes it when the page you are
       on has no shortcut of its own, such as Group Admin. */
    .sp-dock-link[aria-current="page"],
    .sp-dock-more.is-current {
        background: var(--white);
        color: var(--navy);
    }

    /* Things other scripts fix to the bottom of the screen stand on the dock
       rather than under it. */
    html.sp-has-nav #analytics-consent { bottom: calc(var(--sp-shell-bottom) + 12px); }
    html.sp-has-nav .sib-toast { bottom: calc(var(--sp-shell-bottom) + 16px); }
}

/* The smallest phones still in use are 320px wide, where "Attendance" at the
   usual size is clipped. */
@media (max-width: 359px) {
    .sp-dock-list { gap: 0; padding: 6px 4px; }
    .sp-dock-link { padding: 0; font-size: 11px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    .sp-nav-link, .sp-dock-link, .sp-utility-link, .sp-utility-logout {
        transition: background-color .12s ease, color .12s ease;
    }
}

/* =====================================================================
 * The sticky primary button
 *
 * Home and the register screen both end in one action, and the register can
 * be twenty-five names long. Submit has to stay reachable without scrolling
 * past all of them.
 *
 * Bottom-anchored, standing on whatever the shell covers at the foot of the
 * screen: nothing on a desktop, the dock on a phone or tablet.
 * ===================================================================== */
.sp-sticky-action {
    position: sticky;
    bottom: var(--sp-shell-bottom);
    z-index: 20;
    margin: 18px -4px -4px;
    padding: 12px 4px;
    background: linear-gradient(to top, var(--page-bg) 70%, rgba(238, 243, 250, 0));
}

.sp-sticky-action button,
.sp-sticky-action .sp-button {
    width: 100%;
    min-height: 48px;
}

/* A page that is not drawn inside the shell's own .page card can use this
   for the same width and padding as the shell expects. */
.sp-page-width {
    max-width: var(--sp-page-max);
    margin: 0 auto;
    padding: var(--sp-page-pad-y) var(--sp-page-pad-x);
}

/* =====================================================================
 * The shared component system
 *
 * Why it exists: every page had drawn its own tiles, cards and buttons.
 * Home's tiles were 14px corners with one shadow, Attendance's section tiles
 * 16px with none, Special Interest's choice tiles 11px with a 2px border;
 * app.css alone had three generations of .card (8px, then 24px corners) and
 * a global button rule whose hover turned navy buttons green. Georgia, Sora,
 * Inter and system fonts were mixed on one screen. This section is the one
 * copy of each of those things.
 *
 * The families, and when to use which. They are deliberately different -
 * not every rectangle is the same component.
 *
 *   .sp-page-header   Title, one-line description and the page's actions,
 *                     the actions below the title, on the left, at every width.
 *   .sp-actions       One wrapping cluster of related buttons.
 *   .sp-card          Grouped content, forms, lists. White, a quiet border,
 *                     16px corners, almost no shadow, no hover lift. Header,
 *                     title, description and footer regions are optional.
 *   .sp-metric        A value that explains work: small label, the value,
 *                     one short line. In a .sp-metrics row.
 *   .sp-tile          The WHOLE surface is one link or button that goes
 *                     somewhere or starts a task. Never put a button inside
 *                     one. In a .sp-tiles grid; .sp-tiles.quick keeps two
 *                     columns on a phone for short quick actions.
 *   .sp-choice        A radio- or checkbox-like option inside a form. Wraps
 *                     a native input, so the keyboard and screen reader get
 *                     the real control. Selected = border + background +
 *                     the checked input itself, never colour alone.
 *   .sp-record        A data row drawn as a card on a phone: title, status,
 *                     two or three labelled facts, one action.
 *   .sp-table         An ordinary data table on a desktop.
 *   .sp-button        One button, with .secondary, .ghost, .danger, .small,
 *                     .icon and .block. Exactly one primary per page or
 *                     focused task.
 *   .sp-fill          A badge that fills with colour from the bottom as its
 *                     criteria are ticked: --fill sets how far.
 *   .sp-segmented     A small set of mutually exclusive views (By badge /
 *                     By member). aria-pressed marks the one shown.
 *   .sp-status        Text that states a status. Never a button.
 *   .sp-notice        A message across a section: info, success, warning,
 *                     danger.
 *   .sp-empty         An empty list, with the next step written in it.
 *
 * Pages opt in to the base type with <body class="sp-app">. The base rules
 * use :where() so they carry no weight: a page's own rule for its own
 * specialised component always wins, and the shell's classes are untouched.
 * ===================================================================== */

/* ---- Base type and controls, for pages that opt in ------------------- */
:where(.sp-app), :where(.sp-app) *, :where(.sp-app) *::before, :where(.sp-app) *::after { box-sizing: border-box; }
/* hidden means hidden. A component's own display:flex would otherwise win
   over the attribute and show an empty box. */
.sp-app [hidden] { display: none !important; }
.sp-app {
    margin: 0;
    background: var(--page-bg);
    color: var(--ink);
    font: var(--sp-weight-normal) var(--sp-text-body)/var(--sp-leading-body) var(--sp-font);
}
:where(.sp-app) :where(h1) {
    margin: 0;
    color: var(--ink);
    font: var(--sp-weight-title) var(--sp-text-h1)/var(--sp-leading-h1) var(--sp-font-heading);
    letter-spacing: 0;
}
:where(.sp-app) :where(h2, h3) {
    margin: 0;
    color: var(--ink);
    font: var(--sp-weight-medium) var(--sp-text-h2)/var(--sp-leading-h2) var(--sp-font-heading);
    letter-spacing: 0;
}
:where(.sp-app) :where(input, select, textarea) { font-family: inherit; }
/* A button with no component class of its own - a list row, a grid cell - reads
   as the text around it, not as the browser's 13px system button. */
:where(.sp-app) :where(button) { font: inherit; letter-spacing: inherit; }
/* Nothing that has to be read goes below 12px. */
:where(.sp-app) :where(small) { font-size: var(--sp-text-small); }
/* Two weights and no more: emphasis inside a sentence is medium, not bold. */
:where(.sp-app) :where(strong, b, th, dt, legend, summary) { font-weight: var(--sp-weight-medium); }
:where(.sp-app) :where(table) { font: var(--sp-weight-normal) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font); }
:where(.sp-app) :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea) {
    min-height: var(--sp-control-height);
    padding: 9px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--sp-radius-control);
    background: var(--surface);
    color: var(--ink);
    font: var(--sp-weight-normal) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font);
}
:where(.sp-app) :where(input, select, textarea):focus-visible {
    outline: 0;
    border-color: var(--sp-focus);
    box-shadow: 0 0 0 3px rgba(7, 7, 63, .16);
}
:where(.sp-app) :where(input[type=checkbox], input[type=radio]) { accent-color: var(--navy); }
/* iOS Safari draws a date or time field at a minimum width of its own, wider
   than the box it is in, so it ran past the fields beside it (Peter, 28
   October 2026, on an iPhone: Planned start and finish dates). Drawn as a
   plain field it keeps the width it is given; tapping it still opens the
   iPhone's own date picker. Only where that browser is, by its own feature. */
@supports (-webkit-touch-callout: none) {
    :where(.sp-app) :where(input[type=date], input[type=time]) {
        -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%;
    }
    :where(.sp-app) :where(input[type=date], input[type=time])::-webkit-date-and-time-value { text-align: left; }
}

/* A label above a control. */
.sp-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--muted);
    font: var(--sp-weight-medium) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font);
}

/* Small uppercase labels: a metric's name, a column heading, an eyebrow. */
.sp-label,
.sp-eyebrow {
    margin: 0;
    color: var(--muted);
    font: var(--sp-weight-medium) var(--sp-text-small)/var(--sp-leading-small) var(--sp-font);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sp-muted { color: var(--muted); }

/* Present for a screen reader, invisible on screen. Not display:none,
   which would hide it from both. */
.sp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Page header and action cluster ---------------------------------- */
.sp-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--sp-space-4) var(--sp-space-6);
    margin: 0 0 var(--sp-space-6);
}
/* The title takes the whole first line, so the page's buttons sit under it
   on the left, on a computer as on a phone (Peter, 16 October 2026). */
.sp-page-header > :first-child { flex: 1 1 100%; min-width: 0; }
.sp-page-desc { margin: var(--sp-space-1) 0 0; color: var(--muted); }

.sp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-space-2);
}

@media (max-width: 700px) {
    /* The page's own action goes full width under the title on a phone. */
    .sp-page-header > .sp-actions { flex: 1 1 100%; }
    .sp-page-header > .sp-actions > .sp-button:not(.secondary):not(.ghost) { flex: 1 1 100%; }
}

/* ---- Content card ------------------------------------------------------ */
.sp-card {
    min-width: 0;
    padding: var(--sp-pad);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-card);
}
.sp-card.compact { padding: var(--sp-pad-compact); }
.sp-card.spacious { padding: var(--sp-pad-spacious); }
/* Something here is waiting on a Scouter. The edge is the same amber the
   progress grids use for "waiting on you"; the heading says it in words. */
.sp-card.attention { border-left: 4px solid var(--sp-warning-line); }

.sp-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-space-2) var(--sp-space-4);
    margin: 0 0 var(--sp-space-4);
}
.sp-card-header > :first-child { flex: 1 1 240px; min-width: 0; }
.sp-card-title {
    margin: 0;
    color: var(--ink);
    font: var(--sp-weight-medium) var(--sp-text-h2)/var(--sp-leading-h2) var(--sp-font-heading);
}
.sp-card-desc {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--sp-text-control);
    line-height: var(--sp-leading-control);
}
.sp-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-space-2);
    margin-top: var(--sp-space-4);
    padding-top: var(--sp-space-4);
    border-top: 1px solid var(--line);
}

/* ---- Summary / metric card ------------------------------------------------ */
.sp-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--sp-gap-tight);
}
.sp-metric {
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-1);
    min-width: 0;
    padding: var(--sp-space-4) var(--sp-pad);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-card);
}
.sp-metric-label {
    color: var(--muted);
    font: var(--sp-weight-medium) var(--sp-text-small)/var(--sp-leading-small) var(--sp-font);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sp-metric-value {
    color: var(--navy);
    font: var(--sp-weight-medium) 24px/30px var(--sp-font);
    font-variant-numeric: tabular-nums;
}
.sp-metric-note {
    color: var(--muted);
    font-size: var(--sp-text-small);
    line-height: var(--sp-leading-small);
}
.sp-metric.attention { background: var(--sp-warning-bg); border-color: var(--sp-warning-line); }
.sp-metric.attention .sp-metric-value { color: var(--sp-warning-ink); }

/* ---- Action tile ----------------------------------------------------------- */
.sp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--sp-gap);
    align-items: stretch;
}
@media (max-width: 700px) {
    /* Short quick actions stay two across; substantial tiles stack. */
    .sp-tiles.quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sp-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-space-1);
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--sp-pad);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--sp-radius-card);
    box-shadow: var(--sp-shadow-card);
    color: var(--ink);
    font: var(--sp-weight-normal) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.sp-tile:hover {
    border-color: var(--line-strong);
    box-shadow: var(--sp-shadow-hover);
    color: var(--ink);
    text-decoration: none;
}
.sp-tile:active { background: var(--surface-quiet); box-shadow: var(--sp-shadow-card); }
.sp-tile:focus-visible { outline: var(--sp-focus-light); outline-offset: 2px; }
/* Selected or open: a tile that expands something below it, or the one
   currently chosen. A navy border, not a colour change on its own - the
   attribute that says so is what a screen reader hears. */
.sp-tile[aria-expanded="true"],
.sp-tile[aria-pressed="true"],
.sp-tile.is-selected {
    border-color: var(--navy);
    box-shadow: inset 0 0 0 1px var(--navy);
}
.sp-tile-icon { color: var(--navy); font-size: 20px; line-height: 1; margin-bottom: var(--sp-space-1); }
.sp-tile-title {
    color: var(--navy);
    font: var(--sp-weight-medium) var(--sp-text-h2)/var(--sp-leading-h2) var(--sp-font);
}
.sp-tile-text { color: var(--muted); }
.sp-tile-status {
    margin-top: auto;
    padding-top: var(--sp-space-2);
    color: var(--muted);
    font-weight: var(--sp-weight-medium);
}
/* Something to do. Amber text and a marker, so it is not colour alone. */
.sp-tile-status.attention { color: var(--sp-warning-ink); }
.sp-tile-status.attention::before { content: '\25CF\00a0'; font-size: .8em; }

/* ---- Choice tile -------------------------------------------------------------- */
.sp-choices { display: flex; flex-wrap: wrap; gap: var(--sp-space-2); }
.sp-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-2);
    min-height: var(--sp-touch-target);
    margin: 0;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--sp-radius-control);
    color: var(--ink);
    font: var(--sp-weight-normal) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font);
    text-align: left;
    cursor: pointer;
}
.sp-choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.sp-choice:hover { border-color: var(--navy); }
.sp-choice:has(input:checked),
.sp-choice[aria-checked="true"] {
    background: var(--page-bg);
    border-color: var(--navy);
    box-shadow: inset 0 0 0 1px var(--navy);
    font-weight: var(--sp-weight-medium);
}
.sp-choice:has(input:focus-visible),
.sp-choice:focus-visible { outline: var(--sp-focus-light); outline-offset: 2px; }
.sp-choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
/* A choice with a title and a line of explanation under it. */
.sp-choice.described { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; }
.sp-choice-title { color: var(--navy); font-weight: var(--sp-weight-medium); }
.sp-choice-text { color: var(--muted); font-size: var(--sp-text-small); line-height: var(--sp-leading-small); }
@media (max-width: 520px) {
    .sp-choices.stack > .sp-choice { flex: 1 1 100%; }
}

/* ---- Mobile record card ---------------------------------------------------------- */
.sp-records { display: grid; gap: var(--sp-space-2); margin: 0; padding: 0; list-style: none; }
.sp-record {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--sp-space-1) var(--sp-space-3);
    min-width: 0;
    padding: var(--sp-pad-compact) var(--sp-space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--sp-radius-card);
}
.sp-record-title { min-width: 0; color: var(--navy); font-weight: var(--sp-weight-medium); overflow-wrap: anywhere; }
.sp-record-status { justify-self: end; }
.sp-record-facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 2px var(--sp-space-3);
    margin: 0;
    font-size: var(--sp-text-control);
    line-height: var(--sp-leading-control);
}
.sp-record-facts dt { color: var(--muted); }
.sp-record-facts dd { margin: 0; min-width: 0; }
.sp-record-action { grid-column: 1 / -1; margin-top: var(--sp-space-1); }

/* ---- Data table ---------------------------------------------------------------- */
.sp-table-wrap { min-width: 0; overflow: auto; }
.sp-table {
    width: 100%;
    border-collapse: collapse;
    font: var(--sp-weight-normal) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font);
}
.sp-table th,
.sp-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}
.sp-table th {
    color: var(--muted);
    font: var(--sp-weight-medium) var(--sp-text-small)/var(--sp-leading-small) var(--sp-font);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sp-table tr:last-child td { border-bottom: 0; }

/* Below 700px a .sp-table.cards stops being a table and becomes one record
   card per row. Each cell carries data-label, which becomes its label, so
   nothing that identifies the row is dropped - this is not hiding columns. */
@media (max-width: 700px) {
    .sp-table.cards,
    .sp-table.cards tbody,
    .sp-table.cards tr,
    .sp-table.cards td { display: block; }
    .sp-table.cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .sp-table.cards tr {
        margin: 0 0 var(--sp-space-2);
        padding: var(--sp-pad-compact) var(--sp-space-4);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--sp-radius-card);
    }
    .sp-table.cards td {
        display: grid;
        grid-template-columns: minmax(96px, 40%) minmax(0, 1fr);
        gap: var(--sp-space-3);
        padding: 4px 0;
        border: 0;
        text-align: left !important;
        white-space: normal !important;
    }
    .sp-table.cards td::before {
        content: attr(data-label);
        color: var(--muted);
    }
    /* The cell that names the row is the card's title. */
    .sp-table.cards td.sp-record-head { display: block; padding-bottom: var(--sp-space-2); color: var(--navy); font-weight: var(--sp-weight-medium); }
    .sp-table.cards td.sp-record-head::before { content: none; }
    .sp-table.cards td:empty { display: none; }
}

/* ---- Buttons ------------------------------------------------------------------------ */
.sp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-space-2);
    min-height: var(--sp-control-height);
    margin: 0;
    padding: 9px 16px;          /* 10px less the 1px border, so 40px tall */
    border: 1px solid var(--navy);
    border-radius: var(--sp-radius-control);
    background: var(--navy);
    box-shadow: none;
    color: var(--white);
    font: var(--sp-weight-medium) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.sp-button:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); text-decoration: none; }
.sp-button:active { background: #03031F; }
.sp-button:focus-visible { outline: var(--sp-focus-light); outline-offset: 2px; }
.sp-button:disabled,
.sp-button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.sp-button.secondary {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--navy);
}
.sp-button.secondary:hover { background: var(--page-bg); border-color: var(--navy); color: var(--navy); }

.sp-button.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--navy);
}
.sp-button.ghost:hover { background: var(--page-bg); color: var(--navy); }

/* Destructive only. Archive, remove, delete - never Cancel. */
.sp-button.danger {
    background: var(--sp-danger-bg);
    border-color: var(--sp-danger-line);
    color: var(--sp-danger-ink);
}
.sp-button.danger:hover { background: var(--red); border-color: var(--red); color: var(--white); }

/* Compact, for table rows and dense lists. */
.sp-button.small { min-height: 32px; padding: 5px 12px; }

/* Square, for a single symbol. Needs an aria-label. */
.sp-button.icon {
    width: var(--sp-control-height);
    min-width: var(--sp-control-height);
    padding: 0;
    font-size: 18px;
    line-height: 1;
}
.sp-button.icon.small { width: 32px; min-width: 32px; }

.sp-button.block { display: flex; width: 100%; }

@media (pointer: coarse) {
    /* A fingertip, not a cursor: every button is at least 44px to hit. */
    .sp-button.small { min-height: var(--sp-touch-target); }
    .sp-button.icon.small { width: var(--sp-touch-target); min-width: var(--sp-touch-target); }
}

/* ---- Segmented control ------------------------------------------------------------- */
/* A badge that fills with colour from the bottom as its criteria are ticked
   (Peter, 15 October 2026). Two copies of the same picture in one box: the
   grey one underneath, the coloured one on top, cut off above --fill (0% to
   100%). Seven criteria make seven equal steps. Used by Adventure Skills and
   Adventures Afloat; the box takes its size from the page's own rule. */
.sp-fill { position: relative; display: inline-block; line-height: 0; }
.sp-fill > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sp-fill > .sp-fill-grey { filter: grayscale(1); opacity: .3; }
.sp-fill > .sp-fill-colour { position: absolute; inset: 0;
    clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0); transition: clip-path .3s ease; }
@media (prefers-reduced-motion: reduce) { .sp-fill > .sp-fill-colour { transition: none; } }

.sp-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-space-1);
    padding: var(--sp-space-1);
    border-radius: calc(var(--sp-radius-control) + 4px);
    background: var(--page-bg);
}
.sp-segmented > button,
.sp-segmented > a {
    min-height: 36px;
    margin: 0;
    padding: 7px 14px;
    border: 0;
    border-radius: var(--sp-radius-control);
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font: var(--sp-weight-medium) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font);
    text-decoration: none;
    cursor: pointer;
}
.sp-segmented > :hover { background: var(--surface); color: var(--navy); }
.sp-segmented > [aria-pressed="true"],
.sp-segmented > [aria-current="page"],
.sp-segmented > .active {
    background: var(--surface);
    color: var(--navy);
    box-shadow: var(--sp-shadow-card);
}
.sp-segmented > :focus-visible { outline: var(--sp-focus-light); outline-offset: 1px; }
@media (pointer: coarse) {
    .sp-segmented > button,
    .sp-segmented > a { min-height: var(--sp-touch-target); }
}

/* ---- Status, chips, notices, empty states --------------------------------------------- */
.sp-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: var(--sp-radius-pill);
    background: var(--surface-quiet);
    color: var(--ink);
    font: var(--sp-weight-medium) var(--sp-text-small)/var(--sp-leading-small) var(--sp-font);
    white-space: nowrap;
}
.sp-status.warning { background: var(--sp-warning-bg); border-color: var(--sp-warning-line); color: var(--sp-warning-ink); }
.sp-status.success { background: var(--sp-success-bg); border-color: var(--sp-success-line); color: var(--sp-success-ink); }
.sp-status.danger  { background: var(--sp-danger-bg);  border-color: var(--sp-danger-line);  color: var(--sp-danger-ink); }
.sp-status.info    { background: var(--sp-info-bg);    border-color: var(--sp-info-line);    color: var(--sp-info-ink); }

/* A small label on a tile: a venue name, a lock, a date. */
.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: var(--sp-radius-pill);
    background: var(--page-bg);
    color: var(--navy);
    font: var(--sp-weight-medium) var(--sp-text-small)/var(--sp-leading-small) var(--sp-font);
    white-space: nowrap;
}

.sp-notice {
    margin: 0 0 var(--sp-space-4);
    padding: var(--sp-space-3) var(--sp-space-4);
    border: 1px solid var(--sp-info-line);
    border-radius: var(--sp-radius-control);
    background: var(--sp-info-bg);
    color: var(--sp-info-ink);
    font-size: var(--sp-text-control);
    line-height: var(--sp-leading-control);
}
.sp-notice.success { border-color: var(--sp-success-line); background: var(--sp-success-bg); color: var(--sp-success-ink); }
.sp-notice.warning { border-color: var(--sp-warning-line); background: var(--sp-warning-bg); color: var(--sp-warning-ink); }
.sp-notice.danger,
.sp-notice.error   { border-color: var(--sp-danger-line);  background: var(--sp-danger-bg);  color: var(--sp-danger-ink); }

.sp-empty {
    margin: 0;
    padding: var(--sp-space-5);
    border: 1px dashed var(--line-strong);
    border-radius: var(--sp-radius-card);
    color: var(--muted);
    font-size: var(--sp-text-control);
    line-height: var(--sp-leading-control);
    text-align: center;
}

/* A progress bar, used by the register tiles and the section tiles. */
.sp-meter {
    height: 8px;
    border-radius: var(--sp-radius-pill);
    background: var(--page-bg);
    overflow: hidden;
}
.sp-meter > span {
    display: block;
    height: 100%;
    border-radius: var(--sp-radius-pill);
    background: var(--navy);
}

/* ---- Named sections: the list a Group Admin edits (sp-units.js) ----------
   Peter, 15 October 2026: a Group can run several sections of a kind, each
   with its own name. One row per section; on a phone the row wraps. */
.unit-list { display: grid; gap: var(--sp-space-2); margin: 0 0 var(--sp-space-4); padding: 0; list-style: none; }
.unit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-2) var(--sp-space-3);
    padding: var(--sp-space-3) var(--sp-space-4); border: 1px solid var(--line); border-radius: var(--sp-radius-control); background: var(--surface); }
.unit-row.is-retired { background: var(--surface-quiet); color: var(--muted); }
.unit-name { flex: 1 1 200px; min-width: 0; }
.unit-name input { width: 100%; }
.unit-kind { min-width: 70px; color: var(--muted); font-size: var(--sp-text-control); }
.unit-count { min-width: 80px; color: var(--muted); font-size: var(--sp-text-control); }
.unit-saved, .unit-message { color: var(--sp-success-ink); font-size: var(--sp-text-small); }
.unit-saved.is-error, .unit-message.is-error { color: var(--sp-danger-ink); }
.unit-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-space-3); }
.unit-add .sp-field { flex: 1 1 160px; }
/* A card for each section, on Group Admin (from the ScoutHQ build, 27 October 2026). */
.unit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-space-3);
    margin: 0 0 var(--sp-space-4); padding: 0; list-style: none; }
.unit-card { display: grid; align-content: start; gap: var(--sp-space-2); padding: var(--sp-space-4);
    border: 1px solid var(--line); border-radius: var(--sp-radius-card, 12px); background: var(--surface); min-width: 0; }
.unit-card.is-retired { background: var(--surface-quiet); color: var(--muted); }
.unit-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-3); }
.unit-card-logo { height: 40px; width: auto; max-width: 120px; object-fit: contain; flex: none; }
.unit-card-title { flex: 1 1 120px; min-width: 0; }
.unit-card-title h3 { margin: 0; color: var(--navy); font-size: var(--sp-text-body); }
.unit-card-title p, .unit-card-count { margin: 0; color: var(--muted); font-size: var(--sp-text-small); }
.unit-card-tools { display: flex; flex-wrap: wrap; gap: var(--sp-space-2); }
.unit-card-meets { margin: 0; }
.unit-card-adults { margin: 0; font-size: var(--sp-text-small); }
.unit-card-view { justify-self: start; }
.unit-card-edit { display: grid; gap: var(--sp-space-2); padding-top: var(--sp-space-2); border-top: 1px solid var(--line); }
.unit-card-edit[hidden] { display: none; }
.unit-card-edit-actions { display: flex; flex-wrap: wrap; gap: var(--sp-space-2); }

/* ---------------------------------------------------------------------
   The ScoutProgress banner, locked.

   Peter, 14 September 2026: "Scoutprogress logo is different on each page,
   locking it." Measured before changing anything - it rendered at 220px on
   Group Members, 84px on Home and 120px on Adventure Skills, Special Interest
   Badges and Group Admin, under two different class names. Five pages, three
   sizes, because each page sized its own copy.

   120px is the majority value, so three of the five pages do not move.

   Both class names are covered: `brand` on Home and Group Admin,
   `programme-brand` on the rest. !important is here reluctantly and
   deliberately - several pages still carry their own rule, one of them already
   !important, and the point of this is that the banner stops changing size.
   Removing those per-page rules is a tidy-up for later; this stops the symptom
   now without editing five files again.
   --------------------------------------------------------------------- */
img.brand,
img.programme-brand {
    display: block !important;
    width: auto !important;
    height: 120px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 0 14px !important;
}

@media (max-width: 520px) {
    img.brand,
    img.programme-brand {
        height: 84px !important;
        margin-bottom: 10px !important;
    }
}

/* sp-ios-zoom: text fields are at least 16px on a phone.

   Peter, 29 September: the iPhone pans left and right and sometimes needs a
   pinch to reset. iOS Safari zooms the page in when you focus an input, select
   or textarea smaller than 16px, and does not zoom back out - so you are left
   zoomed in, able to pan sideways, with the layout looking wrong.

   Six pages set body to 15px and their controls to font:inherit, so every
   field on them was 15px. app.css sets input and select to 14px.

   !important, and that IS the right tool here rather than a shortcut.

   This started as "html input", specificity 0,0,2, which beats the bare
   element selectors in the six pages that set 15px and app.css's 14px. It
   does NOT beat a class: .venue-name is 0,1,0 and .slot-form input is 0,1,1,
   and one class outranks any number of element selectors.

   Codex measured exactly that on staging - the venue name and rate fields at
   14.08px, the session-time fields at 13.12px, both under the threshold, so
   iOS still zoomed and the page still panned. Item 12 was not fixed.

   The first attempt listed the offending class rules and patched each in its
   own page. That cannot hold: I then added .venue-rate{font-size:.88rem}
   myself, in this same release, and reintroduced the bug the release exists
   to fix. Anybody styling a field narrow does it again, silently.

   So: a floor that cannot be outranked. Justified because this is a platform
   constraint and not a design preference - under 16px iOS Safari zooms in and
   does not zoom back, and there is no layout where a 14px field on a phone is
   the right answer. It is scoped to form controls inside a phone-width media
   query, so it touches nothing on a desktop and nothing that is not a field.

   Deliberately NOT done with maximum-scale=1 or user-scalable=no. That breaks
   pinch-zoom for anyone who needs it, and recent iOS Safari ignores it. */
@media (max-width: 700px) {
  input, select, textarea,
  input[type=text], input[type=email], input[type=number],
  input[type=date], input[type=time], input[type=password], input[type=search] {
    font-size: 16px !important;
  }
}
/* =====================================================================
 * Icons
 *
 * Peter, 13 October 2026: the old icons were text symbols and an emoji, so
 * some drew filled and heavy and no two matched. These are ScoutProgress's
 * own outline drawings - 24px grid, one 1.75 stroke, round ends, no fill -
 * so every icon on every page has the same weight. Nothing is copied from
 * another product or any icon library.
 *
 * Use: <span class="sp-icon" data-icon="home" aria-hidden="true"></span>
 * The drawing is a mask, so the icon takes the text colour around it, and
 * it needs no script: a page can draw one before sp-nav.js has loaded.
 * The drawings themselves are made by a short script from a list of paths,
 * which is why the lines below are long; to change one, change its path.
 * ===================================================================== */
.sp-icon {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--sp-icon) center / contain no-repeat;
    mask: var(--sp-icon) center / contain no-repeat;
    vertical-align: middle;
}
.sp-icon.small { width: 16px; height: 16px; }
.sp-icon.large { width: 24px; height: 24px; }
.sp-icon[data-icon="home"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2011%2012%204l8.5%207%27%2F%3E%3Cpath%20d%3D%27M5.5%209.5V20h13V9.5%27%2F%3E%3Cpath%20d%3D%27M10%2020v-5.5h4V20%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="attendance"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%274.5%27%20width%3D%2714%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M9%203h6v3H9z%27%2F%3E%3Cpath%20d%3D%27m9%2013.5%202.2%202.2%204.3-4.4%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="members"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M3%2020c.4-3.4%202.9-5.5%206-5.5s5.6%202.1%206%205.5%27%2F%3E%3Ccircle%20cx%3D%2716.8%27%20cy%3D%279%27%20r%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M16.5%2014.4c2.4.2%204.2%202.2%204.5%204.6%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="skills"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27m15%209-1.8%204.2L9%2015l1.8-4.2z%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="star"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m12%203.8%202.4%205%205.4.7-4%203.7%201%205.4L12%2016l-4.8%202.6%201-5.4-4-3.7%205.4-.7z%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="admin"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h9M17%207h3M4%2017h3M11%2017h9%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%277%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2717%27%20r%3D%272%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="award"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%279%27%20r%3D%275%27%2F%3E%3Cpath%20d%3D%27M9.2%2013.3%208%2021l4-2.2%204%202.2-1.2-7.7%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="sparkle"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204v3.5M12%2016.5V20M4%2012h3.5M16.5%2012H20M6.6%206.6l2.2%202.2M15.2%2015.2l2.2%202.2M17.4%206.6l-2.2%202.2M8.8%2015.2l-2.2%202.2%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="route"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2718%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%276%27%20r%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2018h6.5a3%203%200%200%200%200-6h-5a3%203%200%200%201%200-6H16%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="help"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M9.6%209.6a2.5%202.5%200%201%201%203.4%202.3c-.6.3-1%20.8-1%201.4v.4M12%2016.8v.2%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="menu"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h16M4%2012h16M4%2017h16%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="close"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206%206%2018%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="pencil"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m4.5%2019.5%201-4.2L15.8%205a1.8%201.8%200%200%201%202.6%200l.6.6a1.8%201.8%200%200%201%200%202.6L8.7%2018.5z%27%2F%3E%3Cpath%20d%3D%27m13.5%207.3%203.2%203.2%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="archive"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%274.5%27%20width%3D%2717%27%20height%3D%274%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M5.5%208.5V19h13V8.5M10%2012.5h4%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="details"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203.5h7l4%204V20H7z%27%2F%3E%3Cpath%20d%3D%27M14%203.5v4h4M9.5%2012h6M9.5%2015.5h6%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="logout"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%204.5H5.5v15H10M14%208l4%204-4%204M18%2012H9%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="plus"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="alert"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204%203%2019.5h18z%27%2F%3E%3Cpath%20d%3D%27M12%2010v4.5M12%2017v.2%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="chart"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h16M7%2016.5V12M12%2016.5V7M17%2016.5v-6%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="calendar"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%275.5%27%20width%3D%2716%27%20height%3D%2714.5%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M4%2010h16M8.5%203.5v4M15.5%203.5v4%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="people"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M5%2020c.5-3.8%203.3-6%207-6s6.5%202.2%207%206%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="check"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012.5%204.5%204.5L19%207.5%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="chevron"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%206%206%206-6%206%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="download"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204v11M7.5%2010.5%2012%2015l4.5-4.5M5%2019.5h14%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="upload"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2015V4M7.5%208.5%2012%204l4.5%204.5M5%2019.5h14%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="mail"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%275.5%27%20width%3D%2717%27%20height%3D%2713%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m4%207%208%206%208-6%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="bug"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%277.5%27%20y%3D%277.5%27%20width%3D%279%27%20height%3D%2712%27%20rx%3D%274.5%27%2F%3E%3Cpath%20d%3D%27M12%2011v8M4%2013h3.5M16.5%2013H20M5%208l2.7%201.8M19%208l-2.7%201.8M5%2019l2.7-1.8M19%2019l-2.7-1.8M9.5%207.5l-1-2.5M14.5%207.5l1-2.5%27%2F%3E%3C%2Fsvg%3E"); }
.sp-icon[data-icon="shield"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.5%2019%206v5.5c0%204.4-3%207.6-7%209-4-1.4-7-4.6-7-9V6z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M8.6%2016c.6-1.7%201.9-2.6%203.4-2.6s2.8.9%203.4%202.6%27%2F%3E%3C%2Fsvg%3E"); }
/* A tent, for the Dens & Campsites Directory (Peter, 20 October 2026). */
.sp-icon[data-icon="tent"] { --sp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%2019.5h19%27%2F%3E%3Cpath%20d%3D%27M4.5%2019.5%2012%205.5l7.5%2014%27%2F%3E%3Cpath%20d%3D%27M10.5%203.5%2012%205.5l1.5-2%27%2F%3E%3Cpath%20d%3D%27M9.5%2019.5%2012%2014.5l2.5%205%27%2F%3E%3C%2Fsvg%3E"); }

/* =====================================================================
   THE BANNER (Peter, 16 October 2026)
   ScoutProgress on the left, the Group's own logo on the right, at the top
   of every signed-in page. sp-nav.js draws it straight after the menu, in
   the page's own flow and width. It replaces the Group logo that some pages
   used to place for themselves, so those are hidden while it is there, and
   on a phone it takes the place of the slim strip above the page.
   ===================================================================== */
.sp-brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-space-4);
    max-width: var(--sp-page-max);
    margin: 0 auto;
    padding: var(--sp-space-5) var(--sp-page-pad-x) 0;
    box-sizing: border-box;
}
.sp-brandbar-home { display: block; line-height: 0; border-radius: var(--sp-radius-control); }
.sp-brandbar-home:focus-visible { outline: var(--sp-focus-light); outline-offset: 4px; }
/* assets/scoutprogress-banner-540.png is the artwork alone, trimmed and
   made at twice this size, so it stays sharp on any screen. */
.sp-brandbar-logo { display: block; height: 48px; width: auto; max-width: 100%; }
.sp-brandbar-group { display: block; flex: none; width: auto; height: 80px; max-width: 180px; object-fit: contain;
    padding: 4px; border: 1px solid var(--line); border-radius: var(--sp-radius-control); background: #fff; }
.sp-brandbar-group[hidden] { display: none; }
html.sp-has-brandbar .group-logo-top,
html.sp-has-brandbar #dashboardGroupLogo { display: none !important; }
/* The page's own top padding sits under the banner, not above it. */
html.sp-has-brandbar .sp-brandbar ~ main.sp-page-width { padding-top: var(--sp-space-4); }
/* Wherever there is no sidebar, the strip that said whose app this is. */
@media (max-width: 1023px) {
    html.sp-has-brandbar .sp-mobilebar { display: none; }
}
@media (max-width: 700px) {
    .sp-brandbar { padding-top: var(--sp-space-3); }
    .sp-brandbar-logo { height: 32px; }
    .sp-brandbar-group { height: 52px; max-width: 120px; }
}