:root {
    --rttl-white: rgb(254, 239, 212);
    --rttl-dark-green: hsl(153, 40%, 8%);
    --rttl-very-dark-brown: hsl(30, 20%, 5%);
    --rttl-light-tan: hsl(36, 28%, 78%);
    --rttl-gold: #c4a33e;
    --rttl-gold-light: #faf3e0;
    --rttl-menu-dark-red: hsl(0, 45%, 12%);
    --rttl-menu-black: #000;
    --mobile: 768px;
    --tablet: 1024px;
    --desktop: 1216px;
    --widescreen: 1408px;
    --fullhd: 1920px;
}


@media screen and (max-width: var(--tablet)) {
    .rttl-hide-on-tablet {
        display: none;
    }
}

.rttl-text-white {
    color: var(--rttl-white);
}

.rttl-text-white * {
    color: inherit !important;
}


.rttl-questionnaire-box {
    background-color: hsla(153, 40%, 8%, 0.8) !important;
    border: 6px solid hsl(42, 75%, 55%) !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 1.5rem;
}

.rttl-questionnaire-box a {
    color: hsl(153, 40%, 80%) !important;
}

.rttl-questionnaire-header {
    background-color: hsl(153, 53%, 22%);
    border-radius: 2px 2px 0 0;
    border-bottom: 2px solid hsl(42, 75%, 55%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    margin: -1.25rem -1.25rem 1rem -1.25rem;
}

.rttl-questionnaire-header h4,
.rttl-questionnaire-header p {
    color: hsl(42, 75%, 55%) !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0;
}

.rttl-questionnaire-header a {
    color: hsl(42, 75%, 55%) !important;
    font-weight: bold;
    margin: 0;
}

.rttl-summary-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
}

.rttl-summary-row:nth-child(even) {
    background-color: hsla(153, 40%, 12%, 0.5);
}

.rttl-summary-row:hover {
    background-color: hsla(42, 75%, 55%, 0.12);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}

/* === Dark Theme: Form Elements in Questionnaire Box === */

.rttl-questionnaire-box .label,
.rttl-questionnaire-box label:not(.toggle-card):not(.check-card) {
    color: hsl(153, 53%, 90%) !important;
    font-weight: 600;
}

.rttl-questionnaire-box .help {
    color: hsl(153, 40%, 70%) !important;
}

.rttl-questionnaire-box .input,
.rttl-questionnaire-box .textarea,
.rttl-questionnaire-box select,
.rttl-questionnaire-box .select select {
    background-color: hsla(153, 40%, 12%, 0.8);
    border: 1.5px solid hsl(153, 30%, 30%);
    color: white;
}

.rttl-questionnaire-box .input:focus,
.rttl-questionnaire-box .textarea:focus,
.rttl-questionnaire-box select:focus,
.rttl-questionnaire-box .select select:focus {
    border-color: hsl(42, 75%, 55%);
    box-shadow: 0 0 0 2px rgba(196, 163, 62, 0.2);
    outline: none;
}

.rttl-questionnaire-box .input::placeholder,
.rttl-questionnaire-box .textarea::placeholder {
    color: hsl(153, 20%, 50%);
}

.rttl-questionnaire-box .select:after {
    border-color: hsl(42, 75%, 55%) !important;
}

/* Dark Theme: Buttons in Questionnaire Box */
.rttl-questionnaire-box .button.is-primary {
    background-color: hsl(153, 53%, 22%) !important;
    border: 2px solid hsl(42, 75%, 55%) !important;
    color: white !important;
}

.rttl-questionnaire-box .button.is-primary:hover,
.rttl-questionnaire-box .button.is-primary:focus {
    background-color: hsl(153, 40%, 80%) !important;
    color: hsl(153, 40%, 8%) !important;
    border-color: transparent !important;
}

/* Dark Theme: Progress Bar */
.rttl-questionnaire-box progress.progress {
    background-color: hsla(153, 40%, 12%, 0.6);
    border: 1px solid hsl(153, 30%, 25%);
    border-radius: 4px;
}

.rttl-questionnaire-box progress.progress::-webkit-progress-bar {
    background-color: hsla(153, 40%, 12%, 0.6);
    border-radius: 4px;
}

.rttl-questionnaire-box progress.progress::-webkit-progress-value {
    background-color: hsl(153, 53%, 35%);
    border-radius: 3px;
}

.rttl-questionnaire-box progress.progress::-moz-progress-bar {
    background-color: hsl(153, 53%, 35%);
    border-radius: 3px;
}

/* Dark Theme: Card inside questionnaire box */
.rttl-questionnaire-box .card {
    background-color: hsla(153, 40%, 12%, 0.5);
    border: 2px solid hsl(153, 30%, 25%);
    color: white;
}

.rttl-questionnaire-box .card-header {
    background-color: hsl(153, 53%, 22%);
    border-bottom: 2px solid hsl(42, 75%, 55%);
}

.rttl-questionnaire-box .card-header-title {
    color: hsl(42, 75%, 55%);
    font-family: Georgia, 'Times New Roman', serif;
}

.rttl-questionnaire-box .card-content {
    color: white;
}

.rttl-questionnaire-box .card-header .subtitle {
    color: hsl(42, 75%, 55%) !important;
}

