/* --------------------------------------------------------------------------
   Scouting Central — responsive app shell (320px–1200px), outdoors palette
   Layout: CSS only (no JS). Mobile: bottom hamburger + sheet. Desktop: left nav.
   -------------------------------------------------------------------------- */

:root {
    /* Outdoors / trail palette */
    --color-bg: #f4f1e8;
    --color-bg-subtle: #e8e4d9;
    --color-surface: #ffffff;
    --color-text: #1a2e1f;
    --color-text-muted: #3d5240;
    --color-primary: #1e4d3b;
    --color-primary-elevated: #2a6b52;
    --color-on-primary: #f0f7f2;
    --color-accent: #8b5a2b;
    --color-accent-hover: #6d471f;
    --color-link: #0d4d3d;
    --color-link-hover: #062018;
    --color-border: #c4c0b4;
    --color-focus-ring: #1a5f7a;
    --shadow-soft: 0 2px 8px rgba(26, 46, 31, 0.08);
    --shadow-lift: 0 4px 20px rgba(26, 46, 31, 0.12);
    --radius-sm: 6px;
    --radius-md: 10px;
    --sidebar-width: 16.25rem;
    --mobile-nav-height: 3.5rem;
    --content-max: 75rem;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --step-2: clamp(1.35rem, 1.2rem + 0.65vw, 1.65rem);
    --step-3: clamp(1.65rem, 1.35rem + 1.1vw, 2rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.55;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Responsive images & media */
img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

img {
    display: block;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0.5rem;
    z-index: 1000;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.skip-link:focus {
    left: 0.5rem;
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Flash messages (centralized, centered)
   -------------------------------------------------------------------------- */
.flash-messages {
    margin: 0 0 1.25rem;
    padding: 0;
}

.flash-messages .flash {
    margin: 0 0 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    line-height: 1.45;
}

.flash--error {
    color: #5c1a1a;
    background: #fde8e8;
    border: 1px solid #e07070;
}

.flash--success {
    color: #14532d;
    background: #dcfce7;
    border: 1px solid #3cb371;
}

.flash--info {
    color: #5c4a12;
    background: #fef3c7;
    border: 1px solid #d4a017;
}

/* Mobile menu toggle: checkbox inside bottom-bar label (keyboard + screen reader) */
.nav-bottom-toggle {
    position: relative;
}

.nav-bottom-toggle input[type="checkbox"] {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.nav-bottom-toggle:focus-within {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

.nav-bottom-toggle svg {
    position: relative;
    z-index: 0;
    pointer-events: none;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   App shell
   -------------------------------------------------------------------------- */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.app-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.75rem min(1.25rem, 4vw);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

.app-header__brand {
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.app-header__brand a {
    color: var(--color-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.app-header__brand a:hover {
    color: var(--color-primary-elevated);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.app-header__brand a:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.app-header__env-pill {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    color: #fff;
    background: var(--color-accent);
    border-radius: 999px;
}

.app-body {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

/* Backdrop (mobile): closes menu when “clicked” */
.nav-backdrop {
    display: none;
}

/* --------------------------------------------------------------------------
   Sidebar + main
   -------------------------------------------------------------------------- */
.app-sidebar {
    flex-shrink: 0;
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.sidebar-panel {
    flex: 1;
    min-width: 0;
}

.sidebar-panel nav {
    padding: 1rem 0.75rem 1rem;
}

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

.nav-list a {
    display: block;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
}

.nav-list a:hover {
    background: rgba(255, 255, 255, 0.12);
}

.nav-list a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.nav-list a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}

.nav-auth-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
    font-weight: 600;
}

.nav-auth-links a {
    display: inline;
    padding: 0.15rem 0.35rem;
}

.nav-auth-links__sep {
    color: rgba(255, 255, 255, 0.55);
    user-select: none;
}

.nav-group {
    margin-top: 0.25rem;
}

.nav-unit-picker {
    margin-top: 0.25rem;
}

.nav-unit-picker__single {
    display: block;
    padding: 0.5rem 0.85rem 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240, 247, 242, 0.85);
}

.nav-unit-picker form {
    margin: 0;
}

.nav-unit-picker__option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.85rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    color: var(--color-on-primary);
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.nav-unit-picker__option:hover {
    background: rgba(255, 255, 255, 0.12);
}

.nav-unit-picker__option:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.nav-unit-picker__option[aria-current="true"] {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}

.nav-group__details {
    /* reset browser default */
}

.nav-group__details > summary {
    list-style: none;
    cursor: pointer;
}

.nav-group__details > summary::-webkit-details-marker {
    display: none;
}

.nav-group__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0.5rem 0.85rem 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240, 247, 242, 0.85);
    user-select: none;
}

.nav-group__label::after {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid rgba(240, 247, 242, 0.6);
    border-bottom: 2px solid rgba(240, 247, 242, 0.6);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
    margin-bottom: 0.1em;
}

.nav-group__details[open] > .nav-group__label::after {
    transform: rotate(-135deg);
    margin-bottom: -0.15em;
}

.nav-list--nested {
    margin: 0 0 0.25rem;
    padding: 0 0 0.25rem 0.65rem;
    border-left: 2px solid rgba(255, 255, 255, 0.25);
}

.nav-list--nested a {
    font-size: 0.9375rem;
    font-weight: 600;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.sidebar-brand {
    padding: 0 0.85rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.88;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 0.5rem;
}

.nav-bottom-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mobile-nav-height);
    padding: 0.35rem min(1rem, 4vw);
    background: #163529;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-bottom-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
    cursor: pointer;
    color: var(--color-on-primary);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-md);
}

.nav-bottom-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav-bottom-toggle svg {
    display: block;
}

.app-content-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
}

.app-main {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 1.25rem min(1.25rem, 4vw) 2rem;
    scroll-margin-top: 1rem;
}

.app-main :first-child {
    margin-top: 0;
}

.app-main h1 {
    font-size: var(--step-3);
    line-height: 1.2;
    color: var(--color-primary);
}

.app-main h2 {
    font-size: var(--step-2);
    line-height: 1.25;
    color: var(--color-primary-elevated);
}

.app-main a {
    color: var(--color-link);
    text-underline-offset: 0.18em;
}

.app-main a:hover {
    color: var(--color-link-hover);
}

.app-main a:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.app-footer {
    flex-shrink: 0;
    padding: 1rem min(1.25rem, 4vw);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
}

.app-footer p {
    margin: 0;
}

.app-footer a {
    color: var(--color-link);
    font-weight: 600;
}

.app-footer a:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Unit registration — guest overlay blocks form interaction
   -------------------------------------------------------------------------- */
.unit-registration__form-panel {
    position: relative;
    width: 100%;
    max-width: min(28rem, 100%);
    margin-inline: auto;
}

.unit-registration__form-panel > form {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
}

.unit-registration__fields {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.unit-registration__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem;
    text-align: center;
    background: rgba(244, 241, 232, 0.82);
    backdrop-filter: blur(3px);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px rgba(196, 192, 180, 0.55);
}

.unit-registration__overlay-message {
    margin: 0;
    max-width: 20rem;
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
}

.unit-registration__overlay-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

.unit-registration__units {
    width: 100%;
    max-width: min(56rem, 100%);
    margin: 2.5rem auto 0;
    padding: 0 min(0.25rem, 2vw);
}

.unit-registration__units-heading {
    margin: 0 0 1rem;
    font-size: var(--step-2);
    font-weight: 700;
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Membership — member list and sign-in prompt
   -------------------------------------------------------------------------- */
.membership__signin {
    width: 100%;
    max-width: min(28rem, 100%);
    margin-inline: auto;
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.membership__signin-message {
    margin: 0 0 1.25rem;
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
}

.membership__signin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

.membership__empty {
    margin: 0;
    font-size: var(--step-1);
    color: var(--color-text-muted);
}

.membership__list {
    width: 100%;
    max-width: min(56rem, 100%);
    margin: 0 auto;
    padding: 0 min(0.25rem, 2vw);
}

.membership__list-heading {
    margin: 0 0 1rem;
    font-size: var(--step-2);
    font-weight: 700;
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Unit summary — membership stats, roster, member forms
   -------------------------------------------------------------------------- */
.unit-summary {
    width: 100%;
    max-width: min(56rem, 100%);
    margin: 0 auto;
    padding: 0 min(0.25rem, 2vw);
}

.unit-summary__subtitle {
    margin: 0.35rem 0 0;
    font-size: var(--step-0);
    color: var(--color-text-muted);
}

.unit-summary__section-heading {
    margin: 0 0 1rem;
    font-size: var(--step-2);
    font-weight: 700;
    color: var(--color-text);
}

.unit-summary__stats {
    margin-bottom: 2.5rem;
}

.unit-summary__stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1rem;
    margin: 0;
}

.unit-summary__stat {
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.unit-summary__stat dt {
    margin: 0 0 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.unit-summary__stat dd {
    margin: 0;
    font-size: var(--step-2);
    font-weight: 700;
    color: var(--color-primary);
}

.unit-summary__add,
.unit-summary__roster,
.unit-summary__edit {
    margin-bottom: 2.5rem;
}

.unit-summary__add-note {
    margin: 0 0 1rem;
    font-size: var(--step-0);
    color: var(--color-text-muted);
}

.unit-summary__form-fields {
    width: 100%;
    max-width: min(28rem, 100%);
}

.unit-summary__form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.unit-summary__empty {
    margin: 0;
    color: var(--color-text-muted);
}

.unit-summary__restricted {
    color: var(--color-text-muted);
}

.unit-summary__form-fields fieldset {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.unit-summary__form-fields fieldset > legend {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-text);
}

.unit-summary__form-fields fieldset label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
    cursor: pointer;
}

.unit-summary__back {
    margin: 0;
    font-size: var(--step-0);
}

.unit-summary__back a {
    color: var(--color-link);
}

.unit-summary__table-wrap,
.membership__table-wrap,
.unit-registration__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.unit-summary__table,
.membership__table,
.unit-registration__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--step-0);
}

.unit-summary__table th,
.unit-summary__table td,
.membership__table th,
.membership__table td,
.unit-registration__table th,
.unit-registration__table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.unit-summary__table th,
.membership__table th,
.unit-registration__table th {
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-bg-subtle);
}

.unit-summary__table tbody tr:last-child td,
.membership__table tbody tr:last-child td,
.unit-registration__table tbody tr:last-child td {
    border-bottom: none;
}

.unit-summary__table tbody tr:hover,
.membership__table tbody tr:hover,
.unit-registration__table tbody tr:hover {
    background: rgba(30, 77, 59, 0.04);
}

.btn--secondary {
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    box-shadow: none;
}

.btn--secondary:hover {
    background: var(--color-bg-subtle);
    color: var(--color-primary-elevated);
}

/* --------------------------------------------------------------------------
   Forms (Symfony form_div_layout): mobile-friendly width, padding, centering
   -------------------------------------------------------------------------- */
.app-main form {
    width: 100%;
    max-width: min(28rem, 100%);
    margin-inline: auto;
    padding: 0 min(0.25rem, 2vw);
}

.app-main form > ul:not(.bulk-req-list) {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    line-height: 1.45;
    color: #5c1a1a;
    background: #fde8e8;
    border: 1px solid #e07070;
    border-radius: var(--radius-sm);
    text-align: center;
}

.app-main form > ul:not(.bulk-req-list) > li {
    margin: 0;
    padding: 0.25rem 0;
}

.app-main form > div {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    text-align: left;
}

.app-main form > div > label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.35;
    padding-inline: 0.1rem;
}

.app-main form > div > ul {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: #5c1a1a;
    background: #fde8e8;
    border: 1px solid #e07070;
    border-radius: var(--radius-sm);
}

.app-main form > div > ul > li {
    margin: 0;
    padding: 0.15rem 0;
}

/* Checkbox / boolean: checkbox + label on one row (Symfony order: label, errors, input, help) */
.app-main form > div:has(> input[type="checkbox"]) {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    align-items: start;
}

.app-main form > div:has(> input[type="checkbox"]) > label {
    grid-column: 2;
    grid-row: 1;
    font-weight: 600;
    padding-top: 0.15rem;
}

.app-main form > div:has(> input[type="checkbox"]) > input[type="checkbox"] {
    grid-column: 1;
    grid-row: 1;
    width: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.app-main form > div:has(> input[type="checkbox"]) > input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
}

.app-main form > div:has(> input[type="checkbox"]) > ul {
    grid-column: 1 / -1;
    grid-row: 2;
}

.app-main form > div:has(> input[type="checkbox"]) > .help-text {
    grid-column: 1 / -1;
    grid-row: 3;
}

.app-main input[type="text"],
.app-main input[type="email"],
.app-main input[type="password"],
.app-main input[type="search"],
.app-main input[type="url"],
.app-main input[type="tel"],
.app-main input[type="number"],
.app-main input[type="date"],
.app-main input[type="time"],
.app-main input[type="datetime-local"],
.app-main input[type="file"],
.app-main select,
.app-main textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    min-height: 2.75rem;
    box-sizing: border-box;
}

.app-main textarea {
    min-height: 6rem;
    resize: vertical;
}

/* Date/time inputs: the whole field opens the picker (app.js), so hide the
   native indicator icon. */
.app-main input[type="date"],
.app-main input[type="time"],
.app-main input[type="datetime-local"] {
    cursor: pointer;
}

.app-main input[type="date"]::-webkit-calendar-picker-indicator,
.app-main input[type="time"]::-webkit-calendar-picker-indicator,
.app-main input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.app-main select {
    cursor: pointer;
    appearance: auto;
}

.app-main input:where(:not([type="checkbox"]):not([type="radio"])):focus-visible,
.app-main select:focus-visible,
.app-main textarea:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-color: var(--color-primary-elevated);
}

.app-main input:where(:not([type="checkbox"]):not([type="radio"])):disabled,
.app-main select:disabled,
.app-main textarea:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.app-main .help-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.app-main button {
    font: inherit;
}

.app-main .btn,
.app-main a.btn,
.app-main form > button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.65rem 1.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.app-main form > button[type="submit"],
.app-main form .btn {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin-top: 0.35rem;
    margin-inline: auto;
    padding: 0.75rem 1.25rem;
}

.app-main .btn:hover,
.app-main a.btn:hover,
.app-main form > button[type="submit"]:hover,
.app-main form .btn:hover {
    background: var(--color-primary-elevated);
}

.app-main .btn:focus-visible,
.app-main a.btn:focus-visible,
.app-main form > button[type="submit"]:focus-visible,
.app-main form .btn:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.app-main .btn--secondary,
.app-main a.btn--secondary {
    color: var(--color-primary);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.app-main .btn--secondary:hover,
.app-main a.btn--secondary:hover {
    color: var(--color-primary-elevated);
    background: var(--color-bg-subtle);
}

.app-main .unit-summary__form-actions .btn,
.app-main .unit-summary__form-actions a.btn {
    display: inline-flex;
    width: auto;
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Mobile: ≤ 47.999rem (~768px)
   -------------------------------------------------------------------------- */
@media (max-width: 47.999rem) {
    .app-main > h1 {
        text-align: center;
    }

    .app-shell {
        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0));
    }

    .app-body {
        flex-direction: column;
        position: relative;
    }

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 80;
        margin: 0;
        background: rgba(26, 46, 31, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    body:has(#nav-toggle:checked) .nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .app-sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        max-height: 85vh;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        box-shadow: var(--shadow-lift);
    }

    .sidebar-panel {
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 0.28s ease, visibility 0.28s ease;
    }

    body:has(#nav-toggle:checked) .sidebar-panel {
        max-height: min(70vh, 28rem);
        overflow-y: auto;
        visibility: visible;
    }

    .sidebar-brand {
        display: none;
    }

    .app-content-column {
        flex: 1;
    }
}

/* --------------------------------------------------------------------------
   Desktop: ≥ 48rem — left nav, hide mobile chrome
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
    .nav-backdrop {
        display: none !important;
    }

    .app-body {
        flex-direction: row;
        align-items: stretch;
    }

    .app-sidebar {
        position: static;
        width: var(--sidebar-width);
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }

    .sidebar-panel {
        max-height: none !important;
        overflow: visible !important;
        visibility: visible !important;
        flex: 1;
    }

    .sidebar-brand {
        display: block;
    }

    .nav-bottom-bar {
        display: none;
    }

    .app-shell {
        padding-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-backdrop,
    .sidebar-panel {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Events page: toolbar (view toggle + actions) and the upcoming-events list
   -------------------------------------------------------------------------- */
.events-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.events-view-toggle {
    display: inline-flex;
    padding: 0.2rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.app-main .events-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text);
    border-radius: 999px;
    text-decoration: none;
}

.app-main .events-view-toggle__btn:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.app-main .events-view-toggle__btn--active,
.app-main .events-view-toggle__btn--active:hover {
    color: var(--color-on-primary);
    background: var(--color-primary);
    box-shadow: var(--shadow-soft);
}

.events-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.events__empty {
    margin: 0;
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

/* List view: one card per month, one row per event with a date block. */
.event-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.event-list__month {
    margin: 0 0 0.6rem;
    font-size: var(--step-1);
    font-weight: 700;
    color: var(--color-text);
}

.event-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.event-list__item + .event-list__item {
    border-top: 1px solid var(--color-border);
}

.app-main .event-list__link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.1rem;
    color: inherit;
    text-decoration: none;
}

.app-main .event-list__link:hover,
.app-main .event-list__link:focus-visible {
    background: var(--color-bg);
    text-decoration: none;
}

.app-main .event-list__link:hover .event-list__name {
    color: var(--color-primary);
    text-decoration: underline;
}

.event-list__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 3.5rem;
    min-height: 3.5rem;
    padding: 0.3rem 0;
    line-height: 1.05;
    color: var(--color-primary);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
}

.event-list__weekday {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.event-list__day {
    font-size: 1.5rem;
    font-weight: 700;
}

.event-list__item--today .event-list__date {
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.event-list__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.event-list__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.event-list__name {
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.event-list__name--canceled {
    text-decoration: line-through;
}

.event-list__item--canceled .event-list__name,
.event-list__item--canceled .event-list__meta {
    color: var(--color-text-muted);
}

.event-list__item--canceled .event-list__date {
    color: var(--color-text-muted);
    background: var(--color-bg);
}

.event-list__unit {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.event-list__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.event-list__location::before {
    content: "·";
    margin-right: 0.5rem;
}

.badge--canceled {
    color: #5c1a1a;
    background: #fde8e8;
}

@media (max-width: 30rem) {
    .events-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .events-view-toggle {
        align-self: flex-start;
    }

    .app-main .event-list__link {
        gap: 0.75rem;
        padding: 0.7rem 0.85rem;
    }

    .event-list__location::before {
        content: none;
    }

    .event-list__location {
        flex-basis: 100%;
    }
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.calendar-nav__heading {
    margin: 0;
    font-size: var(--step-2);
    color: var(--color-primary);
}

.calendar-wrap {
    overflow-x: auto;
}

.calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--step-0);
}

.calendar thead th {
    padding: 0.5rem 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
}

.calendar__cell {
    position: relative;
    vertical-align: top;
    min-width: 2.5rem;
    /* height on td acts as min-height; cell-padding×2 + day(0.875rem×1.55 + 0.2rem margin) + 2×event(0.15rem margin + 0.3rem padding + 0.75rem×1.3) */
    height: calc(0.35rem * 2 + 0.875rem * 1.55 + 0.2rem + (0.15rem + 0.3rem + 0.75rem * 1.3) * 2);
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.calendar__cell--padding {
    background: var(--color-bg-subtle);
}

.calendar__cell--today {
    background: #eaf4ee;
}

.calendar__cell--has-events {
    border: 2px solid var(--color-primary);
}

.calendar__day {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
}

.calendar__cell--today .calendar__day {
    color: var(--color-primary);
}

.app-main .calendar__event {
    display: block;
    margin-top: 0.15rem;
    padding: 0.15rem 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-main .calendar__event:hover {
    background: var(--color-primary-elevated);
    color: #ffffff;
    text-decoration: none;
}

.calendar__event-unit {
    font-size: 0.6875rem;
    font-weight: 400;
    opacity: 0.85;
    margin-left: 0.25rem;
}

/* Tooltip: hidden by default, shown on cell hover */
.calendar__tooltip {
    display: none;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 50%;
    translate: -50% calc(-100% - 6px);
    min-width: 10rem;
    max-width: 16rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lift);
    pointer-events: none;
    white-space: normal;
    word-break: break-word;
}

.calendar__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    border: 6px solid transparent;
    border-top-color: var(--color-primary);
}

.calendar__cell--has-events:hover .calendar__tooltip {
    display: block;
}

.requirements-list {
    list-style: none;
    padding-left: 1rem;
    margin: 0.25rem 0;
}

.requirements-list--children {
    margin-top: 0.25rem;
}

/* Autocomplete widget */
.autocomplete {
    position: relative;
}

.autocomplete__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
    min-height: 0;
}

.autocomplete__badge {
    margin-bottom: 0.35rem;
}

.autocomplete__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    line-height: 1.3;
}

.autocomplete__remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    opacity: 0.75;
}

.autocomplete__remove:hover {
    opacity: 1;
}

.autocomplete__dropdown {
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    background: #fff;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    max-height: 16rem;
    overflow-y: auto;
}

.autocomplete__option {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: 0.9375rem;
}

.autocomplete__option:hover,
.autocomplete__option:focus,
.autocomplete__option--active {
    background: var(--color-bg-subtle);
}

.autocomplete__option--selected {
    color: var(--color-primary);
    font-weight: 600;
}

/* Keyboard highlight (arrow keys); Enter picks it instead of submitting. */
.autocomplete__option--active {
    background: var(--color-primary-light, #eff6ff);
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}

.autocomplete__no-results {
    padding: 0.45rem 0.75rem;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.9375rem;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Data-table lists (admin + unit members): action/filter/bulk bars, table,
   badges, pagination. Shared by every checkbox-bulk index page.
   -------------------------------------------------------------------------- */
.app-main form.filter-bar,
.app-main form.table-form,
.app-main form.pagination__per-page {
    max-width: 100%;
    margin-inline: 0;
}

.app-main form.filter-bar .btn,
.app-main form.table-form .btn,
.app-main form.pagination__per-page .btn,
.app-main form.filter-bar > button[type="submit"],
.app-main form.table-form > button[type="submit"] {
    display: inline-flex;
    width: auto;
    margin-top: 0;
    margin-inline: 0;
}

/* Inputs in a flex filter/bulk bar size to their content instead of the form's full width. */
.app-main form.filter-bar select,
.app-main form.filter-bar input:not([type="hidden"]),
.app-main .bulk-bar select,
.app-main .bulk-bar input:not([type="hidden"]) {
    width: auto;
    max-width: 100%;
}

.action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block: 1rem;
}

.app-main .action-bar form {
    width: auto;
    margin-inline: 0;
}

/* The hidden attribute must always win, even over author display rules
   (e.g. .bulk-bar's flex) — the UA's [hidden] rule alone loses to any
   author declaration. */
[hidden] {
    display: none !important;
}

.filter-bar,
.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

/* A bulk bar is a direct child of its form, so the generic form > div
   column layout would otherwise stack its controls. */
.app-main form > .bulk-bar {
    flex-direction: row;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.input {
    padding: 0.5rem 0.75rem;
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.input--sm {
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
}

.app-main .btn--sm {
    min-height: 2.1rem;
    min-width: auto;
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
}

.app-main .btn--danger,
.app-main a.btn--danger {
    color: #fdf4f2;
    background: #8c2f24;
}

.app-main .btn--danger:hover,
.app-main a.btn--danger:hover {
    background: #6f251c;
}

/* Visually disabled button that stays clickable so it can explain itself
   (e.g. opening the "delete blocked" dialog). */
.app-main .btn--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.app-main .btn--disabled:hover {
    background: #8c2f24;
}

/* Inside a form, .btn is full-width and stacked; an .action-bar overrides that
   so submit/cancel/delete share one horizontal line. */
.app-main form .action-bar .btn,
.app-main form .action-bar button {
    display: inline-flex;
    width: auto;
    max-width: none;
    margin: 0;
}

/* Expanded choice widget rendered as a vertical checkbox list: each
   input+label sibling pair becomes one grid row. */
.app-main form .choice-stack {
    display: grid;
    grid-template-columns: min-content 1fr;
    column-gap: 0.6rem;
    row-gap: 0.5rem;
    align-items: center;
}

.app-main form .choice-stack > label {
    font-weight: 400;
    margin: 0;
}

.app-main form .choice-stack input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 1.15rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Native <dialog> modal */
dialog.modal {
    max-width: 26rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-soft);
}

dialog.modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

dialog.modal h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.app-main dialog.modal form {
    width: auto;
    margin: 0.75rem 0 0;
    padding: 0;
    text-align: right;
}

.app-main dialog.modal form.new-member-form {
    text-align: left;
}

.app-main dialog.modal form .btn,
.app-main dialog.modal form button {
    display: inline-flex;
    width: auto;
    margin: 0;
}

dialog.modal--location {
    max-width: 34rem;
    width: min(34rem, calc(100vw - 2rem));
}

dialog.modal .modal__fields > div {
    margin-bottom: 0.9rem;
}

dialog.modal .modal__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.app-main dialog.modal .modal__actions .btn {
    display: inline-flex;
    width: auto;
    margin: 0;
}

/* Tab strip (event page) */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 1.25rem;
    border-bottom: 2px solid var(--color-border);
}

.tabs__tab {
    display: inline-block;
    padding: 0.6rem 1rem;
    margin-bottom: -2px;
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--color-text-muted);
    font-weight: 600;
    text-decoration: none;
}

.tabs__tab:hover {
    color: var(--color-text);
    background: var(--color-bg-subtle);
}

.tabs__tab[aria-selected="true"] {
    color: var(--color-primary);
    background: var(--color-surface);
    border-color: var(--color-border);
    border-bottom: 2px solid var(--color-surface);
}

.tabs__tab:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.tabs__panel[hidden] {
    display: none;
}

.event-detail__rsvp-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.event-detail__rsvp-count {
    min-width: 7rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.event-detail__rsvp-count dt {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.event-detail__rsvp-count dd {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.event-detail__picker-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
    margin: 0.75rem 0;
    width: auto;
    max-width: none;
}

.app-main .event-detail__picker-form > div {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    min-width: 14rem;
}

.bulk-req--linked .bulk-req__row {
    opacity: 0.65;
}

.event-detail__completion-req {
    text-align: center;
    vertical-align: bottom;
}

.event-detail__completion-req-name {
    display: block;
    font-size: 0.8125rem;
}

.event-detail__completion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.event-detail__completion-table td {
    text-align: center;
}

.event-detail__completion-others {
    margin: 1rem 0;
}

.event-advancement-result__list {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
}

.event-advancement-result__list--errors {
    color: #5c1a1a;
}

.app-main .event-attendance__nights {
    width: 5rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.5rem;
}

.app-main .event-detail__rsvp-note input,
.app-main .event-detail__rsvp-manage-table input[type="text"] {
    min-height: 2.25rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.9375rem;
}

/* Members list: a member with a linked account gets a small link glyph after
   the name; the email is in the tooltip. */
.linked-account-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.3rem;
    color: var(--color-text-muted);
}

/* RSVP tab: the manager sheet and the attendee list are headed subsections
   under one "group by patrol" toggle. */
.event-detail__subsection {
    margin-top: 2rem;
}

.event-detail__subsummary {
    cursor: pointer;
    margin-bottom: 0.75rem;
}

.event-detail__subsummary:hover .event-detail__subheading {
    color: var(--color-primary);
}

.event-detail__subheading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.1rem;
}

.event-detail__subheading-count {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.app-main form.event-detail__grouping {
    margin: 1.5rem 0 0;
}

.event-detail__attendees-table td:not(.event-detail__attendee-note) {
    white-space: nowrap;
}

.event-detail__attendees-note-col {
    width: 100%;
}

.rsvp-badge--going {
    color: #1e4d3b;
    background: #dff3e7;
}

.rsvp-badge--maybe {
    color: #6b4a00;
    background: #fdf1cf;
}

.rsvp-badge--not-going {
    color: #5c1a1a;
    background: #fde8e8;
}

/* Manage everyone's RSVP: the form spans the section instead of the usual
   form width, the type stays on one line, the RSVP select is wide enough to
   read its longest option unopened, and the note takes the rest of the row. */
.app-main form.event-detail__rsvp-manage-form {
    max-width: 100%;
    margin-inline: 0;
}

.app-main form.event-detail__rsvp-manage-form > .btn {
    display: inline-flex;
    width: auto;
    margin-inline: 0;
}

.event-detail__rsvp-manage-table .rsvp-manage__type {
    white-space: nowrap;
}

.event-detail__rsvp-manage-table .rsvp-manage__rsvp {
    min-width: 11rem;
}

.event-detail__rsvp-manage-table .rsvp-manage__note {
    width: 100%;
    min-width: 14rem;
}

.app-main .event-detail__rsvp-manage-table select {
    min-width: 10rem;
    min-height: 2.25rem;
    padding-block: 0.35rem;
    font-size: 0.9375rem;
}

.event-detail__attendee-note {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.budget-section {
    margin: 0 0 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.budget-section > summary {
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    list-style: revert;
}

.budget-section > summary h3 {
    display: inline;
    margin: 0;
    font-size: 1.1rem;
}

.app-main .icon-button,
.app-main .budget-section__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0 0 0 0.35rem;
    padding: 0;
    vertical-align: middle;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary);
    cursor: pointer;
}

.app-main .icon-button:hover,
.app-main .icon-button[aria-expanded="true"],
.app-main .budget-section__edit:hover,
.app-main .budget-section__edit[aria-expanded="true"] {
    background: var(--color-primary);
    color: #fff;
}

/* Cancel / delete buttons at the foot of the event edit form */
.events-form__danger-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.events-form__danger-actions form {
    display: inline;
    margin: 0;
}

/* Pencil beside a page or section title */
.app-main h1 .icon-button,
.app-main h2 .icon-button,
.app-main h3 .icon-button {
    margin-left: 0.5rem;
}

.app-main h1 .icon-button {
    width: 2rem;
    height: 2rem;
}

.budget-edit {
    padding: 0.75rem 0 0.5rem;
}

.budget-edit[hidden] {
    display: none;
}

.budget-section[open] > summary {
    border-bottom: 1px solid var(--color-border);
}

.budget-section > :not(summary) {
    padding-inline: 0.9rem;
}

.budget-section > .help-text {
    padding-top: 0.75rem;
}

.budget-summary__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0 0 1rem;
}

.budget-summary__facts dt {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.budget-summary__facts dd {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.budget-table__num {
    text-align: right;
    white-space: nowrap;
}

.budget-table__computed th {
    font-weight: 400;
    color: var(--color-text-muted);
}

.budget-table tfoot th,
.budget-table tfoot td {
    border-top: 2px solid var(--color-border);
}

.budget-table__grand th,
.budget-table__grand td {
    font-weight: 700;
    font-size: 1.05rem;
}

.app-main .budget-form {
    width: auto;
    max-width: none;
}

.budget-form__group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
}

.budget-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.5rem;
}

@media (min-width: 40rem) {
    .budget-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.money-input {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.app-main .money-input input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.budget-form__expense {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: end;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.app-main .budget-form__expense > div {
    margin: 0;
}

.app-main .budget-form__expense .btn {
    width: auto;
    margin: 0;
}

/* Budget form: hide the fields that do not apply to the expense type. */
.budget-form__expense [hidden] {
    display: none !important;
}

@media (min-width: 40rem) {
    .app-main .budget-form input[type="number"],
    .app-main .budget-form input[type="text"],
    .app-main .budget-form select,
    .app-main .unit-summary__settings-form input[type="number"] {
        max-width: 12rem;
    }

    .app-main .budget-form input[id$="_campMaster"],
    .app-main .budget-form input[id$="_name"] {
        max-width: 20rem;
    }
}

/* Advancement hub */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.hub-card {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.hub-card h2 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.hub-card--primary {
    margin-bottom: 1.25rem;
    border-color: var(--color-primary);
}

.app-main .hub-card--primary .btn {
    display: inline-flex;
    width: auto;
    margin-top: 0.5rem;
}

.hub-list--tools {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hub-list--tools li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-border);
}

.hub-list--tools li:last-child {
    border-bottom: none;
}

.hub-count {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.05rem 0.45rem;
    margin-left: 0.25rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
}

.hub-count--active {
    color: #fff;
    background: var(--color-primary);
}

/* Admin: unit purge */
.danger-zone {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid #b91c1c;
    border-radius: 0.5rem;
}

.danger-zone h2 {
    margin-top: 0;
    color: #b91c1c;
}

.purge-users {
    padding-left: 1.25rem;
}

.purge-form {
    margin-top: 1.5rem;
}

/* Announcements */
.announcements__heading {
    margin-top: 0;
}

.announcement-card {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 0.5rem;
    background: var(--color-surface);
}

.announcement-card__title {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

.announcement-card__meta {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
}

.announcement-card__body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.announcement-card__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Training */
.training-table__row--expired td,
.training-courses__row--inactive td {
    color: var(--color-text-muted);
}

/* Email history */
.email-body__text {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-bg-subtle);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
}

/* Advancement / merit badge roster milestone dates */
.roster-dates__form {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 12rem;
}

.roster-dates__form label {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.roster-dates__form input[type="date"] {
    font-size: 0.8rem;
}

/* TroopWebHost import progress */
.twh-progress__bar {
    position: relative;
    height: 1.25rem;
    margin: 0.75rem 0 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-subtle);
    overflow: hidden;
}

.twh-progress__fill {
    height: 100%;
    background: var(--color-primary);
    transition: width 0.6s ease;
}

.twh-progress__bar--indeterminate .twh-progress__fill {
    width: 30% !important;
    animation: twh-indeterminate 1.4s ease-in-out infinite;
}

@keyframes twh-indeterminate {
    0% { margin-left: -30%; }
    100% { margin-left: 100%; }
}

.twh-progress__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: baseline;
    margin: 0 0 1rem;
}

.twh-progress__meta strong {
    font-size: 1.4rem;
}

.twh-summary__list {
    padding-left: 1.25rem;
}

.twh-summary__issues {
    margin: 1rem 0;
}

.twh-summary__issues > summary {
    cursor: pointer;
    font-weight: 600;
}

.twh-import__actions {
    margin-top: 1.5rem;
}

/* Multi-requirement sign-off form (member pages, bulk page). Scoped under
   .app-main so it outranks the generic centered narrow form rule. */
.app-main form.signoff-form {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Member rank progress and merit badge pages: one panel per rank/badge,
   requirements table at full width, version switch tucked behind an
   "Edit rank" / "Edit badge" button. The merit badge page reuses these
   rank-section classes alongside its own mb-section hooks. */
.rank-section {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.rank-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.app-main .rank-section__name {
    margin: 0;
    font-size: 1.25rem;
}

.app-main .rank-section__name .badge {
    margin-left: 0.4rem;
    vertical-align: middle;
}

.mb-section__counselor {
    margin-bottom: 0.75rem;
}

.app-main .mb-section__counselor h3 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.mb-counselor {
    margin: 0 0 0.5rem;
}

.rank-section__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.app-main .rank-section__edit {
    margin-left: -0.5rem;
}

.app-main .rank-section__version-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    width: auto;
    max-width: none;
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
}

.app-main .rank-section__version-form label {
    font-weight: 600;
}

.app-main .rank-section__version-form select {
    width: auto;
}

.app-main .rank-section__version-form .btn {
    display: inline-flex;
    width: auto;
    margin: 0;
}

/* Page toolbar: action buttons on the left, a pill filter toggle on the
   right (unawarded items, members). The toggle is its own GET form, so it
   opts out of the generic stacked form layout. */
.page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.page-toolbar .advancement-roster__nav,
.page-toolbar .action-bar {
    margin-bottom: 0;
}

.app-main form.filter-toggle-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.app-main .filter-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0 0.9rem 0 0.7rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}

.app-main .filter-toggle:hover {
    border-color: var(--color-primary);
}

.app-main .filter-toggle:has(input:checked) {
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.app-main .filter-toggle:has(input:focus-visible) {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.app-main .filter-toggle input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    min-height: 1.1rem;
    margin: 0;
    accent-color: var(--color-primary-elevated);
    cursor: pointer;
}

.app-main .filter-toggle:has(input:checked) input[type="checkbox"] {
    accent-color: var(--color-on-primary);
}

@media (max-width: 30rem) {
    .page-toolbar {
        align-items: stretch;
    }

    .app-main .filter-toggle {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Training completions: import-only certificate names can be very long. */
.training-table__cert-name {
    display: inline-block;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-size: 0.85rem;
}

/* Attendance sheet: the patrol-grouping toggle sits above the sheet. */
.app-main form.event-attendance__grouping {
    margin-bottom: 1rem;
}

/* Attendance sheet and RSVP tab: youth/adult/patrol group rows. On the sheet
   the name is the checkbox label. */
.event-attendance__group th,
.event-detail__group-row th {
    padding-top: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
}

.event-attendance__name {
    display: block;
    cursor: pointer;
    font-weight: 600;
}

.event-attendance__name:hover {
    color: var(--color-primary);
}

/* Purchase order: quantity summary above the per-scout tables. */
.purchase-order__summary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.purchase-order__summary-head .rank-section__name {
    margin-bottom: 0;
}

.app-main .purchase-order__summary-head .btn {
    width: auto;
}

.purchase-order__summary {
    max-width: 32rem;
}

.data-table th.purchase-order__qty,
.data-table td.purchase-order__qty {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.purchase-order__summary tfoot th,
.purchase-order__summary tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--color-border);
}

/* Roster: bulk purchase/award bar under the badge table. */
.app-main form.badge-bulk-bar {
    margin-top: 0.75rem;
}

.badge-bulk-bar__label {
    font-weight: 600;
}

.app-main .badge-bulk-bar__option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-weight: 400;
}

.app-main .badge-bulk-bar__option input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 1.15rem;
    margin: 0;
    accent-color: var(--color-primary);
}

/* Rank strip above the panel and previous/next pager below it. On phones the
   strip gives way to a "jump to rank" select. */
.rank-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.app-main form.rank-select {
    display: none;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: none;
    margin: 0 0 1rem;
    padding: 0;
}

.app-main form.rank-select label {
    font-weight: 600;
}

.app-main form.rank-select select {
    flex: 1 1 auto;
    width: auto;
}

.app-main form.rank-select .btn {
    display: inline-flex;
    width: auto;
    margin: 0;
}

@media (max-width: 40rem) {
    .rank-nav {
        display: none;
    }

    .app-main form.rank-select {
        display: flex;
    }
}

.app-main .rank-nav__item {
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.app-main .rank-nav__item--done {
    color: var(--color-primary);
    background: rgba(30, 77, 59, 0.08);
}

.app-main .rank-nav__item[aria-current="page"] {
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.rank-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.app-main .rank-pager .btn {
    display: inline-flex;
    width: auto;
    margin: 0;
}

.advancement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.advancement-table th,
.advancement-table td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.advancement-table th {
    background: var(--color-bg-subtle);
    white-space: nowrap;
}

.advancement-table .req-row__status {
    min-width: 11rem;
}

/* Member rank page rows: no status or note columns. The checkbox carries the
   approved state, an inline badge covers pending/denied, the note field
   appears under the text once ticked, and the description is clamped to
   three lines with a "more…" toggle that also reveals the sign-off details. */
.app-main .req-row__toggle {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-link);
    font-size: 0.875rem;
    text-decoration: underline;
    cursor: pointer;
}

.req-row__details {
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

/* Note field shown under the description once the row is ticked. */
.req-row__note-box {
    margin-top: 0.4rem;
    max-width: 28rem;
}

.app-main .req-row__note-box input {
    width: 100%;
}

.app-main .signoff-check:disabled:checked {
    opacity: 1;
}

.req-row--collapsed .req-row__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.req-row--collapsed .req-row__details {
    display: none;
}

/* Bootstrap-style badge color variants used across advancement pages. */
.badge.bg-success { color: var(--color-primary); background: rgba(30, 77, 59, 0.12); }
.badge.bg-primary { color: var(--color-on-primary); background: var(--color-primary); }
.badge.bg-secondary { color: var(--color-text-muted); background: var(--color-bg-subtle); }
.badge.bg-info { color: #0d3d5c; background: #dbeaf4; }
.badge.bg-warning { color: #5c3a00; background: #f9efdc; }
.badge.bg-danger { color: #5c1a1a; background: #fde8e8; }
.badge.bg-light { color: var(--color-text); background: var(--color-bg-subtle); border: 1px solid var(--color-border); }

.advancement-table .req-row__select {
    width: 2.25rem;
    text-align: center;
}

.advancement-table .req-row__number label {
    cursor: pointer;
    font-weight: 600;
}

.advancement-table .req-row--locked .req-row__description,
.advancement-table .req-row--locked .req-row__number {
    color: var(--color-text-muted);
}

.app-main .signoff-check {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 1.15rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.app-main .signoff-check:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.advancement-table .req-row__note {
    min-width: 12rem;
}

.app-main .signoff-note {
    min-height: 2.25rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.9375rem;
}

.signoff-form__bar,
.app-main form > .signoff-form__bar {
    /* Exempt from both the form > div column layout and the label/field grid. */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 1.5rem;
}

.signoff-form__bar label {
    font-weight: 600;
}

/* Label above its own field; fields sit side by side with the button. The
   inline label grid excludes .signoff-form__field so this layout holds. */
.app-main .signoff-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    min-width: 12rem;
}

.signoff-form__field--grow {
    flex: 1 1 24rem;
}

.app-main .signoff-form__field input {
    max-width: none;
}

.app-main .signoff-form__bar .btn {
    align-self: flex-end;
}

.app-main .signoff-form__bar input {
    width: auto;
    max-width: 16rem;
}

/* The note takes whatever width is left beside the date and the button. */
.app-main .signoff-form__bar .signoff-form__field--grow input {
    width: 100%;
    max-width: none;
}

.app-main .signoff-form__bar .btn {
    display: inline-flex;
    width: auto;
    margin: 0;
}

.bulk-signoff__picker {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.app-main .bulk-signoff__picker > div {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    min-width: 14rem;
}

/* Bulk sign-off requirement tree: nested lists indent per depth. */
.bulk-req-list,
.bulk-req__children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bulk-req-list {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.bulk-req__row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem 0.55rem calc(0.9rem + var(--req-depth, 0) * 1.75rem);
    border-bottom: 1px solid var(--color-border);
    line-height: 1.45;
}

.bulk-req-list > .bulk-req:last-child > .bulk-req__row:last-child,
.bulk-req__children > .bulk-req:last-child > .bulk-req__row:only-child {
    border-bottom: none;
}

.bulk-req--group > .bulk-req__row {
    background: var(--color-bg-subtle);
    font-weight: 600;
}

.bulk-req--group .bulk-req--group > .bulk-req__row {
    background: transparent;
}

.bulk-req__label {
    display: flex;
    gap: 0.6rem;
    flex: 1;
    cursor: pointer;
    font-weight: 400;
    margin: 0;
}

.bulk-req__number {
    flex: 0 0 auto;
    min-width: 2.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.bulk-req--leaf .bulk-req__number {
    color: var(--color-text-muted);
}

.bulk-req__text {
    flex: 1;
    min-width: 0;
}

.app-main .bulk-req__check {
    margin-top: 0.2rem;
}

.bulk-req__row:hover {
    background: var(--color-primary-light, #eff6ff);
}

.bulk-signoff__completed {
    margin: 0.5rem 0 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.bulk-signoff__completed > summary {
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    font-weight: 600;
}

.bulk-signoff__completed[open] > summary {
    border-bottom: 1px solid var(--color-border);
}

.bulk-signoff__completed .bulk-signoff__members--done {
    padding: 0.75rem 0.9rem;
    margin: 0;
    color: var(--color-text-muted);
}

.bulk-signoff__members {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.35rem 1rem;
}

.bulk-signoff__members li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.locations-table__row--inactive td {
    color: var(--color-text-muted);
}

.locations-table__actions {
    white-space: nowrap;
}

.locations-table__actions .btn,
.locations-table__actions .inline-form {
    margin-right: 0.35rem;
}

.inline-form {
    display: inline;
    width: auto;
    margin: 0;
}

.app-main .inline-form .btn {
    display: inline-flex;
    width: auto;
    margin: 0;
}

/* Advancement requirement rows: indent by nesting depth. Merit badge rows set
   --req-depth per row (up to MeritBadgeRequirement::MAX_DEPTH levels); rank
   rows still use the two-level --child class. */
.advancement-table .req-row__description {
    padding-left: calc(var(--req-depth, 0) * 1.5rem);
}

.advancement-table .req-row--child .req-row__description {
    padding-left: 1.5rem;
}

.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.data-table th,
.data-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.data-table th {
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-bg-subtle);
    white-space: nowrap;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: rgba(30, 77, 59, 0.04);
}

.badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}

.badge--success {
    color: var(--color-primary);
    background: rgba(30, 77, 59, 0.12);
}

.badge--muted {
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
}

.warning {
    padding: 0.75rem 1rem;
    background: #f9efdc;
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.5rem;
    margin-block: 1rem;
}

.detail-list dt {
    font-weight: 700;
}

.detail-list dd {
    margin: 0;
}

.page-subtitle {
    margin: 0.15rem 0 0;
    color: var(--color-text-muted);
}

/* Member detail page: header with badges, panel grid, stacked lists on phones */
.member-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.member-header__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-top: 0.35rem;
}

.badge--deleted {
    color: #5c1a1a;
    background: #fde8e8;
}

.detail-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
    margin-block: 1rem;
}

.detail-panel {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.detail-panel--full {
    margin-block: 1rem;
}

.detail-panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
}

.detail-panel .detail-list {
    margin: 0;
}

.detail-panel .table-wrapper,
.rank-section .table-wrapper {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.detail-panel__form,
.detail-panel p.form-help {
    margin: 0.75rem 0 0;
}

.detail-panel__subheading {
    margin: 1rem 0 0.35rem;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.detail-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.detail-panel__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--color-border);
}

.detail-panel__list li:last-child {
    border-bottom: none;
}

.detail-panel__links {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
}

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

@media (max-width: 40rem) {
    .detail-list {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }

    .detail-list dd {
        margin-bottom: 0.6rem;
    }
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}

.pagination__summary {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.pagination__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.pagination__link {
    padding: 0.3rem 0.7rem;
    color: var(--color-link);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.pagination__link--current {
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-color: transparent;
}

.pagination__ellipsis {
    color: var(--color-text-muted);
}

.pagination__per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.pagination__per-page label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

@media (max-width: 40rem) {
    .hide-sm {
        display: none;
    }
}

/* Homepage coming-soon panel */
.coming-soon {
    max-width: 38rem;
    margin-top: 1.5rem;
    padding: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.coming-soon__badge {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: 999px;
}

.coming-soon__heading {
    margin: 0 0 0.75rem;
}

.coming-soon__lead {
    margin: 0;
    color: var(--color-text-muted);
}

.coming-soon__actions {
    margin: 1.5rem 0 0;
}

.coming-soon__actions-sep {
    margin: 0 0.25rem;
    color: var(--color-text-muted);
}

.coming-soon__cta {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.app-main a.coming-soon__cta {
    color: var(--color-on-primary);
}

.coming-soon__cta:hover {
    background: var(--color-primary-elevated);
}

.coming-soon__cta:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   MFA (two-factor authentication)
   -------------------------------------------------------------------------- */

/* Corner dot on the nav Profile link while MFA is not set up. Hover shows
   the native title tooltip. */
.nav-profile-link {
    position: relative;
    padding-right: 0.75rem;
}

.nav-profile-badge {
    position: absolute;
    top: -2px;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #b42510;
    cursor: help;
}

.mfa-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    max-width: 40rem;
}

.mfa-muted {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.mfa-qr {
    display: block;
    margin: 12px 0;
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #ffffff;
}

.mfa-secret {
    display: inline-block;
    padding: 6px 10px;
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    letter-spacing: 2px;
    overflow-wrap: anywhere;
}

.mfa-code-input {
    max-width: 14rem;
    font-size: 1.3rem;
    letter-spacing: 4px;
}

.mfa-backup-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 8px;
    margin: 16px 0;
    padding: 0;
    list-style: none;
}

.mfa-backup-codes code {
    display: block;
    padding: 8px 10px;
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    text-align: center;
}

.mfa-resend-form {
    margin-top: 12px;
}

.mfa-inline-form {
    max-width: 24rem;
}

/* "MFA setup required" modal (forced redirect from the enforcement wall). */
.mfa-required-modal {
    max-width: 26rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lift);
}

.mfa-required-modal::backdrop {
    background: rgba(26, 46, 31, 0.55);
}

.mfa-required-modal h2 {
    margin-top: 0;
}

.mfa-required-modal__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Inline form layout: label and field share a row.
   Applies to every form row that holds a text-like input, select, expanded
   choice list, or autocomplete. Textareas and single checkboxes keep their
   own layouts. `.form-group--inline` forces it on rows the selector misses.
   -------------------------------------------------------------------------- */
.app-main form:has(.form-group--inline) {
    max-width: min(40rem, 100%);
}

.app-main form div:has(> label):where(
    :has(> input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),
    :has(> select),
    :has(> .autocomplete),
    :has(> .money-input),
    :has(> div > input[type="radio"]),
    :has(> div > input[type="checkbox"])
):not(:has(> textarea)):not(:has(> input[type="checkbox"])):not(.signoff-form__bar):not(.signoff-form__field),
.app-main form > div.form-group--inline {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.35rem;
    align-items: center;
}

.app-main form div:has(> label):where(:has(> div > input[type="radio"]), :has(> div > input[type="checkbox"])) {
    align-items: start;
}

.app-main form div:has(> label):where(:has(> div > input[type="radio"]), :has(> div > input[type="checkbox"])) > label {
    padding-top: 0.15rem;
}

.app-main form div:has(> label):where(
    :has(> input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),
    :has(> select),
    :has(> .autocomplete),
    :has(> .money-input),
    :has(> div > input[type="radio"]),
    :has(> div > input[type="checkbox"])
):not(:has(> textarea)):not(:has(> input[type="checkbox"])) > label,
.app-main form > div.form-group--inline > label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

.app-main form div:has(> label):where(
    :has(> input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),
    :has(> select),
    :has(> .autocomplete),
    :has(> .money-input),
    :has(> div > input[type="radio"]),
    :has(> div > input[type="checkbox"])
):not(:has(> textarea)):not(:has(> input[type="checkbox"])) > *:not(label),
.app-main form > div.form-group--inline > *:not(label) {
    grid-column: 2;
}

@media (max-width: 40rem) {
    .app-main form div:has(> label):where(
        :has(> input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),
        :has(> select),
        :has(> .autocomplete),
    :has(> .money-input),
        :has(> div > input[type="radio"]),
        :has(> div > input[type="checkbox"])
    ):not(:has(> textarea)):not(:has(> input[type="checkbox"])),
    .app-main form > div.form-group--inline {
        grid-template-columns: 1fr;
    }

    .app-main form div:has(> label):where(
        :has(> input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),
        :has(> select),
        :has(> .autocomplete),
    :has(> .money-input),
        :has(> div > input[type="radio"]),
        :has(> div > input[type="checkbox"])
    ):not(:has(> textarea)):not(:has(> input[type="checkbox"])) > *:not(label),
    .app-main form > div.form-group--inline > *:not(label) {
        grid-column: 1;
    }
}

/* --------------------------------------------------------------------------
   Sortable table: clickable column headers with sort direction indicators
   -------------------------------------------------------------------------- */
.sortable-table th button,
.app-main .sortable-table th a.sort-link {
    all: unset;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.app-main .sortable-table th a.sort-link:hover {
    text-decoration: underline;
}

.sortable-table th button:focus-visible,
.app-main .sortable-table th a.sort-link:focus-visible {
    outline: 2px solid var(--color-accent, currentColor);
    outline-offset: 2px;
}

.sortable-table th button::after,
.sortable-table th a.sort-link::after {
    content: '↕';
    opacity: 0.35;
    font-size: 0.8em;
}

.sortable-table th[aria-sort="ascending"] button::after,
.sortable-table th[aria-sort="ascending"] a.sort-link::after {
    content: '↑';
    opacity: 1;
}

.sortable-table th[aria-sort="descending"] button::after,
.sortable-table th[aria-sort="descending"] a.sort-link::after {
    content: '↓';
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   Onboarding funnel (register → unit → plan → import → walkthrough)
   --------------------------------------------------------------------------- */

.onboarding-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    color: var(--color-text-muted);
    font-size: var(--step--1, 0.9rem);
}

.onboarding-steps__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.onboarding-steps__num {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-weight: 600;
}

.onboarding-steps__item--done .onboarding-steps__num {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.onboarding-steps__item--current {
    color: var(--color-text);
    font-weight: 600;
}

.onboarding-steps__item--current .onboarding-steps__num {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.onboarding-panel,
.onboarding-note {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    max-width: 44rem;
}

.onboarding-note {
    margin-bottom: 1rem;
    color: var(--color-text-muted);
}

.onboarding-cards {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    max-width: 60rem;
}

.onboarding-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
}

.onboarding-card--primary {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lift);
}

.onboarding-card--muted {
    background: transparent;
    box-shadow: none;
}

.onboarding-card__title {
    margin: 0;
    font-size: var(--step-1, 1.25rem);
}

.onboarding-card__price {
    margin: 0;
    font-size: var(--step-2, 1.6rem);
    font-weight: 700;
    color: var(--color-primary);
}

.onboarding-card__actions {
    margin-top: auto;
    padding-top: 0.5rem;
}

.onboarding-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-primary);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.onboarding-banner__text {
    flex: 1 1 16rem;
    margin: 0;
}

.onboarding-banner__links {
    display: inline-flex;
    gap: 1rem;
}

.walkthrough {
    max-width: 64rem;
}

.walkthrough__top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.walkthrough__exit {
    color: var(--color-text-muted);
}

.walkthrough__slide {
    margin: 0;
}

.walkthrough__slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    background: var(--color-surface);
}

.walkthrough__slide figcaption {
    padding: 1rem 0.25rem 0;
}

.walkthrough__title {
    margin: 0 0 0.35rem;
    font-size: var(--step-1, 1.25rem);
}

.walkthrough__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.walkthrough__dots {
    display: flex;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.walkthrough__dots li {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--color-border);
}

.walkthrough__dots .walkthrough__dot--current {
    background: var(--color-primary);
}

/* Early-access honeypot: off-screen for humans, present for bots. */
.early-access__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Location page: details beside a map, then the events held there.
   -------------------------------------------------------------------------- */
.location-detail__overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.location-detail__heading {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
}

.location-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0;
}

.location-detail__item dt {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.location-detail__item dd {
    margin: 0.15rem 0 0;
}

.location-detail__item--wide {
    grid-column: 1 / -1;
}

.location-detail__map-frame {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
}

.location-detail__map-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

@media (max-width: 48rem) {
    .location-detail__overview {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Scoutbook export: filters in one row, skipped-scout list, import steps. */
.app-main form.scoutbook-export__filters {
    margin-bottom: 1.25rem;
}

.scoutbook-export__summary {
    margin-bottom: 1.25rem;
}

.scoutbook-export__skipped {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.scoutbook-export__about {
    margin: 1.25rem 0 1.5rem;
}

.scoutbook-export__steps {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.scoutbook-export__steps li {
    margin-bottom: 0.35rem;
}