/* CARTA Evidence shared interface styles. */

:root {
    /* Public-site tokens */
    --site-ink: #111827;
    --site-brand: #0d4a67;
    --site-bg: #ffffff;
    --site-surface: #f9fafb;
    --site-border: #e5e7eb;
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }

sup {
    color: #FFB707 !important;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    position: relative;
    top: -0.35em;
}

/* ---- Public header ---- */
.site-shell #mainHeader .site-nav-icon {
    font-size: 1rem;
    line-height: 1;
}

.site-shell #mainHeader .site-nav-ai {
    font-size: 0.625rem;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ---- Transitions ---- */
input, select, textarea, button, a {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ---- Shared tooltips ---- */
[data-ui-tooltip] {
    cursor: pointer;
}

.app-ui-tooltip {
    position: fixed;
    z-index: 2147483000;
    max-width: min(18rem, calc(100vw - 1rem));
    border-radius: 0.5rem;
    background: #191817;
    color: #fff;
    padding: 0.45rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1rem;
    text-align: left;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
    opacity: 0;
    pointer-events: none;
    white-space: normal;
}

.app-ui-tooltip.visible {
    opacity: 1;
}

/* ---- Rich text content ---- */
.prose ul {
    list-style: disc;
    margin: 0.75rem 0;
    padding-left: 1.35rem;
}

.prose ol {
    list-style: decimal;
    margin: 0.75rem 0;
    padding-left: 1.35rem;
}

.prose li {
    margin: 0.35rem 0;
    padding-left: 0.15rem;
}

.prose li::marker {
    color: #9ca3af;
}

.prose p {
    margin: 0.75rem 0;
}

/* ---- Dropdown ---- */
.dropdown-item {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.9375rem;
    color: #374151;
}
.dropdown-item:hover { background: #f3f4f6; }
.site-shell .dropdown-item { color: #1f2937; }
.site-shell .dropdown-item:hover { background: #f3f4f6; }

/* Footer uses the uploaded brand mark on a dark surface. */
.footer-logo-mark {
    filter: grayscale(1) brightness(0) invert(1);
}

/* ---- CARTA home typography ---- */
.site-shell .home-hero-title {
    line-height: 1.08 !important;
}

.site-shell .home-section-title {
    line-height: 1.16 !important;
}

.site-shell .home-module-title {
    line-height: 1.18 !important;
}

.site-shell .home-card-title,
.site-shell .home-topic-title {
    line-height: 1.22 !important;
}

/* ---- Admin sidebar ---- */
.admin-sidebar {
    width: 18rem;
    transition: width 0.2s ease;
}

.sidebar-square-logo { display: none; }

@media (min-width: 1024px) {
    .admin-content {
        padding-left: 18rem;
        transition: padding-left 0.2s ease;
    }

    body.sidebar-collapsed .admin-sidebar { width: 5rem; }
    body.sidebar-collapsed .admin-content { padding-left: 5rem; }
    body.sidebar-collapsed .sidebar-label { display: none; }
    body.sidebar-collapsed .sidebar-square-logo { display: inline-flex; }
    body.sidebar-collapsed .admin-nav-link { justify-content: center; }
    body.sidebar-collapsed .admin-sidebar > div:first-child { justify-content: center; }
    body.sidebar-collapsed .admin-sidebar > div:first-child a { justify-content: center; }
}

/* ---- Admin nav ---- */
.admin-nav-link {
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: 0.5rem;
    padding: 0.7rem 0.75rem;
    font-size: 1rem;
    color: #4b5563;
    position: relative;
}
.admin-nav-link:hover { background: #fff; color: #111827; }
.admin-nav-link.active { background: #fff; color: #0d4a67; font-weight: 600; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04); }
.admin-nav-link i { font-size: 1.4rem; }

/* Collapse button: desktop only */
.sidebar-collapse-btn { display: none; }
@media (min-width: 1024px) {
    .sidebar-collapse-btn { display: flex; }
}

/* Collapse/expand SVG icon toggle */
.sidebar-icon-expand { display: none; }
body.sidebar-collapsed .sidebar-icon-collapse { display: none; }
body.sidebar-collapsed .sidebar-icon-expand { display: block; }

/* ---- Home search (no focus ring) ---- */
#homeSearchForm input[type='search']:focus {
    --tw-ring-shadow: none;
    --tw-ring-color: transparent;
    box-shadow: none;
    border-color: transparent;
    outline: none;
}

/* ---- Forms ---- */
[type='text']:focus, [type='email']:focus, [type='url']:focus,
[type='password']:focus, [type='number']:focus, [type='date']:focus,
[type='search']:focus, [type='tel']:focus, textarea:focus, select:focus {
    --tw-ring-color: #0d4a67;
    border-color: #0d4a67;
}

.site-shell [type='text']:focus,
.site-shell [type='email']:focus,
.site-shell [type='url']:focus,
.site-shell [type='password']:focus,
.site-shell [type='number']:focus,
.site-shell [type='date']:focus,
.site-shell [type='search']:focus,
.site-shell [type='tel']:focus,
.site-shell textarea:focus,
.site-shell select:focus {
    --tw-ring-color: var(--site-brand);
    border-color: var(--site-brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 74, 103, 0.14);
}

/* ---- Password / OTP ---- */
.password-requirements li { font-size: 0.875rem; color: #6b7280; }
.password-requirements li.valid { color: #059669; }
.otp-single {
    letter-spacing: 0.45em;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
}

/* ---- Step wizard ---- */
.step { display: none; }
.step.active { display: block; }

/* ---- Utilities ---- */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Global custom selects ---- */
.app-native-select {
    display: none !important;
}
.app-select-wrapper {
    width: 100%;
}
.app-select-trigger {
    display: inline-flex;
    min-height: 2.5rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.5rem 0.75rem;
    color: #374151;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.site-shell .app-select-trigger {
    border-color: #e5e7eb;
    color: #27251e;
}
.app-select-trigger:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}
.app-select-trigger:disabled,
.app-select-trigger[aria-disabled="true"] {
    cursor: not-allowed;
    background: #f3f4f6;
    color: #9ca3af;
}
.app-select-trigger:focus,
.app-select-trigger[aria-expanded="true"] {
    outline: none;
    border-color: #0d4a67;
    box-shadow: 0 0 0 3px rgba(13, 74, 103, 0.14);
}
.app-select-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-select-icon {
    flex: none;
    color: #6b7280;
    font-size: 1rem;
}
.app-select-menu {
    position: fixed;
    z-index: 10000;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.25rem;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
}
.app-select-option {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    padding: 0.5rem 0.625rem;
    color: #374151;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    text-align: left;
}
.app-select-option:hover,
.app-select-option:focus,
.app-select-option.active {
    background: #eef6fb;
    color: #0d4a67;
    outline: none;
}
.app-select-option.active {
    font-weight: 600;
}
.app-select-option:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* ---- Profile account forms ---- */
[data-profile-panel] input:not([type="hidden"]):not(.sr-only),
[data-profile-panel] select,
[data-profile-panel] .app-select-trigger {
    height: 2.75rem;
    min-height: 2.75rem;
}
[data-profile-panel] textarea {
    min-height: 8rem;
}
[data-profile-panel] input:not([type="hidden"]):not(.sr-only):focus,
[data-profile-panel] select:focus,
[data-profile-panel] textarea:focus,
[data-profile-panel] .app-select-trigger:focus,
[data-profile-panel] .app-select-trigger[aria-expanded="true"] {
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    border-color: var(--site-brand) !important;
    box-shadow: none !important;
    outline: none;
}
[data-inline-editor] > .app-select-wrapper {
    min-width: 0;
}
[data-inline-editor] > div > button,
#profile-email-submit,
#profile-email-cancel,
#profile-email-verify {
    height: 2.75rem;
    min-height: 2.75rem;
}
.profile-editor-primary-button,
.profile-editor-secondary-button,
.profile-editor-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    min-height: 2.75rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.profile-editor-primary-button {
    padding: 0 1rem;
    background: #111827;
    color: #fff;
}
.profile-editor-primary-button:hover { background: #1f2937; }
.profile-editor-primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}
.profile-editor-secondary-button {
    padding: 0 1rem;
    border: 1px solid #d9e1e8;
    background: #fff;
    color: #1f2937;
}
.profile-editor-secondary-button:hover {
    border-color: #b7c4d1;
    color: #111827;
}
.profile-editor-icon-button {
    width: 2.75rem;
    border: 1px solid #d9e1e8;
    background: #fff;
    color: #64748b;
}
.profile-editor-icon-button:hover {
    border-color: #b7c4d1;
    color: #111827;
}
.profile-evidence-dropzone {
    border: 1px dashed #cfd8e3;
    border-radius: 0.75rem;
    background: #fff;
    padding: 1rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.profile-evidence-dropzone:hover,
.profile-evidence-dropzone.is-dragging {
    border-color: var(--site-brand);
    background: #f8fbfb;
}
.profile-evidence-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    background: #f3f6f8;
    color: #526273;
    font-size: 1.25rem;
}
.profile-evidence-count {
    display: inline-flex;
    align-items: center;
    height: 2.75rem;
    border-radius: 999px;
    background: #f3f6f8;
    padding: 0 0.75rem;
    color: #526273;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.profile-evidence-file-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #edf1f4;
    border-radius: 0.625rem;
    background: #f8fafb;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
}
.profile-evidence-file-icon {
    color: #64748b;
    font-size: 1rem;
}
.profile-evidence-file-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    color: #94a3b8;
}
.profile-evidence-file-remove:hover {
    color: #b91c1c;
}
.profile-editor-primary-button:focus-visible,
.profile-editor-secondary-button:focus-visible,
.profile-editor-icon-button:focus-visible,
.profile-evidence-file-remove:focus-visible {
    outline: none;
    border-color: var(--site-brand);
}

/* ---- Custom dropdown (settings) ---- */
.cs-dropdown {
    position: relative;
}
.cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    color: #111827;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-trigger:hover { border-color: #9ca3af; }
.cs-trigger:focus, .cs-trigger[aria-expanded="true"] {
    outline: none;
    border-color: #0d4a67;
    box-shadow: 0 0 0 3px rgba(13, 74, 103, 0.14);
}
.cs-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-menu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 50;
    overflow-y: auto;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    padding: 0.25rem;
}
.cs-option {
    padding: 0.5rem 0.625rem;
    font-size: 0.9375rem;
    color: #374151;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.cs-option:hover { background: #f3f4f6; }
.cs-option.active { background: #eef6fb; color: #0d4a67; font-weight: 500; }

/* ---- Segmented controls (settings) ---- */
.tier-segmented-control {
    gap: 0.25rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    padding: 0.25rem;
}
.tier-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.25rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: #6b7280;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tier-segment:hover { color: #374151; }
.tier-segment:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 74, 103, 0.14);
}
.tier-segment[aria-pressed="true"] {
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}
.tier-segment[data-value="basic"][aria-pressed="true"] {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #075985;
}
.tier-segment[data-value="pro"][aria-pressed="true"] {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}
.tier-segment[data-value="max"][aria-pressed="true"] {
    background: #f3e8ff;
    border-color: #c084fc;
    color: #6b21a8;
}
.tier-segment[data-value="default"][aria-pressed="true"] {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #075985;
}
.tier-segment[data-value="deep"][aria-pressed="true"] {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}
.tier-segment[data-value="report"][aria-pressed="true"] {
    background: #f3e8ff;
    border-color: #c084fc;
    color: #6b21a8;
}
.tier-segment[data-value="learn"][aria-pressed="true"] {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #92400e;
}

/* ---- Search year range slider ---- */
.year-range-input {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}
.year-range-input:focus {
    outline: none;
}
.year-range-input::-webkit-slider-runnable-track {
    height: 2.25rem;
    background: transparent;
}
.year-range-input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.5625rem;
    border: 2px solid #0d4a67;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    cursor: pointer;
}
.year-range-input::-moz-range-track {
    height: 2.25rem;
    background: transparent;
}
.year-range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #0d4a67;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    cursor: pointer;
}

/* ---- Toast notifications ---- */
.app-toast-region {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 9999;
    display: flex;
    width: min(calc(100vw - 2rem), 28rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    pointer-events: none;
}
.app-toast {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #bfdbfe;
    border-radius: 1rem;
    background: #fff;
    padding: 1rem;
    color: #27251e;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14), 0 3px 12px rgba(15, 23, 42, 0.08);
    pointer-events: auto;
}
.app-toast-inline {
    width: 100%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.app-toast-icon {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.1rem;
}
.app-toast-success {
    border-color: #bbf7d0;
}
.app-toast-success .app-toast-icon {
    background: #ecfdf5;
    color: #047857;
}
.app-toast-error {
    border-color: #fecaca;
}
.app-toast-error .app-toast-icon {
    background: #fef2f2;
    color: #dc2626;
}
.app-toast-warning {
    border-color: #fde68a;
}
.app-toast-warning .app-toast-icon {
    background: #fffbeb;
    color: #d97706;
}
.app-toast-info {
    border-color: #bfdbfe;
}
.app-toast-info .app-toast-icon {
    background: #eff6ff;
    color: #2563eb;
}
.app-toast-message {
    min-width: 0;
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35rem;
}
.app-toast-close {
    display: inline-flex;
    height: 2rem;
    width: 2rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #6b7280;
}
.app-toast-close:hover {
    background: #f3f4f6;
    color: #111827;
}
.app-toast-dismiss-all {
    align-self: flex-end;
    padding-right: 0.25rem;
    color: #6b7280;
    font-size: 0.9375rem;
    font-weight: 700;
    pointer-events: auto;
}
.app-toast-dismiss-all:hover {
    color: #111827;
}
@media (max-width: 640px) {
    .app-toast-region {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        width: auto;
    }
}

/* ---- Shared frontend API error state ---- */
.app-error-card {
    display: flex;
    min-height: 15.75rem;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed #fecaca;
    border-radius: 0.5rem;
    background: #fff1f2;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: #dc2626;
}
.app-error-card.hidden {
    display: none;
}
.app-error-card-icon {
    margin-bottom: 1.35rem;
    color: #fb7185;
    font-size: 2rem;
    line-height: 1;
}
.app-error-card-title {
    margin: 0;
    color: #991b1b;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
}
.app-error-card-message {
    margin: 0.45rem 0 0;
    color: #dc2626;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6rem;
}
.app-error-card-details {
    margin: 0.85rem 0 0;
    color: #dc2626;
    font-size: 1rem;
    line-height: 1.6rem;
}
.app-error-card-details-label {
    color: #b91c1c;
    font-weight: 700;
}
.app-error-card-details-list {
    margin: 0.35rem 0 0;
    display: inline-block;
    list-style: disc;
    padding-left: 1.25rem;
    text-align: left;
}
.app-error-card-details-list li + li {
    margin-top: 0.25rem;
}
.app-error-card-action {
    margin-top: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.5rem 1rem;
    color: #991b1b;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25rem;
}
.app-error-card-action:hover {
    background: #fff7f7;
}

/* ---- Research loading animation ---- */
.research-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
}
.research-loading-icon {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: #0d4a67;
    border-radius: 50%;
    animation: research-spin 0.8s linear infinite;
}
@keyframes research-spin {
    to { transform: rotate(360deg); }
}
.research-loading-msg {
    margin-top: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    min-height: 1.5rem;
}
.research-loading-sub {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6b7280;
    min-height: 1.25rem;
}
.research-msg-fade-in {
    animation: research-fade-in 0.4s ease forwards;
}
.research-msg-fade-out {
    animation: research-fade-out 0.3s ease forwards;
}
@keyframes research-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes research-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-4px); }
}
.research-loading-progress {
    margin-top: 1.25rem;
    width: 12rem;
    height: 3px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}