/* Force all text inside questionnaire box to be visible on dark bg */
.rttl-questionnaire-box,
.rttl-questionnaire-box .content,
.rttl-questionnaire-box .content p,
.rttl-questionnaire-box .content li,
.rttl-questionnaire-box .content div:not(.notification) {
    color: hsl(153, 53%, 90%) !important;
}

.rttl-questionnaire-box .content h1,
.rttl-questionnaire-box .content h2,
.rttl-questionnaire-box .content h3,
.rttl-questionnaire-box .content h4,
.rttl-questionnaire-box .content h5,
.rttl-questionnaire-box .content h6,
.rttl-questionnaire-box .title,
.rttl-questionnaire-box .subtitle {
    color: hsl(42, 75%, 55%) !important;
}

.rttl-questionnaire-box .card-content h3,
.rttl-questionnaire-box .card-content h4,
.rttl-questionnaire-box .card-content .title {
    color: hsl(42, 75%, 55%) !important;
}

.rttl-questionnaire-box .card-content p,
.rttl-questionnaire-box .card-content div {
    color: hsl(153, 53%, 90%) !important;
}

/* Catch-all: any heading or text directly in the box (not just inside .content) */
.rttl-questionnaire-box h1,
.rttl-questionnaire-box h2,
.rttl-questionnaire-box h3,
.rttl-questionnaire-box h4,
.rttl-questionnaire-box h5,
.rttl-questionnaire-box h6 {
    color: hsl(42, 75%, 55%) !important;
}

.rttl-questionnaire-box p {
    color: hsl(153, 53%, 90%) !important;
}

.rttl-questionnaire-box i,
.rttl-questionnaire-box em {
    color: hsl(153, 40%, 70%) !important;
}

.rttl-questionnaire-box b,
.rttl-questionnaire-box strong {
    color: white !important;
}

/* Override Bulma light/color classes inside questionnaire box */
.rttl-questionnaire-box .has-background-light {
    background-color: hsl(153, 53%, 22%) !important;
}

.rttl-questionnaire-box .has-background-success-95 {
    background-color: hsla(153, 40%, 12%, 0.5) !important;
}

.rttl-questionnaire-box .has-background-success-25 {
    background-color: hsl(153, 40%, 18%) !important;
}

.rttl-questionnaire-box .has-background-warning-light {
    background-color: hsla(42, 75%, 55%, 0.15) !important;
}

.rttl-questionnaire-box .has-text-success-25 {
    color: hsl(42, 75%, 55%) !important;
}

.rttl-questionnaire-box .has-text-success-95 {
    color: hsl(153, 53%, 90%) !important;
}

.rttl-questionnaire-box .has-text-success {
    color: hsl(42, 75%, 55%) !important;
}

.rttl-questionnaire-box .has-text-white {
    color: white !important;
}

.rttl-questionnaire-box .button.is-success {
    background-color: hsl(153, 53%, 22%) !important;
    border: 2px solid hsl(42, 75%, 55%) !important;
    color: white !important;
}

.rttl-questionnaire-box .button.is-success:hover {
    background-color: hsl(153, 40%, 80%) !important;
    color: hsl(153, 40%, 8%) !important;
    border-color: transparent !important;
}

.rttl-questionnaire-box .button.is-success.is-outlined {
    background-color: transparent !important;
    border-color: hsl(42, 75%, 55%) !important;
    color: hsl(42, 75%, 55%) !important;
}

.rttl-questionnaire-box .button.is-success.is-outlined:hover {
    background-color: hsl(153, 40%, 80%) !important;
    color: hsl(153, 40%, 8%) !important;
    border-color: transparent !important;
}

/* Plain box inside questionnaire box (e.g. address boxes) */
.rttl-questionnaire-box .box {
    background-color: hsla(153, 40%, 12%, 0.5) !important;
    color: white !important;
    border: 1px solid hsl(153, 30%, 25%);
}

.rttl-questionnaire-box .box .title,
.rttl-questionnaire-box .box .subtitle,
.rttl-questionnaire-box .box h3,
.rttl-questionnaire-box .box h4 {
    color: hsl(42, 75%, 55%) !important;
}

.rttl-questionnaire-box .box p,
.rttl-questionnaire-box .box div {
    color: hsl(153, 53%, 90%);
}

/* Dark Theme: Notification */
.rttl-questionnaire-box .notification.is-success.is-light {
    background-color: hsla(153, 53%, 22%, 0.6) !important;
    color: hsl(153, 53%, 85%) !important;
    border: 1px solid hsl(153, 53%, 35%);
}

.rttl-questionnaire-box .notification.is-warning {
    background-color: hsla(42, 75%, 55%, 0.15) !important;
    color: hsl(153, 53%, 90%) !important;
    border: 1px solid hsl(42, 75%, 55%);
}

/* Dark Theme: Horizontal rule */
.rttl-questionnaire-box hr {
    border-top-color: hsl(153, 30%, 25%) !important;
}

/* Dark Theme: Table */
.rttl-questionnaire-box .table,
.rttl-questionnaire-box table {
    color: white;
}

.rttl-questionnaire-box .table thead th,
.rttl-questionnaire-box .table thead td {
    color: hsl(42, 75%, 55%) !important;
    border-bottom-color: hsl(153, 30%, 25%);
}

.rttl-questionnaire-box .table tbody td {
    border-bottom-color: hsl(153, 30%, 20%);
}

/* === Laurel Wreath Toggle Cards (Radio) === */

.rttl-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.rttl-toggle-group input[type="radio"] {
    display: none;
}

