/* Loaded on every Unfold page (UNFOLD["STYLES"]). A tinted page background lets the white
   cards and tables stand out, which Unfold's white-on-white layout does not. */

#main {
    background-color: var(--color-base-100);
}

.dark #main {
    background-color: var(--color-base-950);
}

#main .bg-white,
#content-related {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 2px 6px rgb(0 0 0 / 0.05);
}

/* Unfold leaves the recent-actions panel transparent; give it the cards' background. */
#content-related {
    background-color: white;
}

.dark #content-related {
    background-color: var(--color-base-900);
}

/* Unfold's secondary buttons share the page's new tint; make them white with a border. */
#main a.bg-base-100,
#main button.bg-base-100 {
    background-color: white;
    border-color: var(--color-base-200);
}

#main a.bg-base-100:hover,
#main button.bg-base-100:hover {
    background-color: var(--color-base-50);
}

.dark #main a.bg-base-100,
.dark #main button.bg-base-100 {
    background-color: var(--color-base-900);
    border-color: var(--color-base-700);
}

/* Forms sit on white like the cards. */
#main fieldset,
#main .inline-group {
    background-color: white;
}

.dark #main fieldset,
.dark #main .inline-group {
    background-color: var(--color-base-900);
}

/* Long checkbox labels (e.g. accepting the terms) wrap instead of running out of the form. */
.form-checkbox label {
    white-space: normal;
}
.form-checkbox > div {
    align-items: flex-start;
}
.form-checkbox > div > input[type="checkbox"] {
    margin-top: 0.2rem;
    flex: none;
}

/* Pages before login: the logo beside the site name, the page's heading below. */
.foundation-auth-brand {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.foundation-auth-brand img {
    border-radius: 0.6rem;
    height: 2.5rem;
    width: 2.5rem;
}

.foundation-auth-title h1 {
    font-size: 1.125rem;
    margin-top: 1rem;
}

/* Survey dialog (foundation.surveys) on dashboard pages. */
.foundation-survey-backdrop {
    align-items: flex-start;
    background: rgb(17 24 39 / 0.45);
    display: flex;
    inset: 0;
    justify-content: center;
    overflow-y: auto;
    padding: 4vh 1rem;
    position: fixed;
    z-index: 70;
}

.foundation-survey {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.25);
    color: var(--color-font-default-light);
    max-width: 36rem;
    padding: 1.75rem;
    position: relative;
    width: 100%;
}

.dark .foundation-survey {
    background: var(--color-base-900);
    color: var(--color-font-default-dark);
}

.foundation-survey h2 {
    color: var(--color-font-important-light);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0.25rem 0 0.5rem;
}

.dark .foundation-survey h2,
.dark .foundation-survey legend {
    color: var(--color-font-important-dark);
}

