:root {
    --jhg-red: #e91515;
    --jhg-red-dark: #c70f0f;
    --jhg-text: #2d2d2d;
    --jhg-muted: #777777;
    --jhg-border: #e2e2e2;
    --jhg-surface: #ffffff;
    --jhg-page: #f7f7f7;
}

* {
    box-sizing: border-box;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--jhg-text);
    background: var(--jhg-page);
}

body {
    margin: 0;
    background: var(--jhg-page);
}

a {
    color: inherit;
}

.brand-inner,
.nav-inner,
.page-shell {
    width: min(100% - 32px, 1152px);
    margin: 0 auto;
}

.site-header {
    background: var(--jhg-surface);
    border-bottom: 1px solid #d9d9d9;
}

.brand-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0 24px;
    text-align: center;
}

.brand {
    display: grid;
    gap: 4px;
    text-decoration: none;
}

.brand-name {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 7vw, 78px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 0.9;
    color: #111111;
}

.brand-medica {
    color: var(--jhg-red);
}

.brand-subline {
    color: #333333;
    font-size: clamp(13px, 2vw, 18px);
    font-weight: 400;
    letter-spacing: 0;
}

.site-nav {
    background: var(--jhg-red);
}

.nav-inner {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.nav-links {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    color: #ffffff;
    font-weight: 700;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 13px 18px;
    color: #ffffff;
    text-decoration: none;
    line-height: 1.15;
}

.nav-links a:hover,
.nav-links a.active {
    background: var(--jhg-red-dark);
    color: #ffffff;
}

.page-shell {
    padding: 38px 0 64px;
}

.page-title {
    margin: 0;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0;
}

.page-lead {
    max-width: 860px;
    margin: 18px 0 0;
    color: var(--jhg-muted);
    font-size: 17px;
    line-height: 1.7;
}

.section-title {
    margin: 42px 0 28px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 22px;
}

.course-card {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 29px 24px 24px;
    background: var(--jhg-surface);
    border: 1px solid var(--jhg-border);
    border-top: 4px solid var(--jhg-red);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.course-card h3 {
    margin: 0 0 26px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
}

.course-code {
    margin-bottom: 8px;
    color: var(--jhg-red);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.course-meta {
    display: grid;
    gap: 14px;
    margin: 0 0 28px;
    color: var(--jhg-muted);
    font-size: 14px;
    line-height: 1.35;
}

.course-meta div {
    min-width: 0;
}

.course-meta strong {
    color: var(--jhg-text);
    font-weight: 800;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 26px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    min-width: min(204px, 100%);
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: normal;
    text-align: center;
}

.course-card .btn {
    margin-top: auto;
}

.btn-primary {
    background: var(--jhg-red);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--jhg-red-dark);
}

.btn-secondary {
    background: #ffffff;
    border-color: #d8d8d8;
    color: #333333;
}

.btn-secondary:hover {
    border-color: var(--jhg-red);
    color: var(--jhg-red);
}

.notice {
    margin: 28px 0;
    padding: 16px 18px;
    border: 1px solid #bde5c8;
    border-radius: 6px;
    background: #f1fbf3;
    color: #126327;
    font-weight: 700;
}

.notice--error {
    border-color: #e7b3b3;
    background: #fdf2f2;
    color: #9c2a2a;
}

.form-card {
    margin-top: 30px;
    padding: 30px;
    background: var(--jhg-surface);
    border: 1px solid var(--jhg-border);
    border-top: 4px solid var(--jhg-red);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.login-shell {
    width: min(100% - 32px, 420px);
    margin: 0 auto;
    padding: 42px 0 64px;
}

.login-shell .page-title {
    font-size: 30px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.form-wide {
    grid-column: 1 / -1;
}

.form-section {
    margin: 28px 0 14px;
    font-size: 18px;
    font-weight: 800;
}

label {
    display: grid;
    gap: 7px;
    color: #333333;
    font-size: 14px;
    font-weight: 800;
}

.field-label {
    display: inline-block;
}

input,
select,
textarea {
    min-height: 46px;
    width: 100%;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding: 10px 12px;
    color: var(--jhg-text);
    background: #ffffff;
    font: inherit;
    font-weight: 400;
}

textarea {
    min-height: 116px;
    resize: vertical;
    line-height: 1.45;
}

input[type="checkbox"] {
    min-height: 0;
    width: auto;
    margin: 2px 0 0;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--jhg-red);
    outline: 3px solid rgba(233, 21, 21, 0.14);
}

.date-panel {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(120px, 1fr));
    gap: 16px;
    padding: 18px;
    border: 1px solid #dedede;
    border-radius: 8px;
    background: #fbfbfb;
}

.date-panel input[type="date"],
.date-panel input[type="time"],
.date-panel input[type="number"] {
    min-height: 54px;
    font-size: 17px;
}

.date-panel-optional {
    grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(120px, 1fr));
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

.optional-panel {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--jhg-border);
    border-radius: 8px;
    background: #ffffff;
}

.optional-panel summary {
    color: #333333;
    font-weight: 800;
    cursor: pointer;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    line-height: 1.45;
    font-weight: 700;
}

.session-summary {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    color: var(--jhg-muted);
    font-size: 16px;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.table-card {
    overflow-x: auto;
    background: var(--jhg-surface);
    border: 1px solid var(--jhg-border);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.admin-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

.admin-table th,
.admin-table td {
    padding: 12px;
    border-top: 1px solid var(--jhg-border);
    vertical-align: top;
}

.admin-table thead th {
    border-top: 0;
    background: #f0f0f0;
    color: #555555;
    font-size: 13px;
    font-weight: 800;
}

.admin-table tbody tr:hover {
    background: #fcfcfc;
}

.cell-title {
    font-weight: 800;
}

.cell-muted {
    color: var(--jhg-muted);
    font-size: 13px;
    line-height: 1.35;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.inline-form {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
}

.inline-form input {
    width: 140px;
    min-height: 36px;
    padding: 7px 9px;
}

.btn-small {
    min-height: 36px;
    min-width: 0;
    padding: 7px 12px;
    font-size: 14px;
    font-weight: 700;
}

.btn-success {
    background: #167346;
    color: #ffffff;
}

.btn-success:hover {
    background: #105a36;
}

.footer {
    margin-top: 54px;
    padding-top: 24px;
    border-top: 1px solid var(--jhg-border);
    color: var(--jhg-muted);
    font-size: 14px;
}

@media (max-width: 760px) {
    .brand-inner {
        flex-direction: column;
        align-items: center;
    }

    .nav-inner,
    .nav-links {
        width: 100%;
    }

    .nav-links a {
        flex: 1 1 50%;
        justify-content: center;
        padding: 12px 10px;
        font-size: 14px;
    }

    .course-grid,
    .form-grid,
    .date-panel,
    .date-panel-optional {
        grid-template-columns: 1fr;
    }

    .course-card {
        min-height: 0;
    }

    .btn,
    .button-row {
        width: 100%;
    }

    .button-row {
        justify-content: stretch;
    }

    .form-card {
        padding: 24px 18px;
    }

    .admin-header {
        align-items: stretch;
        flex-direction: column;
    }

    .inline-form {
        flex-wrap: wrap;
    }

    .inline-form input {
        width: 100%;
    }
}

/* Live jhg-medica.com alignment */
:root {
    --jhg-red: #e0110c;
    --jhg-red-dark: #b20d09;
    --jhg-text: #222222;
    --jhg-muted: #777777;
    --jhg-border: rgba(202, 179, 157, 0.58);
    --jhg-surface: #ffffff;
    --jhg-page: #ffffff;
    --jhg-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --page-width: 1200px;
    --nav-width: 1200px;
    --radius-card: 8px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--jhg-text);
    background: #ffffff;
    font-size: 14px;
    line-height: 1.7;
}

.topbar {
    width: 100%;
    background: var(--jhg-red);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

.topbar__inner {
    width: min(calc(100% - 2rem), var(--page-width));
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 auto;
}

.topbar__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.topbar__separator {
    opacity: 0.45;
}

.logo-band {
    width: 100%;
    background: #ffffff;
}

.logo-band__inner {
    width: min(calc(100% - 2rem), var(--page-width));
    min-height: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 14px 0 18px;
}

.logo-band__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-band__image {
    width: min(100%, 420px);
    height: auto;
}

.nav-demo {
    position: relative;
    z-index: 50;
    background: transparent;
    margin-bottom: -32px;
}

.nav-demo__track {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: var(--nav-width);
    margin: 0 auto;
}

.nav-demo__bar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    background: var(--jhg-red);
}

.nav-demo__list {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0 20px;
}

.nav-demo__item {
    display: flex;
    align-items: stretch;
}

.nav-demo__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 22px;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.18s ease, color 0.25s ease;
}

.nav-demo__link:hover,
.nav-demo__link.is-current {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.portal-hero {
    min-height: clamp(260px, 38vw, 540px);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0)),
        url("/hero-ambulance.png") center / cover no-repeat;
}

.page-shell {
    width: min(calc(100% - 48px), var(--page-width));
    padding: 72px 0 64px;
}

.page-shell--form {
    padding-top: 92px;
}

.page-title,
.section-title {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--jhg-text);
    letter-spacing: 0;
}