.rttl-toggle-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    border: 2px solid hsl(153, 30%, 30%);
    border-radius: 6px;
    background: hsla(153, 40%, 12%, 0.5);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    user-select: none;
    font-family: Georgia, 'Times New Roman', serif;
    color: hsl(153, 53%, 85%);
}

.rttl-toggle-card:hover {
    border-color: hsl(153, 30%, 45%);
    background: hsla(153, 40%, 16%, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.rttl-toggle-card .toggle-icon {
    font-size: 1.1rem;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.rttl-toggle-card .toggle-label {
    font-size: 0.95rem;
}

/* Selected state — uses sibling selector like mockup */
.rttl-toggle-group input[type="radio"]:checked + .rttl-toggle-card,
.rttl-toggle-card.is-selected {
    border-color: var(--rttl-gold, hsl(42, 75%, 55%));
    background: hsla(42, 75%, 55%, 0.15);
    box-shadow: 0 0 0 3px rgba(196, 163, 62, 0.12);
}

.rttl-toggle-group input[type="radio"]:checked + .rttl-toggle-card .toggle-icon,
.rttl-toggle-card.is-selected .toggle-icon {
    opacity: 1;
    color: var(--rttl-gold, hsl(42, 75%, 55%));
}

/* National Duty checkbox cards */
.rttl-duty-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rttl-duty-group input[type="checkbox"] {
    display: none;
}

.rttl-duty-card {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.8rem 1.1rem;
    border: 1px solid hsl(153, 30%, 25%);
    border-left: 6px solid hsl(153, 30%, 35%);
    border-radius: 4px;
    background: hsla(153, 40%, 8%, 0.7);
    cursor: pointer;
    font-family: Georgia, 'Times New Roman', serif;
    color: hsl(153, 53%, 85%);
    transition: all 0.2s ease;
    user-select: none;
}

.rttl-duty-card:hover {
    border-left-color: hsl(153, 30%, 50%);
    background: hsla(153, 40%, 12%, 0.8);
}

.rttl-duty-group input[type="checkbox"]:checked + .rttl-duty-card {
    border-left-color: var(--rttl-gold, hsl(42, 75%, 55%));
    background: hsla(42, 75%, 55%, 0.12);
}

/* Yes-only styling: yes=green, no=terracotta */
.rttl-toggle-group.yes-only input[type="radio"]:checked + .rttl-toggle-card.yes-card,
.rttl-toggle-card.yes-card.is-selected {
    border-color: hsl(153, 40%, 45%);
    background: hsla(153, 40%, 20%, 0.3);
    box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.15);
}

.rttl-toggle-group.yes-only input[type="radio"]:checked + .rttl-toggle-card.yes-card .toggle-icon,
.rttl-toggle-card.yes-card.is-selected .toggle-icon {
    color: hsl(153, 40%, 50%);
}

.rttl-toggle-group.yes-only input[type="radio"]:checked + .rttl-toggle-card.no-card,
.rttl-toggle-card.no-card.is-selected {
    border-color: #c75b39;
    background: hsla(12, 40%, 20%, 0.25);
    box-shadow: 0 0 0 3px rgba(199, 91, 57, 0.15);
}

.rttl-toggle-group.yes-only input[type="radio"]:checked + .rttl-toggle-card.no-card .toggle-icon,
.rttl-toggle-card.no-card.is-selected .toggle-icon {
    color: #c75b39;
}

/* Read-only toggle cards: suppress clickable appearance */
.rttl-toggle-card.is-readonly {
    cursor: default;
    pointer-events: none;
}

.rttl-toggle-card.is-readonly:hover {
    transform: none;
    box-shadow: none;
    border-color: hsl(153, 30%, 30%);
    background: hsla(153, 40%, 12%, 0.5);
}

.rttl-toggle-card.is-readonly.is-selected:hover {
    border-color: var(--rttl-gold, hsl(42, 75%, 55%));
    background: hsla(42, 75%, 55%, 0.15);
    box-shadow: 0 0 0 3px rgba(196, 163, 62, 0.12);
}

.rttl-toggle-card.yes-card.is-readonly.is-selected:hover {
    border-color: hsl(153, 40%, 45%);
    background: hsla(153, 40%, 20%, 0.3);
    box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.15);
}

.rttl-toggle-card.no-card.is-readonly.is-selected:hover {
    border-color: #c75b39;
    background: hsla(12, 40%, 20%, 0.25);
    box-shadow: 0 0 0 3px rgba(199, 91, 57, 0.15);
}

/* Textarea height in questionnaire box */
.rttl-questionnaire-box .textarea {
    min-height: 200px;
}

/* Dark Theme: Read-only input styling */
.rttl-questionnaire-box .input[readonly],
.rttl-questionnaire-box .textarea[readonly] {
    background-color: hsla(153, 40%, 10%, 0.6);
    border-color: hsl(153, 25%, 25%);
    color: hsl(153, 30%, 80%);
}

/* Responsive: stack vertically on mobile */
@media screen and (max-width: 768px) {
    .rttl-toggle-group {
        flex-direction: column;
    }
    .rttl-toggle-card {
        justify-content: center;
    }
}

/* === Membership Agreement Scrollbox (Dark Theme) === */

.agreement-scrollbox {
    max-height: 500px;
    overflow: auto;
    padding: 2rem;
    border: 2px solid hsl(153, 30%, 30%);
    border-radius: 8px;
    background: hsla(153, 40%, 12%, 0.5);
    color: hsl(153, 53%, 90%);
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.7;
}

.agreement-scrollbox h1,
.agreement-scrollbox h2,
.agreement-scrollbox h3,
.agreement-scrollbox h4,
.agreement-scrollbox h5,
.agreement-scrollbox h6 {
    color: hsl(42, 75%, 55%);
    font-family: Georgia, 'Times New Roman', serif;
}

.agreement-scrollbox p,
.agreement-scrollbox li,
.agreement-scrollbox ol,
.agreement-scrollbox ul {
    color: hsl(153, 53%, 90%);
}

.agreement-scrollbox a {
    color: hsl(153, 40%, 80%);
}

.agreement-scrollbox strong,
.agreement-scrollbox b {
    color: white;
}

.agreement-scrollbox hr {
    border-top-color: hsl(153, 30%, 30%);
}

.agreement-scrollbox blockquote {
    border-left: 4px solid hsl(42, 75%, 55%);
    background: hsla(42, 75%, 55%, 0.1);
    color: hsl(153, 53%, 85%);
    padding: 0.75rem 1rem;
}

.agreement-scrollbox code {
    background: hsla(153, 40%, 20%, 0.5);
    color: hsl(153, 53%, 85%);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
}

.agreement-scrollbox table {
    border-collapse: collapse;
    width: 100%;
}

.agreement-scrollbox th,
.agreement-scrollbox td {
    border: 1px solid hsl(153, 30%, 30%);
    padding: 0.5rem 0.75rem;
    color: hsl(153, 53%, 90%);
}

.agreement-scrollbox th {
    background: hsla(153, 53%, 22%, 0.6);
    color: hsl(42, 75%, 55%);
}

/* Makes the scrollbox content read-only */
.agreement-scrollbox :is(button, input, select, textarea) {
    pointer-events: none;
}

.rttl-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    padding: 1rem 0;
}