.foundation-survey-kicker {
    color: var(--color-primary-600);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.foundation-survey-intro,
.foundation-survey-note,
.foundation-survey-hint {
    margin-bottom: 0.75rem;
}

.foundation-survey-note,
.foundation-survey-hint {
    font-size: 0.8rem;
    opacity: 0.75;
}

.foundation-survey-close {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.foundation-survey-question {
    border-top: 1px solid var(--color-base-200);
    margin: 0;
    padding: 1rem 0 0.75rem;
}

.dark .foundation-survey-question {
    border-color: var(--color-base-700);
}

.foundation-survey legend {
    color: var(--color-font-important-light);
    float: left;
    font-weight: 600;
    margin-bottom: 0.5rem;
    width: 100%;
}

.foundation-survey-required {
    color: #dc2626;
}

.foundation-survey-options {
    clear: both;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.foundation-survey-options label {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
}

.foundation-survey-rating {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.foundation-survey-rating label {
    border: 1px solid var(--color-base-300);
    border-radius: 0.5rem;
    padding: 0.35rem 0.8rem;
}

.foundation-survey textarea {
    background: transparent;
    border: 1px solid var(--color-base-300);
    border-radius: 0.5rem;
    clear: both;
    display: block;
    padding: 0.5rem 0.75rem;
    width: 100%;
}

.foundation-survey-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.foundation-survey-actions button {
    background: var(--color-base-100);
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    padding: 0.5rem 0.9rem;
}

.dark .foundation-survey-actions button {
    background: var(--color-base-800);
}

.foundation-survey-actions .foundation-survey-send,
.dark .foundation-survey-actions .foundation-survey-send {
    background: var(--color-primary-600);
    color: #fff;
}

.foundation-survey-optout {
    cursor: pointer;
    font-size: 0.8rem;
    margin-top: 1rem;
    opacity: 0.75;
    text-decoration: underline;
}

.foundation-survey-results {
    width: 100%;
}

.foundation-survey-results td {
    padding: 0.3rem 0.5rem 0.3rem 0;
}

.foundation-survey-results meter {
    width: 100%;
}

.foundation-survey-texts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dark .foundation-survey-rating label,
.dark .foundation-survey textarea {
    border-color: var(--color-base-600);
}

@media (max-width: 480px) {
    .foundation-survey {
        padding: 1.25rem;
    }

    .foundation-survey-rating label {
        padding: 0.35rem 0.6rem;
    }
}

/* Behind the sidebar on small screens, where it covers the page (admin/base.html). */
.foundation-sidebar-backdrop {
    background: rgb(0 0 0 / 0.4);
    inset: 0;
    position: fixed;
    z-index: 50;
}

/* Unfold shows the sidebar beside the page from 1281px. */
@media (min-width: 1281px) {
    .foundation-sidebar-backdrop {
        display: none !important;
    }
}

/* Success and info messages float at the top right and fade away (admin/base.html, toasts.js). */
.foundation-toasts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    position: fixed;
    right: 1rem;
    top: 5rem;
    width: min(24rem, calc(100vw - 2rem));
    z-index: 100;
}

.foundation-toast {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--color-base-200);
    border-left-width: 4px;
    border-radius: var(--border-radius, 6px);
    box-shadow: 0 10px 25px -8px rgb(0 0 0 / 0.25);
    color: var(--color-font-important-light);
    display: flex;
    gap: 0.625rem;
    line-height: 1.35;
    padding: 0.75rem 0.5rem 0.75rem 0.75rem;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.foundation-toast p {
    flex: 1;
    margin: 0.1rem 0 0;
    overflow-wrap: anywhere;
}

.foundation-toast > .material-symbols-outlined {
    font-size: 20px;
}

.foundation-toast-success {
    border-left-color: #16a34a;
}

.foundation-toast-success > .material-symbols-outlined {
    color: #16a34a;
}

.foundation-toast-info {
    border-left-color: #2563eb;
}

.foundation-toast-info > .material-symbols-outlined {
    color: #2563eb;
}

.foundation-toast-close {
    border-radius: 4px;
    color: var(--color-base-400);
    cursor: pointer;
    display: flex;
    padding: 0.125rem;
}

.foundation-toast-close:hover {
    color: var(--color-base-700);
}

.foundation-toast-close .material-symbols-outlined {
    font-size: 18px;
}

.foundation-toast.is-hiding {
    opacity: 0;
    transform: translateX(1rem);
}

.dark .foundation-toast {
    background: var(--color-base-800);
    border-color: var(--color-base-700);
    color: var(--color-font-important-dark);
}

.dark .foundation-toast-close:hover {
    color: var(--color-base-200);
}

@media (max-width: 640px) {
    .foundation-toasts {
        left: 1rem;
        top: 4.5rem;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foundation-toast {
        transition: none;
    }
}

/* Unfold sizes the sidebar with 100vh, which on phones is taller than the visible screen (it
   ignores the browser's address bar): the user menu at the bottom ended up under the bar and
   could not be scrolled to. The dynamic viewport height follows the bar; the app list scrolls. */
@supports (height: 100dvh) {
    #nav-sidebar {
        max-height: 100dvh;
    }

    #nav-sidebar-inner {
        height: 100dvh;
        min-height: 0;
    }
}

#nav-sidebar-inner > :last-child {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* A collapsed form section (admin/includes/fieldset.html): a row saying what is inside, with
   "Show" / "Hide", instead of Unfold's bare heading. */
.foundation-collapse > details > summary {
    list-style: none;
}

.foundation-collapse > details > summary::-webkit-details-marker {
    display: none;
}

/* Unfold's own arrow for collapsed fieldsets; this row has its own. */
.foundation-collapse > details > summary::after {
    content: none;
    display: none;
}

.foundation-collapse-summary {
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-base-200);
    border-radius: var(--border-radius, 6px);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
}

.foundation-collapse-summary:hover {
    border-color: var(--color-base-300);
}

.foundation-collapse-summary:focus-visible {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}

.foundation-collapse details[open] > .foundation-collapse-summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -1px;
}