.page-title {
    font-size: 3.2rem;
}

.page-lead {
    max-width: 46rem;
    color: var(--jhg-muted);
    font-size: 1.08rem;
}

.form-card,
.course-card,
.table-card,
.legal-card {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--jhg-border);
    border-top: 4px solid var(--jhg-red);
    border-radius: var(--radius-card);
    box-shadow: var(--jhg-shadow);
}

.form-card {
    padding: 1.5rem;
}

.form-grid {
    gap: 1rem;
}

label {
    gap: 0.45rem;
    color: var(--jhg-text);
    font-size: 14px;
}

.field-label,
label > span {
    font-weight: 700;
}

input,
select,
textarea {
    min-height: 50px;
    border: 1px solid rgba(102, 102, 102, 0.4);
    border-radius: 16px;
    padding: 0.9rem 1rem;
    background: #ffffff;
    color: var(--jhg-text);
}

textarea {
    min-height: 124px;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(178, 30, 35, 0.2);
    border-color: var(--jhg-red);
}

.date-panel,
.optional-panel {
    border: 1px solid var(--jhg-border);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--jhg-shadow);
}

.date-panel-optional {
    box-shadow: none;
}

.btn {
    min-height: 3.25rem;
    min-width: 0;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
    transition: transform 0.2s ease, background 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--jhg-red);
}