.rttl-dashboard-card {
    border: 2px solid hsl(153, 53%, 22%);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.15s ease;
    background: white;
}

.rttl-dashboard-card:hover {
    box-shadow: 0 4px 16px rgba(34, 102, 68, 0.18);
    transform: translateY(-2px);
}

.rttl-dashboard-card-icon {
    font-size: 1.5rem;
    color: hsl(153, 53%, 22%);
    margin-bottom: 0.5rem;
}

.rttl-dashboard-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.rttl-dashboard-card-desc {
    font-size: 0.9rem;
    color: #555;
    flex-grow: 1;
    margin-bottom: 1rem;
}

.rttl-staff-row > td:first-child {
    border-left: 3px solid hsl(204, 86%, 53%);
}

/* === Dark Header & Footer === */

.has-background-rttl-dark {
    background-color: var(--rttl-dark-green) !important;
}

.has-background-rttl-dark .navbar-item {
    color: hsl(0, 0%, 90%);
}

.has-background-rttl-dark .navbar-item:hover,
.has-background-rttl-dark .navbar-item:focus {
    background-color: hsl(153, 40%, 80%) !important;
    color: hsl(153, 40%, 8%) !important;
    border-radius: 4px;
}

.has-background-rttl-dark .navbar-end .navbar-item:hover,
.has-background-rttl-dark .navbar-end .navbar-item:focus {
    background-color: transparent !important;
}

.has-background-rttl-dark .button.is-outlined {
    border-color: white !important;
    color: white !important;
    background-color: transparent !important;
}

.has-background-rttl-dark .button.is-outlined:hover,
.has-background-rttl-dark .button.is-outlined:focus,
.has-background-rttl-dark .button.is-outlined:active {
    border-color: transparent !important;
    background-color: hsl(153, 40%, 80%) !important;
    color: hsl(153, 40%, 8%) !important;
}

.has-background-rttl-dark .button.is-ghost:hover,
.has-background-rttl-dark .button.is-ghost:focus {
    color: hsl(153, 40%, 8%) !important;
    background-color: hsl(153, 40%, 80%) !important;
    border-radius: 4px;
}

.has-background-rttl-dark .buttons.has-addons .button.is-ghost:first-child:hover,
.has-background-rttl-dark .buttons.has-addons .button.is-ghost:first-child:focus {
    border-radius: 4px 0 0 4px;
}

.has-background-rttl-dark .buttons.has-addons .button.is-ghost:last-child:hover,
.has-background-rttl-dark .buttons.has-addons .button.is-ghost:last-child:focus {
    border-radius: 0 4px 4px 0;
}

.form-container .title,
.form-container .subtitle,
.form-container p,
.form-container label {
    color: white !important;
}

.form-container .button.is-outlined {
    border-color: white !important;
    color: white !important;
    background-color: transparent !important;
}

.form-container .button.is-outlined:hover,
.form-container .button.is-outlined:focus,
.form-container .button.is-outlined:active {
    border-color: transparent !important;
    background-color: hsl(153, 40%, 80%) !important;
    color: hsl(153, 40%, 8%) !important;
}

footer.has-background-rttl-dark,
footer.has-background-rttl-dark a,
footer.has-background-rttl-dark p,
footer.has-background-rttl-dark span,
footer.has-background-rttl-dark li {
    color: hsl(0, 0%, 86%);
}

footer.has-background-rttl-dark a:hover {
    color: white;
}