.foundation-collapse-icon {
    color: var(--color-primary-600);
    transition: transform 0.15s ease;
}

.foundation-collapse details[open] .foundation-collapse-icon {
    transform: rotate(180deg);
}

.foundation-collapse-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.foundation-collapse-title {
    color: var(--color-font-important-light);
    font-weight: 600;
}

.foundation-collapse-description {
    color: var(--color-font-subtle-light);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.foundation-collapse-action {
    color: var(--color-primary-600);
    flex: none;
    font-weight: 500;
}

.foundation-collapse details[open] .foundation-collapse-show,
.foundation-collapse details:not([open]) .foundation-collapse-hide {
    display: none;
}

.dark .foundation-collapse-summary {
    background: var(--color-base-900);
    border-color: var(--color-base-800);
}

.dark .foundation-collapse-title {
    color: var(--color-font-important-dark);
}

.dark .foundation-collapse-description {
    color: var(--color-font-subtle-dark);
}

.dark .foundation-collapse-icon,
.dark .foundation-collapse-action {
    color: var(--color-primary-500);
}

@media (prefers-reduced-motion: reduce) {
    .foundation-collapse-icon {
        transition: none;
    }
}

/* Phones: a long value without spaces (a password hash, a link, a code) wraps instead of making
   the whole page wider than the screen, and fields may shrink to the screen's width. */
#content .readonly,
#content bdi,
#content .help,
#content .leading-relaxed {
    overflow-wrap: anywhere;
}

/* Browsers give a fieldset min-width: min-content, so without this its widest value decides the
   page's width. */
#content fieldset,
#content .field-line > div,
#content .readonly {
    min-width: 0;
}

#content select,
#content .select2-container {
    max-width: 100%;
}

/* The ALTCHA spam check: as wide as the other fields and in their colours (the widget's own
   default is 260 px wide and grey). */
altcha-widget {
    display: block;
    --altcha-max-width: 100%;
    --altcha-border-width: 1px;
    --altcha-border-radius: var(--border-radius, 6px);
    --altcha-color-base: #fff;
    --altcha-color-border: var(--color-base-200);
    --altcha-color-border-focus: var(--color-primary-600);
    --altcha-color-text: var(--color-font-important-light);
    --altcha-color-active: var(--color-primary-600);
    --altcha-color-footer-bg: var(--color-base-50);
    --altcha-color-error-text: #dc2626;
    /* The checkbox inside the widget. */
    accent-color: var(--color-primary-600);
}

.dark altcha-widget {
    accent-color: var(--color-primary-500);
    --altcha-color-base: var(--color-base-900);
    --altcha-color-border: var(--color-base-700);
    --altcha-color-text: var(--color-font-important-dark);
    --altcha-color-active: var(--color-primary-500);
    --altcha-color-footer-bg: var(--color-base-800);
    --altcha-color-error-text: #f87171;
}

/* Phones and tablets: the form's buttons stay at the bottom of the screen in one row (Unfold
   makes them sticky only on large screens and stacks them full width below the form), and
   rise above the on-screen keyboard (change_form.js sets --foundation-keyboard). */
@media (max-width: 1023px) {
    #submit-row {
        bottom: 0;
        position: sticky;
        transform: translateY(calc(-1 * var(--foundation-keyboard, 0px)));
    }

    #submit-row > div {
        border-top: 1px solid var(--color-base-200);
        padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
        padding-top: 0.625rem;
    }

    .dark #submit-row > div {
        border-color: var(--color-base-800);
    }

    #submit-row > div > div.relative {
        flex-flow: row-reverse wrap;
        gap: 0.5rem;
    }

    #submit-row .w-full {
        width: auto;
    }

    #submit-row button[name="_save"] {
        flex: 1 1 auto;
    }

    /* The Delete button's group: to the left, as small as its button. */
    #submit-row > div > div.relative > div:last-child {
        flex-direction: row;
        margin-right: auto;
        width: auto;
    }

    #submit-row a,
    #submit-row button {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
        white-space: nowrap;
    }
}

/* Narrow phones: "Delete" without the model's name, so the row fits in every language
   ("Löschen Bienenstock" would push Delete onto a second line). */
@media (max-width: 480px) {
    #submit-row .foundation-delete-what {
        display: none;
    }
}