.btn-primary:hover {
    background: var(--jhg-red-dark);
}

.btn-secondary {
    border-color: rgba(102, 102, 102, 0.4);
    box-shadow: none;
}

.course-card {
    border-top-color: var(--jhg-red);
}

.course-code,
.service-accent {
    color: var(--jhg-red);
}

.admin-table thead th {
    background: #f2f2f2;
}

@media (max-width: 900px) {
    .nav-demo {
        margin-bottom: 0;
    }

    .nav-demo__bar {
        min-height: 0;
    }

    .nav-demo__list {
        width: 100%;
        flex-wrap: wrap;
        padding: 0;
    }

    .nav-demo__item {
        flex: 1 1 50%;
    }

    .nav-demo__link {
        width: 100%;
        min-height: 48px;
        padding: 0 12px;
        white-space: normal;
        text-align: center;
    }

    .page-shell,
    .page-shell--form {
        padding-top: 42px;
    }

    .portal-hero {
        min-height: 260px;
    }
}

@media (max-width: 640px) {
    .topbar__info {
        justify-content: center;
        text-align: center;
        gap: 4px 10px;
    }

    .topbar__separator {
        display: none;
    }

    .logo-band__inner {
        min-height: 102px;
    }

    .logo-band__image {
        width: min(100%, 280px);
    }

    .page-title {
        font-size: 2.4rem;
    }

    .nav-demo__item {
        flex-basis: 100%;
    }
}