footer.has-background-rttl-dark svg,
footer.has-background-rttl-dark svg path,
footer.has-background-rttl-dark svg g path {
    fill: hsl(0, 0%, 86%) !important;
}

/* --- Staff Comments Section (GUI theme) --- */
/* The ENTIRE box — add form, toggles, notifications, edit form, and list — sits on the dark
   questionnaire surface so it does not read as a light-mode island. */
.rttl-comment-section {
    background-color: hsla(153, 40%, 8%, 0.8);   /* --rttl-dark-green surface, matches questionnaire box */
    border: 2px solid hsl(42, 75%, 55%);         /* --rttl-gold accent border */
    border-radius: 8px;
    padding: 1rem;
    color: hsl(153, 53%, 90%);
}

.rttl-comment-section .help {
    color: hsl(153, 40%, 70%) !important;
}

/* Text areas / inputs (add + edit comment forms) */
.rttl-comment-section .textarea,
.rttl-comment-section .input {
    background-color: hsla(153, 40%, 12%, 0.8);
    border: 1.5px solid hsl(153, 30%, 30%);
    color: white;
}

.rttl-comment-section .textarea:focus,
.rttl-comment-section .input:focus {
    border-color: hsl(42, 75%, 55%);
    box-shadow: 0 0 0 2px rgba(196, 163, 62, 0.2);
    outline: none;
}

.rttl-comment-section .textarea::placeholder,
.rttl-comment-section .input::placeholder {
    color: hsl(153, 20%, 50%);
}

/* Buttons */
.rttl-comment-section .button.is-primary {
    background-color: hsl(153, 53%, 22%);
    border-color: hsl(153, 53%, 22%);
    color: hsl(153, 53%, 95%); /* very light green text, readable on the dark green button */
}

.rttl-comment-section .button.is-primary:hover,
.rttl-comment-section .button.is-primary:focus {
    background-color: hsl(153, 40%, 80%);
    color: hsl(153, 40%, 8%);
}

.rttl-comment-section .button.is-light {
    background-color: hsla(153, 40%, 12%, 0.6);
    border: 1px solid hsl(153, 30%, 30%);
    color: hsl(153, 53%, 90%);
}

.rttl-comment-section .button.is-light:hover,
.rttl-comment-section .button.is-light:focus {
    background-color: hsl(153, 40%, 80%);
    color: hsl(153, 40%, 8%);
}

.rttl-comment-section .button.is-danger.is-outlined {
    color: hsl(0, 60%, 75%);
    border-color: hsl(0, 60%, 55%);
}

.rttl-comment-section .button.is-danger.is-outlined:hover {
    background-color: hsl(0, 60%, 45%);
    color: white;
}

.rttl-comment-section .button.is-danger {
    background-color: hsl(0, 60%, 45%);
    color: white;
}

/* Notifications on the dark surface */
.rttl-comment-section .notification.is-success.is-light {
    background-color: hsla(153, 53%, 22%, 0.6);
    color: hsl(153, 53%, 90%);
}

.rttl-comment-section .notification.is-danger.is-light {
    background-color: hsla(0, 60%, 45%, 0.25);
    color: hsl(0, 60%, 85%);
}

/* Scrollbox — recessed inner surface so it reads as a scroll region inside the box */
.rttl-comment-scrollbox {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid hsl(153, 30%, 30%);
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.75rem;
    background-color: hsla(153, 40%, 6%, 0.5);
}

.rttl-comment-scrollbox--expanded {
    max-height: none;
}

.rttl-comment-item {
    padding: 0.6rem 0.75rem;
    border: 1px solid hsl(153, 30%, 25%);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background-color: hsla(153, 40%, 12%, 0.5); /* questionnaire card surface */
    color: hsl(153, 53%, 90%);
}

.rttl-comment-item-deleted {
    background-color: hsla(153, 40%, 10%, 0.6);
    color: hsl(153, 20%, 50%);
    border-style: dashed;
}

.rttl-comment-author {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: hsl(153, 53%, 90%);
}

.rttl-comment-author .has-text-grey {
    color: hsl(153, 40%, 70%) !important;
}

.rttl-comment-text {
    white-space: pre-wrap;
    word-break: break-word;
    color: white;
}

.rttl-comment-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rttl-comment-edit-form {
    border-top: 1px dashed hsl(153, 30%, 30%);
    padding-top: 0.75rem;
}

.rttl-comment-empty-state {
    color: hsl(153, 40%, 70%);
    font-style: italic;
}

/* --- Regional Leaders admin page (dark member-background theme) --- */
.rttl-regional-leaders-background {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: var(--rttl-very-dark-brown);
    background-image: image-set(
        url(/img/background/member/bg-1280.webp) 1x,
        url(/img/background/member/bg-1920.webp) 2x,
        url(/img/background/member/bg-3840.webp) 4x
    );
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.rttl-regional-leaders-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.25) 40%,
        rgba(0, 0, 0, 0.25) 60%,
        rgba(0, 0, 0, 0.55) 100%
    );
    pointer-events: none;
}

/* Breadcrumb on dark background */
.rttl-regional-leaders-page .breadcrumb a,
.rttl-regional-leaders-page .breadcrumb li + li::before {
    color: var(--rttl-light-tan);
}

.rttl-regional-leaders-page .breadcrumb li.is-active a {
    color: hsl(42, 75%, 55%);
}

/* Tabs on dark background */
.rttl-regional-leaders-page .tabs a {
    color: hsl(153, 53%, 85%);
}