/* Notifications (foundation.notifications): the bell in the header and the list page. */
.foundation-bell {
    align-items: center;
    border-radius: 999px;
    color: var(--color-base-500);
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    position: relative;
    width: 2.25rem;
}

.foundation-bell:hover {
    background: var(--color-base-100);
    color: var(--color-base-700);
}

.dark .foundation-bell:hover {
    background: var(--color-base-800);
    color: var(--color-base-200);
}

.foundation-bell-count {
    background: var(--color-primary-600);
    border-radius: 999px;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.125rem;
    min-width: 1.125rem;
    padding: 0 0.3rem;
    position: absolute;
    right: -0.125rem;
    text-align: center;
    top: -0.125rem;
}

.foundation-notifications {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.foundation-notification {
    background: #fff;
    border: 1px solid var(--color-base-200);
    border-radius: var(--border-radius, 0.5rem);
    padding: 1rem 1.25rem;
}

.dark .foundation-notification {
    background: var(--color-base-900);
    border-color: var(--color-base-800);
}

.foundation-notification.is-new {
    border-left: 4px solid var(--color-primary-600);
}

.foundation-notification header {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.375rem;
}

.foundation-notification h2 {
    color: var(--color-font-important-light, inherit);
    font-size: 1rem;
    font-weight: 600;
}

.dark .foundation-notification h2 {
    color: var(--color-font-important-dark, inherit);
}

.foundation-notification-new {
    color: var(--color-primary-600);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.foundation-notification time {
    color: var(--color-base-500);
    font-size: 0.8125rem;
    margin-left: auto;
}

.foundation-notification p {
    overflow-wrap: anywhere;
}

.foundation-notification p a,
.foundation-notification-link {
    color: var(--color-primary-600);
    text-decoration: underline;
}

.foundation-notification-link {
    align-items: center;
    display: inline-flex;
    font-weight: 600;
    gap: 0.25rem;
    margin-top: 0.5rem;
    text-decoration: none;
}

.foundation-notification-link .material-symbols-outlined {
    font-size: 1.125rem;
}

.foundation-notifications-settings {
    display: flex;
    justify-content: flex-end;
}

.foundation-notifications-settings a {
    align-items: center;
    color: var(--color-primary-600);
    display: inline-flex;
    font-weight: 500;
    gap: 0.375rem;
}

.foundation-notifications-settings .material-symbols-outlined {
    font-size: 1.125rem;
}

.foundation-kinds {
    border-collapse: collapse;
    margin-bottom: 1rem;
    width: 100%;
}

.foundation-kinds th,
.foundation-kinds td {
    border-bottom: 1px solid var(--color-base-200);
    padding: 0.625rem 0.5rem;
}

.dark .foundation-kinds th,
.dark .foundation-kinds td {
    border-color: var(--color-base-800);
}

.foundation-kinds thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    width: 5rem;
}

.foundation-kinds tbody th {
    font-weight: 500;
    text-align: left;
}

.foundation-kinds tbody th .text-subtle {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
}

.foundation-kinds td {
    text-align: center;
}

.foundation-kinds input[type="checkbox"] {
    accent-color: var(--color-primary-600);
    height: 1.25rem;
    width: 1.25rem;
}

.foundation-hours {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.foundation-hours select {
    background: transparent;
    border: 1px solid var(--color-base-300);
    border-radius: var(--border-radius, 0.375rem);
    min-height: 2.5rem;
    padding: 0.25rem 0.5rem;
}

.dark .foundation-hours select {
    border-color: var(--color-base-700);
}

.foundation-save-button,
.foundation-push-toggle {
    background: var(--color-primary-600);
    border-radius: var(--border-radius, 0.375rem);
    color: #fff;
    font-weight: 600;
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
}

.foundation-push-toggle {
    margin-top: 0.75rem;
}

.foundation-push-toggle.is-on {
    background: transparent;
    border: 1px solid var(--color-base-300);
    color: inherit;
}

.foundation-push-toggle:disabled {
    opacity: 0.6;
}

.foundation-devices-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}

.foundation-devices {
    margin-bottom: 0.75rem;
}

.foundation-devices li {
    align-items: center;
    border-bottom: 1px solid var(--color-base-200);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.dark .foundation-devices li {
    border-color: var(--color-base-800);
}

.foundation-link-button {
    color: var(--color-primary-600);
    font-weight: 500;
    text-decoration: underline;
}

/* Leaving an edit form with unsaved changes (change_form.js, admin/submit_line.html). Like the
   form's buttons: one row, also on phones, the main button (stay) on the right. */
.foundation-leave {
    background: #fff;
    border: 0;
    border-radius: 0.75rem;
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.25);
    color: var(--color-font-default-light);
    margin: auto;
    max-width: 28rem;
    padding: 1.5rem;
    width: calc(100% - 2rem);
}

.dark .foundation-leave {
    background: var(--color-base-900);
    color: var(--color-font-default-dark);
}

.foundation-leave::backdrop {
    background: rgb(0 0 0 / 0.45);
}

.foundation-leave h2 {
    color: var(--color-font-important-light);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.dark .foundation-leave h2 {
    color: var(--color-font-important-dark);
}

.foundation-leave-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.foundation-leave-actions button {
    border-radius: var(--border-radius, 0.375rem);
    font-weight: 600;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
}

.foundation-leave-stay {
    background: var(--color-primary-600);
    color: #fff;
}

.foundation-leave-go {
    border: 1px solid var(--color-base-300);
    color: var(--color-red-600, #dc2626);
}

.dark .foundation-leave-go {
    border-color: var(--color-base-700);
    color: var(--color-red-400, #f87171);
}

/* Deleting in a dialog (delete_dialog.js): the confirmation page's question and the related
   items that go with it; long lists scroll inside the dialog. */
.foundation-delete {
    max-width: 34rem;
}

.foundation-delete-content {
    max-height: 60vh;
    overflow-y: auto;
}

.foundation-delete-content p {
    padding: 0 0 0.75rem !important;
}

.foundation-delete-content > div {
    border: 0 !important;
    font-size: 0.875rem;
    padding: 0 0 0.5rem !important;
}

.foundation-delete-content ul ul {
    margin-left: 1rem;
}

.foundation-delete-confirm {
    background: var(--color-red-600, #dc2626);
    color: #fff;
}

.foundation-delete-confirm:disabled {
    opacity: 0.6;
}

.foundation-delete-content h2 {
    font-size: 0.9375rem;
    margin: 0.25rem 0 0.25rem !important;
}

/* Tabular inlines on phones and tablets (Unfold hides the header below lg and squeezes every
   column into the screen, so names and dates break letter by letter): keep the header and
   natural column widths, and let the table scroll sideways in its wrapper. */
@media (max-width: 1023px) {
    .tabular .formset-wrapper table.formset {
        min-width: 44rem;
    }

    .tabular .formset-wrapper table.formset thead {
        display: table-header-group;
    }

    .tabular .formset-wrapper table.formset td {
        white-space: nowrap;
    }

    .tabular .formset-wrapper table.formset td select {
        min-width: 8rem;
    }
}

/* The bell's window with the newest notifications (foundation/notifications/bell.js). */
.foundation-bell-panel {
    background: #fff;
    border: 1px solid var(--color-base-200);
    border-radius: 0.75rem;
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.18);
    max-height: min(32rem, calc(100vh - 6rem));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 60;
}

.dark .foundation-bell-panel {
    background: var(--color-base-900);
    border-color: var(--color-base-800);
}

.foundation-bell-list {
    overflow-y: auto;
}

.foundation-bell-item {
    border-bottom: 1px solid var(--color-base-200);
    padding: 0.75rem 1rem;
}

.dark .foundation-bell-item {
    border-color: var(--color-base-800);
}

.foundation-bell-item.is-new {
    border-left: 3px solid var(--color-primary-600);
    padding-left: calc(1rem - 3px);
}

.foundation-bell-item h3 {
    color: var(--color-font-important-light, inherit);
    font-size: 0.875rem;
    font-weight: 600;
}

.dark .foundation-bell-item h3 {
    color: var(--color-font-important-dark, inherit);
}

.foundation-bell-item p {
    font-size: 0.8125rem;
    margin-top: 0.125rem;
    overflow-wrap: anywhere;
}

.foundation-bell-item footer {
    align-items: center;
    display: flex;
    font-size: 0.75rem;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: 0.375rem;
}

.foundation-bell-item time {
    color: var(--color-base-500);
}

.foundation-bell-item a,
.foundation-bell-footer a {
    color: var(--color-primary-600);
    font-weight: 600;
}

.foundation-bell-empty {
    color: var(--color-base-500);
    font-size: 0.875rem;
    padding: 1.25rem 1rem;
}

.foundation-bell-footer {
    align-items: center;
    display: flex;
    font-size: 0.875rem;
    justify-content: space-between;
    padding: 0.625rem 1rem;
}

.foundation-bell-footer .material-symbols-outlined {
    font-size: 1.25rem;
}

.foundation-bell-loading {
    height: 4rem;
}

.foundation-confirm-question {
    font-size: 0.9375rem;
    font-weight: 500;
}

/* The profile picture (accounts/profile.html, avatar_dialog.js): a round avatar that shows a
   camera on hover or focus and opens its dialog; the dialog previews the chosen photo. */
.foundation-avatar {
    align-items: center;
    background: var(--color-primary-100);
    border-radius: 9999px;
    color: var(--color-primary-700);
    display: flex;
    flex-shrink: 0;
    height: 4.5rem;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 4.5rem;
}

.dark .foundation-avatar {
    background: var(--color-primary-900);
    color: var(--color-primary-200);
}

.foundation-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.foundation-avatar-initial {
    font-size: 1.75rem;
    font-weight: 600;
}

button.foundation-avatar {
    cursor: pointer;
}

button.foundation-avatar:focus-visible {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}

.foundation-avatar-overlay {
    align-items: center;
    background: rgb(0 0 0 / 0.45);
    color: #fff;
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: opacity 0.15s;
}

.foundation-avatar:hover .foundation-avatar-overlay,
.foundation-avatar:focus-visible .foundation-avatar-overlay {
    opacity: 1;
}

.foundation-avatar-large {
    font-size: 1.5rem;
    height: 9rem;
    margin: 0.75rem auto 0.75rem;
    width: 9rem;
}

.foundation-avatar-large .foundation-avatar-initial {
    font-size: 3.5rem;
}

.foundation-avatar-choose {
    align-items: center;
    border: 1px solid var(--color-base-300);
    border-radius: var(--border-radius, 0.375rem);
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
}

.dark .foundation-avatar-choose {
    border-color: var(--color-base-700);
}

.foundation-avatar-choose:focus-within {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}

.foundation-avatar-cancel {
    border: 1px solid var(--color-base-300);
}

.dark .foundation-avatar-cancel {
    border-color: var(--color-base-700);
}

.foundation-avatar-dialog .foundation-leave-stay:disabled {
    opacity: 0.5;
}

.foundation-avatar-choose input {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.foundation-avatar-error {
    color: var(--color-red-600, #dc2626);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    text-align: center;
}

.dark .foundation-avatar-error {
    color: var(--color-red-400, #f87171);
}

.foundation-avatar-remove {
    margin-right: auto;
}

/* The offer to install the phone app (foundation/js/app.js), at the bottom of the screen. */
.foundation-app-offer {
    background: #fff;
    border: 1px solid var(--color-base-200);
    border-radius: 0.75rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.35);
    color: var(--color-font-important-light);
    display: flex;
    gap: 0.75rem;
    left: 1rem;
    padding: 1rem;
    position: fixed;
    right: 1rem;
    z-index: 110;
}

.dark .foundation-app-offer {
    background: var(--color-base-900);
    border-color: var(--color-base-700);
    color: var(--color-font-important-dark);
}

.foundation-app-offer img {
    border-radius: 0.625rem;
    flex: none;
    height: 48px;
    width: 48px;
}

@media (min-width: 640px) {
    .foundation-push-offer {
        left: auto;
        width: 26rem;
    }
}

.foundation-push-offer > .material-symbols-outlined {
    color: var(--color-primary-600);
    flex: none;
    font-size: 2rem;
}

.foundation-app-offer-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.foundation-app-offer p {
    line-height: 1.4;
    margin: 0;
}

.foundation-app-offer p[data-hint] {
    font-weight: 600;
}

.foundation-app-offer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.foundation-app-offer-actions button {
    border-radius: var(--border-radius, 6px);
    font-weight: 600;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
}

.foundation-app-offer-install {
    background: var(--color-primary-600);
    color: #fff;
}

.foundation-app-offer-later {
    border: 1px solid var(--color-base-300);
}

/* The owner column superusers get in owner-scoped lists: a user name on one line
   ("demo-clan-3" would break at the hyphen in a narrow column). */
#result_list td.field-owner {
    white-space: nowrap;
}