/* WordPress header parity */
:root {
    --accent: var(--jhg-red);
    --accent-rgb: 224, 17, 12;
    --text: var(--jhg-text);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

body.has-nav-open {
    overflow: hidden;
}

.topbar a {
    color: inherit;
    text-decoration: none;
}

.topbar__socials {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
}

.topbar__socials i {
    font-size: 18px;
}

[data-site-nav] {
    transition: transform 0.3s ease, background 0.3s ease;
}

[data-site-nav].is-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    margin-bottom: 0;
    animation: slideDown 0.35s ease forwards;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.nav-demo {
    position: relative;
    z-index: 50;
    background: transparent;
    margin-bottom: -32px;
}

.nav-demo__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 14, 0.48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.nav-demo.is-open .nav-demo__backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav-demo__track {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: var(--nav-width);
    margin: 0 auto;
    transition: transform 0.22s ease;
}

.nav-demo__toggle {
    display: none;
}

.nav-demo__bar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: var(--nav-width);
    margin: 0 auto;
    min-height: 64px;
    background: var(--accent);
    transition: min-height 0.22s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.nav-demo__logo {
    display: none;
    align-items: center;
    padding: 0 16px 0 20px;
    flex-shrink: 0;
}

.nav-demo__logo img {
    height: 40px;
    width: auto;
}

[data-site-nav].is-scrolled .nav-demo__logo {
    display: flex;
}

[data-site-nav].is-scrolled .nav-demo__track {
    max-width: 100%;
}

[data-site-nav].is-scrolled .nav-demo__bar {
    max-width: 100%;
    min-height: 58px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.nav-demo__list {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0 20px;
}

.nav-demo__item {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-basis: auto;
}

.nav-demo__item-shell {
    display: flex;
    align-items: stretch;
}

.nav-demo__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 22px;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.18s ease, color 0.25s ease;
}

.nav-demo__submenu-toggle {
    display: none;
}

.nav-demo__link:hover,
.nav-demo__item:hover > .nav-demo__link,
.nav-demo__item:hover > .nav-demo__item-shell > .nav-demo__link,
.nav-demo__link.is-current {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

[data-site-nav].is-scrolled .nav-demo__link {
    color: #333333;
    font-size: 16px;
}

[data-site-nav].is-scrolled .nav-demo__link:hover,
[data-site-nav].is-scrolled .nav-demo__item:hover > .nav-demo__link,
[data-site-nav].is-scrolled .nav-demo__item:hover > .nav-demo__item-shell > .nav-demo__link {
    background: transparent;
    color: var(--accent);
}

[data-site-nav].is-scrolled .nav-demo__link.is-current {
    background: transparent;
    color: var(--accent);
    font-weight: 600;
}

.nav-demo__home-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: #ffffff;
    flex: 0 0 auto;
}

[data-site-nav].is-scrolled .nav-demo__home-icon {
    color: var(--accent);
}

.nav-demo__caret {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    transform: translateY(1px);
}

[data-site-nav].is-scrolled .nav-demo__caret {
    color: #333333;
}

.nav-demo__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(28, 32, 38, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.nav-demo__item:hover .nav-demo__submenu,
.nav-demo__item:focus-within .nav-demo__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-demo__submenu a {
    display: block;
    padding: 10px 16px;
    color: var(--text);
    font-size: 15px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.nav-demo__submenu a:hover {
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
}

.nav-mobile {
    display: none;
}

@media (max-width: 900px) {
    .nav-demo,
    [data-site-nav],
    [data-site-nav].is-scrolled {
        position: sticky;
        top: 0;
        left: auto;
        right: auto;
        margin-bottom: 0;
        animation: none;
        background: #ffffff;
        z-index: 120;
    }

    .nav-demo__list {
        display: none !important;
    }

    .nav-demo__track {
        max-width: none;
        padding: 0;
        z-index: 120;
    }

    .nav-demo__bar,
    [data-site-nav].is-scrolled .nav-demo__bar {
        position: relative;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: none;
        min-height: 64px;
        padding: 0 64px;
        background: #ffffff;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .nav-demo__logo,
    [data-site-nav].is-scrolled .nav-demo__logo {
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0 auto;
    }

    .nav-demo__logo img {
        height: 34px;
    }

    .logo-band {
        display: none;
    }

    .nav-demo__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 8px;
        left: 8px;
        width: 48px;
        height: 48px;
        padding: 0;
        border: none;
        border-radius: 12px;
        background: transparent;
        color: var(--accent);
        box-shadow: none;
        cursor: pointer;
        z-index: 150;
    }

    .nav-demo__toggle:hover,
    .nav-demo__toggle:focus-visible {
        background: rgba(var(--accent-rgb), 0.08);
    }

    .nav-demo__toggle-line {
        position: absolute;
        width: 22px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .nav-demo__toggle-line:nth-child(1) {
        transform: translateY(-6px);
    }

    .nav-demo__toggle-line:nth-child(2) {
        transform: translateY(0);
    }

    .nav-demo__toggle-line:nth-child(3) {
        transform: translateY(6px);
    }

    .nav-demo.is-open .nav-demo__toggle-line:nth-child(1) {
        transform: rotate(45deg);
    }

    .nav-demo.is-open .nav-demo__toggle-line:nth-child(2) {
        opacity: 0;
    }

    .nav-demo.is-open .nav-demo__toggle-line:nth-child(3) {
        transform: rotate(-45deg);
    }

    .nav-demo__backdrop {
        display: block;
        z-index: 125;
        background: rgba(15, 23, 42, 0.16);
    }

    .nav-mobile {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 360px);
        z-index: 130;
        flex-direction: column;
        gap: 16px;
        padding: 18px 16px 24px;
        background: #ffffff;
        box-shadow: 14px 0 36px rgba(10, 15, 22, 0.14);
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s ease;
        overflow-y: auto;
    }

    .nav-demo.is-open .nav-mobile {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-demo.is-open .nav-demo__toggle {
        opacity: 0;
        pointer-events: none;
    }

    .nav-mobile__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .nav-mobile__brand {
        display: inline-flex;
        align-items: center;
    }

    .nav-mobile__brand img {
        height: 32px;
        width: auto;
    }

    .nav-mobile__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 12px;
        background: rgba(var(--accent-rgb), 0.08);
        color: var(--accent);
        cursor: pointer;
    }

    .nav-mobile__close i {
        font-size: 1.08rem;
    }

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

    .nav-mobile__list {
        display: grid;
        gap: 6px;
    }

    .nav-mobile__link,
    .nav-mobile__section-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 56px;
        padding: 14px 12px;
        border: none;
        border-radius: 12px;
        background: transparent;
        color: #19242e;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.06rem;
        font-weight: 700;
        line-height: 1.25;
        text-align: left;
        text-decoration: none;
        transition: background 0.18s ease, color 0.18s ease;
    }

    .nav-mobile__link:hover,
    .nav-mobile__link:focus-visible,
    .nav-mobile__section-toggle:hover,
    .nav-mobile__section-toggle:focus-visible,
    .nav-mobile__link.is-current,
    .nav-mobile__section-toggle.is-current,
    .nav-mobile__item.is-open > .nav-mobile__section-toggle {
        background: rgba(var(--accent-rgb), 0.08);
        color: var(--accent);
    }

    .nav-mobile__section-toggle i {
        transition: transform 0.18s ease;
    }

    .nav-mobile__item.is-open > .nav-mobile__section-toggle i {
        transform: rotate(180deg);
    }

    .nav-mobile__submenu {
        display: none;
        gap: 4px;
        padding: 4px 0 0 10px;
    }

    .nav-mobile__item.is-open > .nav-mobile__submenu {
        display: grid;
    }

    .nav-mobile__submenu a {
        display: block;
        padding: 10px 12px;
        border-radius: 10px;
        background: transparent;
        color: #31404e;
        font-size: 0.97rem;
        font-weight: 600;
        line-height: 1.35;
        text-decoration: none;
    }

    .nav-mobile__submenu a:hover,
    .nav-mobile__submenu a:focus-visible {
        background: rgba(var(--accent-rgb), 0.08);
        color: var(--accent);
    }
}

@media (max-width: 640px) {
    .nav-demo__toggle {
        top: 8px;
        left: 8px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .nav-demo__bar,
    [data-site-nav].is-scrolled .nav-demo__bar {
        padding: 0 64px;
    }

    .nav-mobile {
        width: min(92vw, 360px);
        padding: 16px 14px 22px;
    }

    .nav-mobile__link,
    .nav-mobile__section-toggle {
        min-height: 56px;
        font-size: 1.04rem;
        padding: 12px 14px;
    }
}

/* === Admin area & workflow additions ============================== */

.admin-body {
    background: #f4f5f7;
}

.admin-shell-header {
    background: var(--jhg-surface);
    border-bottom: 3px solid var(--jhg-red);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.admin-shell-header__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;          /* never wrap to a second, overlapping row */
}

.admin-shell-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--jhg-text);
    font-weight: 700;
    flex: 0 0 auto;             /* keep brand at natural width, far left */
    white-space: nowrap;
    margin-right: 4px;
}

.admin-shell-header__brand img {
    height: 36px;
    width: auto;
}

.admin-nav {
    display: flex;
    gap: 2px;
    flex: 1 1 auto;            /* take the middle space */
    flex-wrap: nowrap;
    min-width: 0;              /* allow shrinking so logout stays visible */
    overflow-x: auto;         /* horizontal scroll instead of wrapping */
    scrollbar-width: thin;
}

.admin-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--jhg-text);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;       /* each item stays on one line */
}