.rttl-regional-leaders-page .tabs li.is-active a {
    color: hsl(42, 75%, 55%);
    border-color: hsl(42, 75%, 55%);
}

/* Form labels and help text on dark background */
.rttl-regional-leaders-page .label {
    color: hsl(153, 53%, 85%);
}

.rttl-regional-leaders-page .help {
    color: hsl(153, 53%, 70%);
}

/* Dark boxes rendered by child components */
.rttl-regional-leaders-page .box {
    background-color: hsl(153, 40%, 8%);
    border: 1px solid hsl(153, 30%, 25%);
    box-shadow: none;
    color: hsl(153, 53%, 90%);
}

/* Dark cards rendered by the chapters tab */
.rttl-regional-leaders-page .card {
    background-color: hsla(153, 40%, 8%, 0.8);
    border: 6px solid hsl(42, 75%, 55%);
    border-radius: 8px;
    box-shadow: none;
    color: white;
}

.rttl-regional-leaders-page .card-header {
    background-color: hsl(153, 53%, 22%);
    border-bottom: 2px solid hsl(42, 75%, 55%);
}

.rttl-regional-leaders-page .card-header-title {
    color: hsl(42, 75%, 55%);
    font-family: Georgia, 'Times New Roman', serif;
}

.rttl-regional-leaders-page .subtitle {
    color: hsl(153, 53%, 90%);
}

/* Tables on dark background */
.rttl-regional-leaders-page .table {
    background-color: transparent;
    color: hsl(153, 53%, 90%);
}

.rttl-regional-leaders-page .table thead th {
    color: hsl(42, 75%, 55%);
    border-color: hsl(153, 30%, 25%);
}

.rttl-regional-leaders-page .table td {
    color: hsl(153, 53%, 90%);
    border-color: hsl(153, 30%, 25%);
}

.rttl-regional-leaders-page .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: hsl(153, 40%, 12%);
}

.rttl-regional-leaders-page .table.is-hoverable tbody tr:not(.is-selected):hover {
    background-color: hsl(153, 40%, 16%);
}

/* Bulma's even-row hover rule (`.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(2n)`)
   is more specific than the generic hover rule above, so alternate rows would
   otherwise flash Bulma's light background on hover. Override it explicitly. */
.rttl-regional-leaders-page .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
    background-color: hsl(153, 40%, 16%);
}

/* Emphasis text inside dark containers */
.rttl-regional-leaders-page strong,
.rttl-regional-leaders-page b {
    color: inherit;
}

/* Grey helper text on dark */
.rttl-regional-leaders-page .has-text-grey {
    color: hsl(153, 53%, 70%) !important;
}

/* Links inside dark content */
.rttl-regional-leaders-page a {
    color: hsl(153, 40%, 80%);
}

/* Chapter type tags (e.g. "Regional Chapter", "Local Lodge") — a soft
   very-light-green background with dark green text. */
.rttl-regional-leaders-page .tag.rttl-chapter-type-tag {
    background-color: hsl(141, 53%, 90%) !important;
    color: hsl(153, 53%, 22%) !important;
}

/* Tab links are light text on a transparent background; when hovered the
   boxed tab gains a light background, so switch to black text. */
.rttl-regional-leaders-page .tabs a:hover {
    color: #0a0a0a;
}

/* === Dark Theme: shared page surfaces (member/admin) === */
/* Shared dark-mode surfaces for pages rendered on the member background image.
   Put `rttl-dark-surface` on the page's outermost wrapper and the descendant
   rules below cover the Bulma elements inside it (boxes, tables, forms,
   buttons, tags, notifications, dialogs). The palette matches the canonical
   member dark pages (Member/Index.razor.css, Member/AccountSettings.razor.css);
   do not fork these classes per page. */

.rttl-dark-background {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: var(--rttl-very-dark-brown);
    background-image: image-set(
        url(/img/background/member/bg-1280.webp) 1x,
        url(/img/background/member/bg-1920.webp) 2x,
        url(/img/background/member/bg-3840.webp) 4x
    );
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.rttl-dark-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.25) 40%,
        rgba(0, 0, 0, 0.25) 60%,
        rgba(0, 0, 0, 0.55) 100%
    );
    pointer-events: none;
}

.rttl-dark-surface {
    color: hsl(153, 53%, 90%);
}

/* Bulma sets `b, strong { color: #363636 }`, which is near-invisible on a dark
   surface. Make emphasis inherit the light colour of its container. */
.rttl-dark-surface strong,
.rttl-dark-surface b {
    color: inherit;
}

/* Headings (gold serif) */
.rttl-dark-title,
.rttl-dark-surface .title,
.rttl-dark-surface .subtitle,
.rttl-dark-surface h1,
.rttl-dark-surface h2,
.rttl-dark-surface h3,
.rttl-dark-surface h4,
.rttl-dark-surface h5,
.rttl-dark-surface h6 {
    color: hsl(42, 75%, 55%);
    font-family: Georgia, 'Times New Roman', serif;
}

.rttl-dark-card {
    background-color: hsla(153, 40%, 8%, 0.8);
    border: 6px solid hsl(42, 75%, 55%);
    border-radius: 8px;
    box-shadow: none;
    color: white;
}