.research-loading-progress-bar {
    height: 100%;
    background: #0d4a67;
    border-radius: 999px;
    animation: research-progress 45s ease-out forwards;
}
@keyframes research-progress {
    0% { width: 0; }
    20% { width: 30%; }
    50% { width: 55%; }
    80% { width: 75%; }
    100% { width: 90%; }
}

/* ---- Scrollable tabs (mobile) ---- */
.tabs-scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
}
.tabs-scroll > * { flex-shrink: 0; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll.scrolled-end {
    mask-image: none;
    -webkit-mask-image: none;
}

/* ---- Per-field translation flags ---- */
.arc-field-flags {
    display: inline-flex;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    align-items: center;
}
.arc-field-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: 2px;
    border: 1px solid #cbd5e1;
    transition: border-color 0.2s, opacity 0.2s, filter 0.2s;
    outline: none;
}
.arc-field-flag:focus-visible {
    border-color: #1d2327;
    box-shadow: 0 0 0 2px rgba(13, 74, 103, 0.18);
}
.arc-field-flag .fi {
    display: block;
}
.arc-field-flag-disabled {
    opacity: 0.25;
    pointer-events: none;
    cursor: default;
    filter: grayscale(1);
}
.arc-field-flag-active {
    border-color: #1d2327;
}
.arc-field-flags-spinner {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: #3b5998;
    font-size: 14px;
}
.ar-translating {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.ar-translated {
    animation: ar-fade-in 0.3s ease;
}
@keyframes ar-fade-in {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* ---- Neutral icon actions ---- */
button.inline-edit-trigger,
#profile-email-edit,
#profile-orcid-copy,
.profile-identifier-copy {
    background-color: transparent !important;
    color: #d1d5db;
}
button.inline-edit-trigger:hover,
button.inline-edit-trigger:focus-visible,
#profile-email-edit:hover,
#profile-email-edit:focus-visible,
#profile-orcid-copy:hover,
#profile-orcid-copy:focus-visible,
.profile-identifier-copy:hover,
.profile-identifier-copy:focus-visible {
    background-color: transparent !important;
    color: #374151;
}
button.inline-edit-trigger:active,
#profile-email-edit:active,
#profile-orcid-copy:active,
.profile-identifier-copy:active {
    background-color: transparent !important;
    color: #111827;
}
#profile-orcid-copy.text-emerald-700,
.profile-identifier-copy.text-emerald-700 {
    color: #047857;
}
#copy-orcid-redirect {
    background-color: #fff !important;
}
#copy-orcid-redirect:hover,
#copy-orcid-redirect:focus-visible,
#copy-orcid-redirect:active {
    background-color: #fff !important;
}

/* ---- Print ---- */
@media print {
    nav, footer, .no-print { display: none !important; }
    body { background: white !important; }
}

/* ---- Redesigned Marquee & Elements ---- */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 35s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}