.admin-nav a:hover {
    background: #f1f1f1;
}

.admin-nav a.is-active {
    background: var(--jhg-red);
    color: #fff;
}

.admin-shell-header__logout {
    margin-left: auto;         /* push fully right */
    flex: 0 0 auto;
}

/* Below ~1210px the seven nav entries no longer fit next to the brand and the
   logout button, so .admin-nav clipped them mid-word ("Protokoll" -> "Prot")
   with no visible scroll affordance. Drop the brand wordmark and tighten the
   items so the full menu still fits down to 1024px. */
@media (max-width: 1200px) {
    .admin-shell-header__inner { gap: 12px; padding: 8px 12px; }
    .admin-shell-header__brand span { display: none; }
    .admin-nav a { gap: 6px; padding: 8px 9px; font-size: 0.85rem; }
}

@media (max-width: 900px) {
    .admin-nav a { padding: 8px 8px; }
}

.login-privacy {
    max-width: 420px;
    margin: 16px auto 0;
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.45;
}

/* Statistics dashboard */
.stats-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}
.stats-period {
    margin: 4px 0 0;
    color: var(--jhg-muted);
    font-size: 0.95rem;
}
.stats-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.stats-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stats-toolbar__field .field-label {
    font-size: 0.8rem;
    color: var(--jhg-muted);
}
.stats-toolbar select,
.stats-toolbar input[type="date"] {
    width: auto;
    min-width: 140px;
    min-height: 40px;
    padding: 6px 12px;
}
.stats-toolbar__sep {
    align-self: center;
    color: var(--jhg-muted);
    font-size: 0.85rem;
    padding: 0 2px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin: 18px 0 24px;
}
.kpi-card {
    background: var(--jhg-surface);
    border: 1px solid var(--jhg-border);
    border-left: 4px solid var(--jhg-red);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kpi-card__value {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--jhg-text);
    line-height: 1.1;
}
.kpi-card__value--muted {
    font-size: 1rem;
    font-weight: 600;
    color: var(--jhg-muted);
}
.kpi-card__label {
    font-size: 0.85rem;
    color: var(--jhg-muted);
}
.chart-card-title {
    font-size: 1.05rem;
    margin: 0 0 12px;
}