/* Inputs (the explicit class is used on the change-username page's fields) */
.rttl-dark-input,
.rttl-dark-surface .input,
.rttl-dark-surface .textarea,
.rttl-dark-surface .select select,
.rttl-dark-surface select {
    background-color: hsla(153, 40%, 12%, 0.8);
    border-color: hsl(153, 30%, 25%);
    color: hsl(153, 53%, 90%);
}

.rttl-dark-input:focus,
.rttl-dark-surface .input:focus,
.rttl-dark-surface .textarea:focus,
.rttl-dark-surface .select select:focus,
.rttl-dark-surface select:focus {
    border-color: hsl(42, 75%, 55%);
    box-shadow: 0 0 0 2px rgba(196, 163, 62, 0.2);
    outline: none;
}

.rttl-dark-input[readonly],
.rttl-dark-surface .input[readonly],
.rttl-dark-surface .textarea[readonly] {
    background-color: hsla(153, 40%, 10%, 0.6);
    border-color: hsl(153, 25%, 25%);
    color: hsl(153, 30%, 80%);
}

.rttl-dark-input::placeholder,
.rttl-dark-surface .input::placeholder,
.rttl-dark-surface .textarea::placeholder {
    color: hsl(153, 20%, 50%);
}

/* Form labels, help text and checkboxes */
.rttl-dark-surface .label {
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .help {
    color: hsl(153, 53%, 75%);
}

.rttl-dark-surface .checkbox,
.rttl-dark-surface .radio {
    color: hsl(153, 53%, 90%);
}

/* Outlined gold button (mirrors .rttl-account-button) */
.rttl-dark-button,
.rttl-dark-surface .button.is-outlined {
    background-color: transparent;
    border-color: hsl(42, 75%, 55%);
    color: hsl(42, 75%, 55%);
}

.rttl-dark-button:hover,
.rttl-dark-button:focus,
.rttl-dark-surface .button.is-outlined:hover,
.rttl-dark-surface .button.is-outlined:focus {
    background-color: hsl(42, 75%, 55%);
    border-color: transparent;
    color: hsl(153, 40%, 8%);
}

/* Header-green buttons */
.rttl-dark-surface .button.is-primary,
.rttl-dark-surface .button.is-info {
    background-color: hsl(153, 53%, 22%);
    border-color: hsl(153, 53%, 22%);
    color: hsl(153, 53%, 95%);
}

.rttl-dark-surface .button.is-primary:hover,
.rttl-dark-surface .button.is-primary:focus,
.rttl-dark-surface .button.is-info:hover,
.rttl-dark-surface .button.is-info:focus {
    background-color: hsl(153, 40%, 80%);
    border-color: transparent;
    color: hsl(153, 40%, 8%);
}

/* Light / dark buttons */
.rttl-dark-surface .button.is-light {
    background-color: hsla(153, 40%, 12%, 0.6);
    border: 1px solid hsl(153, 30%, 30%);
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .button.is-light:hover,
.rttl-dark-surface .button.is-light:focus {
    background-color: hsl(153, 40%, 80%);
    border-color: transparent;
    color: hsl(153, 40%, 8%);
}

.rttl-dark-surface .button.is-dark {
    background-color: transparent;
    border-color: hsl(42, 75%, 55%);
    color: hsl(42, 75%, 55%);
}

.rttl-dark-surface .button.is-dark:hover,
.rttl-dark-surface .button.is-dark:focus {
    background-color: hsl(42, 75%, 55%);
    border-color: transparent;
    color: hsl(153, 40%, 8%);
}

/* Notifications on dark surfaces (the near-white `is-*-light` blocks are the
   single most jarring element on a dark page) */
.rttl-dark-notification,
.rttl-dark-surface .notification.is-warning,
.rttl-dark-surface .notification.is-warning.is-light {
    background-color: hsla(42, 75%, 55%, 0.15);
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .notification.is-success,
.rttl-dark-surface .notification.is-success.is-light {
    background-color: hsla(153, 53%, 22%, 0.6);
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .notification.is-danger,
.rttl-dark-surface .notification.is-danger.is-light {
    background-color: hsla(0, 60%, 45%, 0.25);
    color: hsl(0, 60%, 85%);
}

.rttl-dark-surface .notification.is-info,
.rttl-dark-surface .notification.is-info.is-light {
    background-color: hsla(204, 86%, 53%, 0.2);
    color: hsl(204, 86%, 85%);
}

/* Content, boxes and tables */
.rttl-dark-surface .box,
.rttl-dark-surface .card {
    background-color: hsla(153, 40%, 12%, 0.5);
    border: 1px solid hsl(153, 30%, 25%);
    box-shadow: none;
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .content,
.rttl-dark-surface .content p,
.rttl-dark-surface .content li {
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .content a,
.rttl-dark-surface a {
    color: hsl(153, 40%, 80%);
}

.rttl-dark-surface .table {
    background-color: transparent;
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .table th,
.rttl-dark-surface .table td {
    border-color: hsl(153, 30%, 20%);
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .table th {
    color: hsl(42, 75%, 55%);
}

/* Bulma 1.0.2 tints striped / hovered rows with the light `--bulma-scheme-main-*` colours, which makes
   the light dark-theme text invisible on those rows (e.g. the expanded "View comment" row in the
   in-person vetting history table at InPersonVettingBox.razor:150). Re-tint the row states instead of
   the text, mirroring Bulma's own selectors exactly so the override never depends on load order:
     .table.is-striped tbody tr:not(.is-selected):nth-child(2n)
     .table.is-hoverable tbody tr:not(.is-selected):hover
     .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(2n)  <-- the lightest state */
.rttl-dark-surface .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: hsla(153, 40%, 12%, 0.5);
}

.rttl-dark-surface .table.is-hoverable tbody tr:not(.is-selected):hover,
.rttl-dark-surface .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover,
.rttl-dark-surface .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
    /* Deliberately darker than the even-row stripe: a light hover tint made the row text unreadable,
       so hovering darkens the row (and keeps the gold/light cell text legible) instead of lightening it. */
    background-color: hsla(153, 40%, 18%, 0.85);
}

/* Status tags (GetStatusTagClass output) */
.rttl-dark-surface .tag {
    background-color: hsla(153, 40%, 12%, 0.8);
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .tag.is-success {
    background-color: hsl(153, 53%, 22%);
    color: hsl(153, 53%, 95%);
}

.rttl-dark-surface .tag.is-warning {
    background-color: hsla(42, 75%, 55%, 0.25);
    color: hsl(42, 75%, 78%);
}

.rttl-dark-surface .tag.is-info {
    background-color: hsla(204, 86%, 53%, 0.25);
    color: hsl(204, 86%, 85%);
}

.rttl-dark-surface .tag.is-danger {
    background-color: hsla(0, 60%, 45%, 0.3);
    color: hsl(0, 60%, 85%);
}

.rttl-dark-surface .tag.is-dark {
    background-color: hsl(153, 40%, 12%);
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .tag.is-light {
    background-color: hsla(153, 40%, 12%, 0.6);
    color: hsl(153, 53%, 90%);
}

/* Scrollable content panes (ancestry / skill / "From"). The light rules that
   used to live in Admin/User/Edit/Index.razor.css now live here so they reach
   the panels without a scoped-vs-global specificity tie. */
.rttl-dark-surface .scrollable-content-box,
.rttl-dark-surface .scrollable-content-box-sm {
    border: 1px solid hsl(153, 30%, 25%);
    padding: 8px;
    background: hsla(153, 40%, 12%, 0.5);
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .scrollable-content-box {
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.rttl-dark-surface .scrollable-content-box-sm {
    max-height: 150px;
    overflow-y: auto;
}

/* Breadcrumbs */
.rttl-dark-surface .breadcrumb a,
.rttl-dark-surface .breadcrumb li + li::before {
    color: hsl(153, 40%, 80%);
}

.rttl-dark-surface .breadcrumb li.is-active a {
    color: hsl(42, 75%, 55%);
}

/* Section separators */
.rttl-dark-surface hr {
    background-color: hsl(153, 30%, 25%);
    border-top-color: hsl(153, 30%, 25%);
}

/* Vetting flag selection ring — needs the longer selector to outrank the
   component's own scoped rule (`#363636` is invisible on a dark surface). */
.rttl-dark-surface .flag-selector input:checked + label .flag-circle {
    border-color: hsl(42, 75%, 55%);
}

/* Dialogs rendered by ConfirmedAction / ConfirmedFormSubmit live inside the
   wrapper, so a descendant rule styles them (and their backdrop). */
.rttl-dark-surface dialog {
    background-color: hsla(153, 40%, 8%, 0.98);
    border: 6px solid hsl(42, 75%, 55%);
    border-radius: 8px;
    color: white;
}

.rttl-dark-surface dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

/* Admin sidebar — crosses the AdminMenu component boundary (parent, not
   component, selector), so the dark surface reaches the child component. */
.rttl-dark-surface .rttl-dark-sidebar aside.menu {
    background-color: var(--rttl-dark-green);
    padding: 0.75rem;
}

.rttl-dark-surface .rttl-dark-sidebar aside.menu .menu-label {
    color: hsl(42, 75%, 55%);
}

.rttl-dark-surface .rttl-dark-sidebar aside.menu .menu-list li.rttl-menu-group-header {
    color: hsl(153, 53%, 90%);
}

.rttl-dark-surface .rttl-dark-sidebar aside.menu .menu-list a {
    color: hsl(153, 53%, 90%);
    background-color: transparent;
    border: 1px solid var(--rttl-menu-black);
    border-left: 4px solid var(--rttl-menu-black);
}

.rttl-dark-surface .rttl-dark-sidebar aside.menu .menu-list a:hover,
.rttl-dark-surface .rttl-dark-sidebar aside.menu .menu-list a:focus {
    background-color: hsl(153, 40%, 80%);
    color: hsl(153, 40%, 8%);
    border-color: var(--rttl-menu-black);
    border-left-color: hsl(42, 75%, 55%);
}

.rttl-dark-surface .rttl-dark-sidebar aside.menu .menu-list a.is-active {
    background-color: hsla(153, 40%, 22%, 0.6);
    color: hsl(153, 53%, 90%);
    border-left: 4px solid hsl(42, 75%, 55%);
}

.rttl-dark-surface .rttl-dark-sidebar aside.menu .menu-list a.is-active:hover,
.rttl-dark-surface .rttl-dark-sidebar aside.menu .menu-list a.is-active:focus {
    background-color: hsl(153, 40%, 80%);
    color: hsl(153, 40%, 8%);
    border-left-color: hsl(42, 75%, 55%);
}

.rttl-dark-surface .rttl-dark-sidebar aside.menu .menu-list li > ul {
    border-left-color: hsl(153, 30%, 25%);
}