/* Print / export: show only the dashboard content cleanly. */
@media print {
    .admin-shell-header, .stats-toolbar, #btn-print { display: none !important; }
    .page-shell { padding: 0; max-width: none; }
    .chart-grid { grid-template-columns: 1fr 1fr; }
    .chart-card, .kpi-card, .table-card { break-inside: avoid; box-shadow: none; }
    .stats-period { font-size: 1rem; }
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin: 18px 0;
}
.chart-card {
    background: var(--jhg-surface);
    border: 1px solid var(--jhg-border);
    border-radius: 10px;
    padding: 16px 18px;
}
.chart-card h2 {
    font-size: 1.05rem;
    margin: 0 0 12px;
}
.chart-box {
    position: relative;
    height: 280px;
}
.chart-empty {
    color: var(--jhg-muted);
    padding: 24px 0;
    text-align: center;
}
.detail-notes {
    white-space: pre-line;
}

/* Sortable table headers on the course overview */
.th-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.th-sort:hover { color: var(--jhg-red); }
.th-sort__idle { opacity: .3; }
.th-sort.is-sorted { color: var(--jhg-red); }

/* Pagination on the course overview */
.pagination {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
    flex-wrap: wrap;
}
.pagination__btn, .pagination__page {
    padding: 6px 11px;
    border: 1px solid var(--jhg-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--jhg-text);
    font-size: 0.9rem;
    background: #fff;
}
.pagination__page.is-current { background: var(--jhg-red); color: #fff; border-color: var(--jhg-red); }
.pagination__btn.is-disabled { opacity: .45; pointer-events: none; }
.pagination__all {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* Stat cards used as filter tabs on the course overview */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 18px 0 24px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--jhg-surface);
    border: 1px solid var(--jhg-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--jhg-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
    border-color: var(--jhg-red);
}

.stat-card.is-active {
    border-color: var(--jhg-red);
    box-shadow: inset 0 3px 0 var(--jhg-red);
}

.stat-card__value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
}

.stat-card__label {
    color: var(--jhg-muted);
    font-size: 0.85rem;
}

/* Status badges */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.badge-large {
    font-size: 0.95rem;
    vertical-align: middle;
    margin-left: 10px;
}

.badge-success { background: #e3f4e6; color: #1d7a2c; }
.badge-info { background: #e4eefb; color: #1a5dab; }
.badge-progress { background: #efe7fb; color: #6635ab; }
.badge-warning { background: #fdf1dc; color: #97640a; }
.badge-danger { background: #fde4e4; color: #b21414; }
.badge-muted { background: #ededed; color: #666; }

/* Course detail layout */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--jhg-muted);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.back-link:hover {
    color: var(--jhg-red);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.detail-card {
    background: var(--jhg-surface);
    border: 1px solid var(--jhg-border);
    border-radius: 8px;
    padding: 18px 20px;
}

.detail-card h2 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-card h2 i {
    color: var(--jhg-red);
}

.detail-card .action-row {
    margin-top: 12px;
}

.detail-list {
    display: grid;
    grid-template-columns: 150px 1fr;
    row-gap: 8px;
    margin: 0;
}

.detail-list dt {
    color: var(--jhg-muted);
    font-size: 0.88rem;
}

.detail-list dd {
    margin: 0;
    font-size: 0.95rem;
}

.token-list,
.history-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
}

.token-list i {
    color: var(--jhg-red);
    margin-right: 6px;
}

.history-panel {
    margin-top: 12px;
    border-top: 1px solid var(--jhg-border);
    padding-top: 10px;
}

.history-panel summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--jhg-muted);
}

.detail-participants,
.detail-certificates {
    padding: 18px 20px;
}

.detail-participants h2,
.detail-certificates h2 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-participants h2 i,
.detail-certificates h2 i {
    color: var(--jhg-red);
}

/* Customer session summary card */
.session-card {
    background: var(--jhg-surface);
    border: 1px solid var(--jhg-border);
    border-top: 4px solid var(--jhg-red);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 20px;
}

.session-card__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.session-card__label {
    display: block;
    color: var(--jhg-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.session-card__hint {
    margin: 14px 0 0;
    color: var(--jhg-muted);
    font-size: 0.85rem;
}

/* Honeypot field: visually removed but present for bots */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Customer list search */
.search-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-form input[type="search"] {
    padding: 8px 12px;
    border: 1px solid var(--jhg-border);
    border-radius: 6px;
    min-width: 220px;
}

/* === Admin compact buttons & layout fixes ========================== */

/* The public design uses tall pill buttons; in the dense admin area they
   crowd the cards and hid the Verlauf toggles. Compact them. */
.admin-body .btn {
    min-height: 0;
    padding: 8px 16px;
    border-radius: 6px;
    box-shadow: none;
}

.admin-body .btn:hover,
.admin-body .btn:focus-visible {
    transform: none;
}

.admin-body .btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.admin-body .action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-body .inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.admin-body .inline-form input,
.admin-body .inline-form select {
    min-height: 0;
    padding: 7px 10px;
    border-radius: 6px;
}

.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus {
    outline: 2px solid rgba(178, 30, 35, 0.18);
}

/* Verlauf toggle: render as a clear, clickable chip instead of bare text */
.history-panel summary {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--jhg-border);
    border-radius: 6px;
    background: #fafafa;
    font-weight: 600;
    color: var(--jhg-text);
}

.history-panel summary:hover {
    border-color: var(--jhg-red);
    color: var(--jhg-red);
}

.history-panel[open] summary {
    margin-bottom: 8px;
}

/* Copyable customer link */
.link-box {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
}

.link-box input {
    flex: 1;
    min-height: 0;
    padding: 7px 10px;
    border: 1px solid var(--jhg-border);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: monospace;
    background: #fafafa;
}

/* Admin: collapsible add-participant panel */
.add-participant-panel {
    margin-top: 16px;
    border-top: 1px solid var(--jhg-border);
    padding-top: 12px;
}

.add-participant-panel summary {
    cursor: pointer;
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--jhg-border);
    border-radius: 6px;
    background: #fafafa;
    font-weight: 600;
}

.add-participant-panel summary:hover {
    border-color: var(--jhg-red);
    color: var(--jhg-red);
}

.add-participant-panel[open] summary {
    margin-bottom: 12px;
}

/* Filter chips (customer list) */
.filter-chips {
    display: flex;
    gap: 6px;
    margin: 14px 0 18px;
    flex-wrap: wrap;
}

.filter-chips a {
    padding: 6px 14px;
    border: 1px solid var(--jhg-border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--jhg-text);
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--jhg-surface);
}

.filter-chips a:hover {
    border-color: var(--jhg-red);
}

.filter-chips a.is-active {
    background: var(--jhg-red);
    border-color: var(--jhg-red);
    color: #fff;
}

/* Customer session download row */
.session-card__actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* Error page + error notice */
.error-card {
    background: var(--jhg-surface);
    border: 1px solid var(--jhg-border);
    border-top: 4px solid var(--jhg-red);
    border-radius: 8px;
    padding: 28px 32px;
    text-align: center;
}

.notice-error {
    border-left: 4px solid var(--jhg-red);
}

/* Buttons: icons must sit beside the label, never on top of it */
.admin-body .btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn i {
    flex: 0 0 auto;
    line-height: 1;
}

/* Open courses (public) */
.open-course-card {
    background: var(--jhg-surface);
    border: 1px solid var(--jhg-border);
    border-left: 4px solid var(--jhg-red);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 16px;
}

.open-course-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.open-course-card__head h2 {
    margin: 2px 0 6px;
    font-size: 1.15rem;
}

.open-course-card details {
    margin-top: 10px;
}

.open-course-card summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
}

.open-course-card summary::-webkit-details-marker {
    display: none;
}

.open-course-card details[open] summary {
    margin-bottom: 14px;
}

/* Small action button inside a detail card heading */
.detail-card__head-action {
    margin-left: auto;
    font-weight: 600;
}

.audit-filter {
    margin-bottom: 18px;
    align-items: flex-end;
}

.audit-filter label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audit-filter input[type="date"] {
    min-height: 0;
    padding: 7px 10px;
    border: 1px solid var(--jhg-border);
    border-radius: 6px;
}

/* Public certificate verification (/verify): label/value rows. */
.verify-facts {
    margin: 20px 0;
    display: grid;
    gap: 8px;
}
.verify-facts > div {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 12px;
}
.verify-facts dt {
    color: #666;
}
.verify-facts dd {
    margin: 0;
    font-weight: 600;
}

/* Pending QR check-in registrations inside the course-detail check-in card. */
.pending-checkin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--jhg-border);
}
.pending-checkin__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pending-checkin__who span {
    overflow-wrap: anywhere;
}
.pending-checkin__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Two-click Google Maps embed on the course detail page. */
.map-embed {
    margin-top: 14px;
    border-top: 1px solid var(--jhg-border);
    padding-top: 12px;
}
.map-embed__container {
    margin-top: 12px;
}
.map-embed__frame {
    width: 100%;
    height: 320px;
    border: 1px solid var(--jhg-border);
    border-radius: 8px;
}

/* Check-in terminal (tablet at the course). */
.checkin-video {
    width: 100%;
    max-width: 480px;
    margin-top: 12px;
    border: 2px solid var(--jhg-border);
    border-radius: 8px;
}
.checkin-success h2 {
    color: #1a7f37;
}

/* The hidden attribute must always win, even over .btn display rules. */
[hidden] {
    display: none !important;
}

/* Verification result banners (green = valid, red = expired/revoked). */
.verify-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 16px;
}
.verify-banner--ok {
    background: #e6f4ea;
    color: #1a7f37;
    border: 1px solid #b7e1c3;
}
.verify-banner--bad {
    background: #fde4e4;
    color: #b21414;
    border: 1px solid #f3bcbc;
}

/* === Form rhythm & control alignment ============================== */

/* .form-row is used by the settings, person and trainer-assignment forms and
   never had a rule, so every field sat flush on the next label and the submit
   button touched the field above it (0px gap) — the 2px focus ring then
   painted straight into the neighbouring control. Same rhythm as .form-grid. */
.form-row {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.form-row:last-child {
    margin-bottom: 0;
}

/* Submit rows inside a card need the same separation from the last field. */
.form-card .action-row {
    margin-top: 1.25rem;
}

/* Filter/search bars: the field and the button next to it must be the same
   height, otherwise the button floats inside the row it belongs to
   (search 50px vs. button 30px, audit 42px, statistics 40px). */
.search-form input,
.search-form select,
.audit-filter input,
.audit-filter input[type="date"],
.stats-toolbar input,
.stats-toolbar input[type="date"],
.stats-toolbar select {
    min-height: 38px;
    height: 38px;
    padding: 6px 12px;
}

.search-form .btn,
.audit-filter .btn,
.stats-toolbar .btn,
.search-form + .btn {
    min-height: 38px;
}

/* Long German compound headings (customer names, "Geschäftsbedingungen") broke
   out of the viewport on narrow screens and gave the page a horizontal scroll. */
.page-title,
.section-title {
    overflow-wrap: break-word;
}

/* The last public nav entry sits at the right edge; its left-anchored dropdown
   stuck 7px past the viewport and scrolled the whole page sideways at 1024px. */
.nav-demo__item:last-child .nav-demo__submenu {
    left: auto;
    right: 0;
}

/*
 * CSP-safe replacements for inline style attributes. The app sends
 * `style-src 'self'` with no 'unsafe-inline', so `style="display:none"` in a
 * template is dropped by the browser and the element renders visible.
 */
.is-hidden {
    display: none;
}

.display-inline {
    display: inline;
}

.wrap-anywhere {
    overflow-wrap: anywhere;
}