justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--panel-text-muted, var(--color-text-muted));
    padding: 0;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.timelines-manager-modal .em-edit-panel-close:hover,
.timelines-manager-modal .em-filters-panel-close:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--panel-text, var(--color-text-primary));
}

.timelines-manager-modal .em-edit-panel-close:focus,
.timelines-manager-modal .em-filters-panel-close:focus {
    outline: none;
}

.timelines-manager-modal .em-edit-panel-close:focus-visible,
.timelines-manager-modal .em-filters-panel-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--panel-accent, var(--color-primary));
}

.modal-close-btn:hover,
.event-card-close-btn:hover,
.attachments-manager-close-btn:hover,
.timelines-manager-close-btn:hover,
.event-manager-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--panel-text, var(--color-text-primary));
}

.modal-close-btn:focus-visible,
.event-card-close-btn:focus-visible,
.attachments-manager-close-btn:focus-visible,
.timelines-manager-close-btn:focus-visible,
.event-manager-close-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--panel-accent, var(--color-primary));
}

/* Event Details Overlay - Panel Shell Layout */
#event-details-card-overlay .event-details-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
}

#event-details-card-overlay .c-modal-header {
    flex-shrink: 0;
}

/* Overlay shell header: keep the close button in the header corner.
   Header is the positioning anchor (see .c-modal-header { position: relative; }). */
#event-details-card-overlay .c-modal-header-actions .c-modal-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    margin-left: 0;
    z-index: 6;
}

#event-details-card-overlay #event-details-card-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

#event-details-card-overlay .c-modal-footer {
    flex-shrink: 0;
    justify-content: space-between;
    gap: var(--panel-space-4, 16px);
    /* Explicit radius to match container corners during re-renders */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#event-details-card-overlay .c-modal-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--panel-space-3, 12px);
    margin-left: auto;
}

#event-details-card-overlay .c-modal-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--panel-space-2, 8px);
    height: var(--panel-button-height, 36px);
    padding: 0 var(--panel-space-4, 16px);
    border: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    border-radius: var(--panel-button-radius, 8px);
    background: var(--panel-surface-subtle, var(--color-bg-secondary));
    color: var(--panel-text, var(--color-text-primary));
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    outline: none;
}

#event-details-card-overlay .c-modal-edit-btn:hover,
#event-details-card-overlay .c-modal-edit-btn:focus-visible {
    background: var(--panel-surface-strong, var(--color-bg-tertiary));
    border-color: var(--panel-border, var(--color-border-light));
    box-shadow: 0 0 0 2px var(--panel-accent, var(--color-primary));
}

#event-details-card-overlay .c-modal-title-container {
    flex: 1;
    min-width: 0;
}

/* Event Details Card header: date (left) + name (right)
   Date is intentionally de-emphasized (not bold) vs title text. */
#event-details-card-overlay .edc-header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--panel-space-3, 12px);
    min-width: 0;
}

#event-details-card-overlay .edc-header-title-row--editing {
    align-items: flex-start;
}

#event-details-card-overlay .edc-header-date {
    flex: 0 0 auto;
    min-width: 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    line-height: 1.05;
    font-size: 0.9rem;
    color: var(--panel-text-muted, var(--color-text-muted));
    font-weight: var(--font-weight-normal, 400);
    letter-spacing: 0.01em;
    text-transform: none;
    user-select: none;
}

#event-details-card-overlay .edc-header-date[aria-hidden="true"] {
    visibility: hidden;
}

#event-details-card-overlay .edc-header-date--placeholder {
    width: 56px;
    justify-content: center;
    color: var(--color-text-tertiary);
    font-style: italic;
}

#event-details-card-overlay .edc-header-date--placeholder .edc-header-date-month {
    display: block;
    width: 100%;
    white-space: normal;
    line-height: 1.1;
}

#event-details-card-overlay .edc-header-date--placeholder .edc-header-date-year {
    display: none;
}

#event-details-card-overlay .edc-header-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    white-space: pre-line;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    max-height: 3.6em;
}

/* Event Details Card: when the title is only one line,
   don't force a 2-line min-height (so it can vertically center with the
   two-line date block, matching sidebar event rows). */
#event-details-card-overlay .edc-header-title.yrh-user-modal-title-fixed-2l {
    min-height: 0;
}

#event-details-card-overlay .c-modal-title:focus {
    outline: none;
}

.c-modal-title:focus {
    outline: none;
}

#event-details-card-overlay .c-modal-title-input {
    width: 100%;
    font-size: 1.15em;
    font-weight: var(--panel-font-title-weight, 600);
    color: var(--panel-text, var(--color-text-primary));
    background: var(--panel-surface-subtle, var(--color-bg-secondary));
    border: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    border-radius: var(--panel-button-radius, 8px);
    padding: var(--panel-space-2, 8px) var(--panel-space-3, 12px);
    margin: 0;
}

.yrh-title-edit-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.yrh-title-editor-surface {
    display: flex;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: var(--panel-space-2, 8px) var(--panel-space-3, 12px);
    min-height: calc(3.6em + (var(--panel-space-2, 8px) * 2));
    border: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    border-radius: 10px;
    background: var(--panel-surface-subtle, var(--color-bg-secondary));
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.yrh-title-editor-surface:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

.yrh-title-editor {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    overflow-x: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    margin: 0;
}

.yrh-title-editor::placeholder {
    color: var(--color-text-tertiary);
    opacity: 1;
}

.yrh-title-editor:disabled,
.yrh-title-editor[readonly] {
    opacity: 1;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

/* Wrapper div that takes flex sizing so the textarea inside gets a real
   pixel width for text wrapping (Safari textarea ignores flex widths). */
#event-details-card-overlay .edc-header-title-edit-wrap {
    overflow: hidden;
}

#event-details-card-overlay .edc-header-title-editor {
    line-height: 1.2;
    min-height: 3.6em;
    height: 3.6em;
    max-height: 3.6em;
    overflow-y: hidden;
}

#event-details-card-overlay #edcTitleContainer .yrh-title-editor-surface {
    font-size: 1.15em;
    font-weight: var(--panel-font-title-weight, 600);
    line-height: 1.2;
    color: var(--panel-text, var(--color-text-primary));
}

#attachmentsEditPanel .c-modal-title-container .artifact-title-editor-surface {
    font-size: 1.15em;
    font-weight: var(--panel-font-title-weight, 600);
    line-height: 1.2;
    color: var(--panel-text, var(--color-text-primary));
}

/* Desktop Event Details Card: tighter header but still 2 text rows */
#event-details-card-overlay .c-modal-header {
    min-height: 72px;
    max-height: none;
    padding: 14px var(--yrh-apple-list-padding-x, 20px) 10px;
    margin-bottom: 0;
}

#event-details-card-overlay .edc-header-title-row .c-modal-title {
    font-size: 1.15em;
}

#event-details-card-overlay .c-modal-title-input:focus {
    outline: none;
    border-color: var(--panel-accent, var(--color-primary));
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Scoped user-title modal header contract (Event / Attachment)
   Keep header height stable and prevent long user titles from pushing actions. */
#event-details-card-overlay .c-modal-header {
    min-height: 84px;
    max-height: none;
}

#attachmentsEditPanel .c-modal-header {
    min-height: 84px;
    max-height: 84px;
    margin-bottom: 0;
}

#event-details-card-overlay .c-modal-title-container,
#attachmentsEditPanel .c-modal-title-container {
    min-width: 0;
}

/* Attachment edit panel header: keep the close button in the header corner. */
#attachmentsEditPanel .c-modal-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    margin-left: 0;
    z-index: 6;
}

#attachmentsEditPanel .c-modal-title-container {
    flex: 1;
}

/* Left-edge close button for headers that also carry right-side controls */
.yrh-modal-close-left {
    position: static;
    top: auto;
    right: auto;
    margin: 0;
    z-index: auto;
}


#event-details-card-overlay .event-card.event-card--modal {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#event-details-card-overlay .event-card-body--modal {
    flex: 1;
}

/* Panel bodies */
.modal-body,
.account-modal-body,
.you-modal-body,
.em-bulk-modal-body,
.em-export-modal-body {
    padding: var(--panel-space-6, 24px);
    background: var(--panel-surface, var(--color-bg-primary));
    color: var(--panel-text, var(--color-text-primary));
}

/* Panel footers */
.modal-footer,
.c-modal-footer,
.attachments-manager-footer,
.timelines-manager-footer,
.event-manager-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--panel-space-3, 12px);
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    border-top: 1px solid var(--panel-border-subtle, var(--color-border-light));
    background: var(--panel-surface, var(--color-bg-primary));
    flex-shrink: 0;
}

.attachments-manager-footer,
.timelines-manager-footer,
.event-manager-footer {
    justify-content: space-between; /* Preserve existing layout intent */
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL BUTTON & INPUT NORMALIZATION (Scoped; excludes attachments/timelines)
   Visual-only; uses panel tokens; no markup or behavior changes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Buttons (explicit button classes only) */
.modal-content .btn,
.event-manager-content .btn {
    height: var(--panel-button-height, 36px);
    padding: var(--panel-button-padding-y, 8px) var(--panel-button-padding-x, 14px);
    border-radius: var(--panel-button-radius, 8px);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--panel-border-strong, var(--color-border-light));
    background: var(--panel-surface, var(--color-bg-primary));
    color: var(--panel-text, var(--color-text-primary));
    line-height: 1.2;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.modal-content .btn:hover,
.event-manager-content .btn:hover {
    background: var(--panel-surface-muted, var(--color-surface-4));
    border-color: var(--panel-border-strong, var(--color-border-medium));
}

.modal-content .btn:disabled,
.event-manager-content .btn:disabled {
    background: var(--color-disabled-bg);
    border-color: var(--color-border-lightest);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    box-shadow: none;
}

.modal-content .btn:focus-visible,
.event-manager-content .btn:focus-visible {
    outline: none;
    box-shadow: var(--panel-input-focus-ring, var(--shadow-focus));
    border-color: var(--panel-input-focus-border, var(--color-primary));
}

/* Primary buttons */
.modal-content .btn-primary,
.event-manager-content .btn-primary {
    background: var(--panel-accent, var(--color-primary));
    border-color: var(--panel-accent, var(--color-primary));
    color: var(--panel-accent-contrast, var(--color-text-inverse));
}

.modal-content .btn-primary:hover,
.event-manager-content .btn-primary:hover {
    background: var(--panel-accent-strong, var(--color-primary-dark));
    border-color: var(--panel-accent-strong, var(--color-primary-dark));
}

.modal-content .btn-primary:disabled,
.event-manager-content .btn-primary:disabled {
    background: var(--color-disabled-bg);
    border-color: var(--color-border-lightest);
    color: var(--color-text-tertiary);
}

/* Secondary (default) stays inherited; ghost/link keep minimal framing */
.modal-content .btn-ghost,
.event-manager-content .btn-ghost,
.modal-content .btn-link,
.event-manager-content .btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--panel-text-muted, var(--color-text-secondary));
    padding-left: 0;
    padding-right: 0;
    height: auto;
}

.modal-content .btn-ghost:hover,
.event-manager-content .btn-ghost:hover,
.modal-content .btn-link:hover,
.event-manager-content .btn-link:hover {
    background: var(--panel-surface-muted, var(--color-surface-4));
    color: var(--panel-text, var(--color-text-primary));
}

.modal-content .btn-ghost:focus-visible,
.event-manager-content .btn-ghost:focus-visible,
.modal-content .btn-link:focus-visible,
.event-manager-content .btn-link:focus-visible {
    box-shadow: var(--panel-input-focus-ring, var(--shadow-focus));
    border-color: transparent;
}

/* Destructive */
.modal-content .btn-danger,
.event-manager-content .btn-danger {
    background: var(--color-status-error);
    border-color: var(--color-status-error);
    color: var(--color-text-inverse);
}

.modal-content .btn-danger:hover,
.event-manager-content .btn-danger:hover {
    background: #cf2f26;
    border-color: #cf2f26;
}

.modal-content .btn-danger:focus-visible,
.event-manager-content .btn-danger:focus-visible {
    box-shadow: var(--shadow-focus-error);
}

/* Inputs (forms only; exclude attachments/timelines/toolbars) */
.modal-content form input[type="text"],
.modal-content form input[type="email"],
.modal-content form input[type="password"],
.modal-content form input[type="number"],
.modal-content form input[type="search"],
.modal-content form select,
.modal-content form textarea,
.event-manager-content form input[type="text"],
.event-manager-content form input[type="email"],
.event-manager-content form input[type="password"],
.event-manager-content form input[type="number"],
.event-manager-content form input[type="search"],
.event-manager-content form select,
.event-manager-content form textarea {
    padding: var(--panel-input-padding-y, 10px) var(--panel-input-padding-x, 12px);
    border: 1px solid var(--panel-input-border, var(--color-border-light));
    border-radius: var(--panel-input-radius, 8px);
    background: var(--panel-input-bg, var(--color-bg-primary));
    color: var(--panel-text, var(--color-text-primary));
    font-size: var(--panel-font-body-size, 1rem);
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    width: 100%;
    box-sizing: border-box;
}

.modal-content form input::placeholder,
.modal-content form textarea::placeholder,
.event-manager-content form input::placeholder,
.event-manager-content form textarea::placeholder {
    color: var(--panel-input-placeholder, var(--color-text-muted));
}

/* Native select normalization (Safari-first): keep native arrow and align control height */
.modal-content form select,
.event-manager-content form select {
    -webkit-appearance: menulist;
    appearance: menulist;
    font-family: var(--font-family-base);
    min-height: 44px;
}

.modal-content form input:focus,
.modal-content form select:focus,
.modal-content form textarea:focus,
.event-manager-content form input:focus,
.event-manager-content form select:focus,
.event-manager-content form textarea:focus {
    outline: none;
    border-color: var(--panel-input-focus-border, var(--color-primary));
    box-shadow: var(--panel-input-focus-ring, var(--shadow-focus));
}

.modal-content form input:disabled,
.modal-content form select:disabled,
.modal-content form textarea:disabled,
.event-manager-content form input:disabled,
.event-manager-content form select:disabled,
.event-manager-content form textarea:disabled {
    background: var(--color-disabled-bg);
    color: var(--color-text-tertiary);
    border-color: var(--color-border-lighter);
    cursor: not-allowed;
    box-shadow: none;
}

.modal-content form input.error,
.modal-content form select.error,
.modal-content form textarea.error,
.event-manager-content form input.error,
.event-manager-content form select.error,
.event-manager-content form textarea.error {
    border-color: var(--color-status-error);
    box-shadow: var(--shadow-focus-error);
}

/* Labels, helper, error text */
.modal-content form label,
.event-manager-content form label {
    display: block;
    margin-bottom: var(--panel-space-2, 8px);
    font-size: var(--font-size-sm);
    color: var(--panel-text-muted, var(--color-text-secondary));
    font-weight: var(--font-weight-semibold);
}

.modal-content form .form-helper,
.modal-content form .helper-text,
.event-manager-content form .form-helper,
.event-manager-content form .helper-text {
    margin-top: var(--panel-space-1, 4px);
    font-size: var(--font-size-sm);
    color: var(--panel-text-muted, var(--color-text-muted));
}

.modal-content form .form-error,
.modal-content form .error-text,
.event-manager-content form .form-error,
.event-manager-content form .error-text {
    margin-top: var(--panel-space-1, 4px);
    font-size: var(--font-size-sm);
    color: var(--color-status-error);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MODAL KERNEL: Persistent Overlay (Single Source of Truth for Backdrop)
 * This overlay is created ONCE by modalKernel and stays in DOM. It handles
 * the backdrop scrim so individual modals don't need to animate their own.
 * This prevents backdrop flicker during modal-to-modal swaps.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Body scroll lock when modal is open (applied by kernel on 0→1 transition) */
body.modal-open {
    overflow: hidden !important;
}

.modal-kernel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--panel-overlay-scrim, rgba(0, 0, 0, 0.65));
    z-index: calc(var(--z-modal-base, 1000) - 1);
    pointer-events: auto;
}

.modal-kernel-overlay--visible {
    display: block;
    animation: modalFadeIn 0.1s ease-out;
}

/* When kernel manages the overlay, make individual modal backdrops transparent
 * This prevents double-darkening and backdrop animation restarts */
.modal.modal-kernel-managed {
    background: transparent !important;
}

/* Lightbox must keep its opaque black background even when kernel-managed */
#pictureLightboxModal.modal.modal-kernel-managed {
    background: #000 !important;
}

/* When multiple modals are stacked, re-enable a *light* scrim on the topmost
 * modal so the modal beneath is visually greyed out (overlay is behind both). */
.modal.modal-kernel-managed.modal-kernel-stacked {
    background: var(--panel-overlay-scrim-stacked, rgba(0, 0, 0, 0.25)) !important;
}

/* Event Details Card relies on the kernel scrim like other kernel-managed modals.
 * Keeping its own scrim would double-darken the backdrop.
 * IMPORTANT: when stacked (opened above another modal like Event Library), allow the
 * stacked scrim to render so the underlying modal stays greyed out. */
#event-details-card-overlay.modal.modal-kernel-managed:not(.modal-kernel-stacked) {
    background: transparent !important;
}

/* Disable the fade-in animation for kernel-managed modals since overlay handles it */
.modal.modal-kernel-managed.show {
    animation: none !important;
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--panel-overlay-scrim, rgba(0, 0, 0, 0.65));
    z-index: var(--z-modal-base);
    cursor: pointer;
    overflow-y: auto; /* Allow scrolling when modal content is tall */
}

.modal.show {
    display: flex;
    align-items: center; /* Center vertically for better balance */
    justify-content: center;
    padding: 40px 0;
    padding: calc(40px + env(safe-area-inset-top, 0px)) 0 calc(40px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    animation: modalFadeIn 0.1s ease-out;
}

html.yrh-tier-desktop[data-layout-input="touch"] .modal.show {
    padding: calc(28px + env(safe-area-inset-top, 0px)) var(--yrh-shell-inline-gutter, 28px) calc(28px + env(safe-area-inset-bottom, 0px));
}

/* ========================================================================== */
/* SIGNED-OUT LANDING: auth is rendered as a view (not a modal overlay) */
/* ========================================================================== */

html:not(.yrh-has-auth-user):not(.yrh-explore-route) .modal-kernel-overlay--visible {
    opacity: 0;
    pointer-events: auto;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--panel-surface, var(--color-bg-primary));
    padding: var(--panel-space-8, 40px);
    border-radius: var(--panel-radius-lg, 20px);
    max-width: 550px;
    width: 90%;
    box-shadow: var(--panel-shadow, var(--shadow-xl));
    position: relative;
    cursor: default;
}

.yrh-modal-dialog {
    width: min(520px, calc(100vw - 32px));
    max-width: 520px;
}

#yrhConfirmModal.show {
    z-index: var(--z-modal-blocking) !important;
}

.yrh-modal-dialog__title {
    margin: 0;
}

.yrh-modal-dialog__message {
    margin: 12px 0 18px;
    color: var(--color-text-secondary);
}

.yrh-modal-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.yrh-modal-dialog__field {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--color-border-lightest);
    background: var(--color-surface-1);
    color: var(--color-text-primary);
    box-shadow: inset 0 1px 0 var(--color-overlay-light-50);
}

.yrh-modal-dialog__field:focus,
.yrh-modal-dialog__field:focus-visible {
    outline: none;
    border-color: var(--color-border-medium);
    box-shadow: 0 0 0 3px var(--color-overlay-dark-05);
}

.yrh-modal-dialog__field--multiline {
    min-height: 152px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.45;
    font: inherit;
}

#yrhPromptModal.yrh-prompt-modal--compose.show {
    align-items: center;
    justify-content: center;
    padding: min(4vw, 28px);
}

#yrhPromptModal.yrh-prompt-modal--compose .modal-content {
    width: min(720px, calc(100vw - 40px));
    max-width: 720px;
    min-height: min(66vh, 560px);
    max-height: min(84vh, calc(100dvh - 40px));
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 3vw, 30px);
    border-radius: 28px;
}

#yrhPromptModal.yrh-prompt-modal--compose .yrh-modal-dialog__title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.15;
}

#yrhPromptModal.yrh-prompt-modal--compose .yrh-modal-dialog__message {
    margin: 8px 0 12px;
}

#yrhPromptModal.yrh-prompt-modal--compose .yrh-prompt-textarea {
    flex: 1 1 auto;
    min-height: 240px;
    max-height: none;
    padding: 16px 18px;
    resize: none;
    border-radius: 20px;
    font-size: 16px;
    line-height: 1.55;
}

#yrhPromptModal.yrh-prompt-modal--compose .yrh-modal-dialog__actions {
    flex: 0 0 auto;
    margin-top: 14px;
}

html.yrh-shell-phone #yrhPromptModal.yrh-prompt-modal--compose.show {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}

html.yrh-shell-phone #yrhPromptModal.yrh-prompt-modal--compose .modal-content {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
}

html.yrh-shell-phone #yrhPromptModal.yrh-prompt-modal--compose .yrh-prompt-textarea {
    min-height: 0;
}

body.yrh-keyboard-active #yrhPromptModal.yrh-prompt-modal--compose.show {
    align-items: flex-start;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--yrh-keyboard-height, 0px) + max(16px, env(safe-area-inset-bottom, 0px)));
}

body.yrh-keyboard-active #yrhPromptModal.yrh-prompt-modal--compose .modal-content {
    max-height: calc(100dvh - var(--yrh-keyboard-height, 0px) - 32px);
}

html.yrh-shell-phone body.yrh-keyboard-active #yrhPromptModal.yrh-prompt-modal--compose .modal-content {
    max-height: none;
    padding-bottom: calc(var(--yrh-keyboard-height, 0px) + env(safe-area-inset-bottom, 0px) + 20px);
}

/* iPhone-style action sheet (centered confirm) */
.modal.yrh-action-sheet-modal.show {
    align-items: center;
    justify-content: center;
    z-index: 100010 !important;
}

.modal.yrh-action-sheet-modal .modal-content {
    width: min(360px, calc(100vw - 28px));
    max-width: 360px;
    padding: 18px;
    border-radius: 18px;
    background: var(--color-surface-paper-warm, var(--color-surface-1));
    box-shadow: var(--shadow-xl);
}

.modal.yrh-action-sheet-modal .yrh-action-sheet-actions {
    display: flex;
    flex-direction: column;
}

.modal.yrh-action-sheet-modal .yrh-action-sheet-title {
    margin: 0;
}

.modal.yrh-action-sheet-modal .yrh-action-sheet-message {
    margin: 10px 0 0;
    color: var(--color-text-secondary);
}

.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    text-align: center;
}

.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-kicker {
    margin: 0;
    font-size: 0.74rem;
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--color-text-muted);
}

.modal.yrh-action-sheet-modal .yrh-action-sheet-actions--primary {
    border: 1px solid var(--color-border-lightest);
    border-radius: 14px;
    background: var(--color-overlay-light-96);
    overflow: hidden;
}

.modal.yrh-action-sheet-modal .yrh-action-sheet-actions--dismiss {
    margin-top: 12px;
}

.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-action {
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.97rem;
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-action + .yrh-artifact-edit-sheet-action {
    border-top: 1px solid var(--color-border-lightest);
}

.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-action--neutral:hover,
.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-action--neutral:focus-visible {
    background: var(--color-surface-paper-warm);
}

.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-action--destructive {
    color: var(--color-status-error);
    background: var(--color-status-error-bg);
}

.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-action--destructive:hover,
.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-action--destructive:focus-visible {
    background: var(--color-status-error-bg);
}

.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-action--dismiss {
    min-height: 40px;
    padding: 10px 12px;
    color: var(--color-text-muted);
    text-align: center;
}

.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-action--dismiss:hover,
.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-action--dismiss:focus-visible {
    color: var(--color-text-primary);
    background: var(--color-surface-paper-warm);
    border-radius: 12px;
}

.modal.yrh-selection-menu-modal.show {
    align-items: center;
    justify-content: center;
    z-index: 100010 !important;
}

.modal.yrh-selection-menu-modal .modal-content {
    width: min(380px, calc(100vw - 32px));
    max-width: 380px;
    padding: 20px;
    border-radius: 20px;
    background: var(--panel-surface, var(--color-bg-primary));
    box-shadow: var(--shadow-xl);
}

.modal.yrh-selection-menu-modal[data-selection-appearance="creation"] .modal-content {
    background: var(--color-surface-paper-warm, var(--panel-surface, var(--color-bg-primary)));
}

.modal.yrh-selection-menu-modal[data-selection-appearance="upload"] .modal-content {
    background: #f4f7f8;
}

.yrh-selection-menu-shell {
    display: flex;
    flex-direction: column;
}

.yrh-selection-menu-header {
    margin-bottom: 14px;
    text-align: center;
}

.yrh-selection-menu-title {
    margin: 0;
}

.yrh-selection-menu-message {
    margin: 10px 0 0;
    color: var(--color-text-secondary);
}

.yrh-selection-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.yrh-selection-menu-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-lightest);
    border-radius: 16px;
    background: var(--color-bg-primary, #fff);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.98rem;
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.yrh-selection-menu-action:hover,
.yrh-selection-menu-action:focus-visible {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-medium);
    transform: translateY(-1px);
}

.yrh-selection-menu-action:focus-visible {
    outline: 2px solid var(--color-border-medium);
    outline-offset: 2px;
}

.yrh-selection-menu-action--destructive {
    color: var(--color-status-error);
    border-color: rgba(183, 28, 28, 0.18);
    background: var(--color-status-error-bg);
}

.yrh-selection-menu-action--destructive:hover,
.yrh-selection-menu-action--destructive:focus-visible {
    background: var(--color-status-error-bg);
    border-color: rgba(183, 28, 28, 0.3);
}

.yrh-selection-menu-action--disabled,
.yrh-selection-menu-action[disabled],
.yrh-selection-menu-action[aria-disabled="true"] {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
    background: var(--color-bg-primary, #fff);
    border-color: var(--color-border-lightest);
}

.yrh-selection-menu-action__title {
    display: block;
}

.yrh-selection-menu-action__description {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    font-weight: 400;
}

.yrh-selection-menu-footer {
    margin-top: 12px;
}

.yrh-selection-menu-cancel {
    width: 100%;
}

/* Inline destructive actions at bottom of About edit forms */
.yrh-about-destructive-actions {
    margin-top: var(--panel-space-7, 28px);
    padding-top: 0;
    padding-bottom: 64px;
    border-top: 0;
}

.yrh-about-destructive-actions--after-narration {
    margin-top: calc(var(--panel-space-7, 28px) + 12px);
}

.yrh-about-destructive-note {
    margin-top: 6px;
    padding-left: 12px;
    color: var(--color-text-muted);
    font-size: 0.78em;
    font-style: italic;
    line-height: 1.35;
}

/* Canonical Apple-style sizing for list/panel modals using the scroll contract */
.modal-content.c-modal-size-lg-scroll {
    width: min(var(--yrh-apple-modal-width, 620px), 95vw);
    max-width: var(--yrh-apple-modal-max-width, 680px);
}

/* Adjust modal width for Premium features Explore and Upgrade modal */
#upgradeModal .modal-content {
    width: 90%; /* Prevent centering flash by setting stable width */
    max-width: 900px;
    will-change: transform; /* Force GPU layer to stabilize position */
    transform: translateZ(0); /* Force GPU acceleration */
}

/* Ensure upgrade modal is visible even if fade-in animation is interrupted */
#upgradeModal.modal.show {
    opacity: 1;
    animation: none;
}

/* Disable all transitions on upgrade modal to prevent layout shift on open */
#upgradeModal * {
    transition: none !important;
}


/* Files header actions container */
#filesHeaderActions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Plan warning override */
#planWarning.plan-warning {
    font-size: 0.85em;
    color: #f39c12;
    font-weight: 500;
}

/* Upload file button override */
#uploadFileBtn.btn-small-primary {
    white-space: nowrap;
}

/* Photo file name display */
#photoFileName {
    margin-left: 10px;
    color: var(--color-text-secondary);
}

/* File format hint */
.file-format-hint {
    color: #999;
    display: block;
    margin-top: 5px;
}

/* Photo description textarea */
/* Photo upload progress container */
/* Photo upload progress text */

/* Prevent dismissal by clicking outside - only when visible */


/* Re-acceptance modal button states */
#reaccept-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#reaccept-submit:not(:disabled) {
    opacity: 1;
    cursor: pointer;
}
   Disable legacy fixed-height + nested scrolling rules that caused extra scrollbars/jitter. */
#event-details-card-overlay .event-card.event-card--modal {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 0;
    height: 100%;
}

#event-details-card-overlay .event-card.event-card--modal .event-card-body--modal {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#event-details-card-overlay .event-card.event-card--modal .event-card-footer {
    display: none;
}

/* Base Modal "X" Close Button */
/* Standard modal close buttons */
.modal-close-btn,
.event-card-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    font-size: 1.1em;
    color: var(--panel-text-muted, var(--color-text-tertiary));
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.modal-close-btn:hover,
.event-card-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--panel-text, var(--color-text-primary));
}

.event-card-close-btn {
    z-index: 1;
}

/* Base Modal Title */
.modal-content h2 {
    color: var(--panel-text, var(--color-text-primary));
    margin-bottom: var(--panel-space-5, 20px);
    font-size: var(--panel-font-title-size, 1.8em);
    font-weight: var(--panel-font-title-weight, 700);
}

/* Panel Shell header titles should not inherit the large base modal title sizing */
.c-modal-header .c-modal-title {
    margin: 0;
    font-size: var(--panel-font-title-size, 1.35em);
    font-weight: var(--panel-font-title-weight, 600);
    line-height: 1.2;
}

/* Base Modal Footer Button Container */
.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--panel-space-3, 12px);
    margin-top: var(--panel-space-5, 20px);
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    border-top: 1px solid var(--panel-border-subtle, var(--color-border-light));
    background: var(--panel-surface, var(--color-bg-primary));
}

.modal-buttons .btn {
    flex: 0 0 auto;
    min-width: 110px;
}

/* --- MODAL STACKING --- */
#authModal,
#timelinesManagerModal,
#accountModal,
#libraryModal,
#profileModal {
    z-index: var(--z-modal-base);
}

/* Focus sink for iOS/touch: used to keep initial focus off form controls
   (prevents keyboard auto-open / viewport jump on iPhone Safari). */
.yrh-modal-focus-sink {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.yrh-modal-focus-sink:focus {
    outline: none;
}

/* Timeline info/edit: use display toggle like event modal to avoid backdrop flicker */
#timelineInfoModal.modal,
#editTimelineModal.modal {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    padding: calc(40px + env(safe-area-inset-top, 0px)) 0 calc(40px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.65);
}

html.yrh-tier-desktop[data-layout-input="touch"] #timelineInfoModal.modal,
html.yrh-tier-desktop[data-layout-input="touch"] #editTimelineModal.modal {
    padding: calc(28px + env(safe-area-inset-top, 0px)) var(--yrh-shell-inline-gutter, 28px) calc(28px + env(safe-area-inset-bottom, 0px));
}

/* When kernel manages these modals, use transparent backdrop (persistent overlay handles scrim) */
#timelineInfoModal.modal.modal-kernel-managed,
#editTimelineModal.modal.modal-kernel-managed {
    background: transparent;
}

#timelineInfoModal.modal.show,
#editTimelineModal.modal.show {
    display: flex;
}

/* Animate the panel itself (cheaper than animating the full-screen overlay). */
#timelineInfoModal .modal-content,
#editTimelineModal .modal-content {
    transform: translateY(8px);
    opacity: 0;
    transition: transform 160ms ease-out, opacity 160ms ease-out;
    will-change: transform, opacity;
    contain: layout paint;
}

/* Timeline modals: match Event modal width (without affecting tab spacing) */
#timelineModal .modal-content.c-modal-size-lg-scroll,
#editTimelineModal .modal-content.c-modal-size-lg-scroll,
#timelineInfoModal .modal-content.c-modal-size-lg-scroll,
#timelineInfoModal.show .modal-content,
#editTimelineModal.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

/* Instant swap: disable content transitions during modal-to-modal swap */
#timelineInfoModal.modal-swap-instant .modal-content,
#editTimelineModal.modal-swap-instant .modal-content {
    transition: none !important;
    animation: none !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* During swap, also disable the global .modal.show fade animation on the overlay itself */
#timelineInfoModal.modal-swap-instant,
#editTimelineModal.modal-swap-instant {
    animation: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MODAL KERNEL: Atomic Swap Support
 * These classes are used by modalKernel.replaceTop() to ensure flicker-free
 * modal-to-modal transitions.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Disable all transitions during atomic swap to prevent opacity/transform flash */
.modal.no-transition,
.modal.no-transition *,
.modal.no-transition .modal-content,
#timelineInfoModal.no-transition .modal-content,
#editTimelineModal.no-transition .modal-content {
    transition: none !important;
    animation: none !important;
}

/* Ensure modals with no-transition still render correctly */
.modal.no-transition.show .modal-content,
#timelineInfoModal.no-transition.show .modal-content,
#editTimelineModal.no-transition.show .modal-content {
    transform: translateY(0) !important;
    opacity: 1 !important;
}


/* Prevent double-backdrop darkening: outgoing modal keeps content visible but backdrop is transparent */
#timelineInfoModal.modal-swap-out,
#editTimelineModal.modal-swap-out {
    background: transparent !important;
}

/* Alternative swap mode: incoming modal has transparent scrim while old scrim is still visible.
   IMPORTANT: If the modal is stacked (modal-kernel-stacked), keep the stacked scrim to avoid a
   visible “undim” flicker during replaceTop (Timeline Info → Edit Timeline, etc.). */
.modal.modal-swap-incoming:not(.modal-kernel-stacked),
#timelineInfoModal.modal-swap-incoming:not(.modal-kernel-stacked),
#editTimelineModal.modal-swap-incoming:not(.modal-kernel-stacked),
#libraryModal.modal-swap-incoming:not(.modal-kernel-stacked),
#eventManagerModal.modal-swap-incoming:not(.modal-kernel-stacked),
#userDocumentsModal.modal-swap-incoming:not(.modal-kernel-stacked),
#timelineLibraryModal.modal-swap-incoming:not(.modal-kernel-stacked) {
    background: transparent !important;
}

/* When used as kernel modal, keep center alignment and backdrop */
#emExportModal.modal {
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
}

#emExportModal.modal.show {
    display: flex;
}

/* Ensure export modal content is clickable (not eaten by backdrop cursor:pointer) */
#emExportModal .em-bulk-modal-content {
    cursor: default;
    pointer-events: auto;
}

/* Override c-modal-size-lg-scroll height for sidebar presentation */
/* Activity modal uses the legacy Home layout which already includes its own spacing. */
#activityModal .c-modal-scroll-body {
	padding: 0;
}

/* Bulk upload modal appears on top of edit timeline modal */
#bulkUploadEventsModal {
    z-index: var(--z-modal-dropdown);
}

/* --- MODAL SCROLLING --- */
#authModal .modal-content,
#youModal .modal-content,
#editTimelineModal .modal-content,
#filterModal .modal-content {
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* Ensure scrollbar doesn't clip border-radius */
    scrollbar-gutter: stable;
}


/* Report modals - match panel shell sizing (like account) */
#report-user-modal .modal-content {
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

#report-user-modal .c-modal-header {
    flex-shrink: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
}

#report-user-modal .c-modal-body {
    /*
     * IMPORTANT: Report modals are content-sized (no fixed height).
     * If we use flex: 1 1 0 + min-height: 0, the body can collapse when the container
     * only has max-height (no explicit height), making the modal look “squashed”.
     * Use content-based flex-basis so the modal grows to fit fields (up to max-height).
     */
    flex: 0 1 auto;
    overflow-y: auto;
    padding: var(--panel-space-3, 12px) var(--panel-space-6, 24px);
    scrollbar-gutter: stable;
}

#report-user-modal .c-modal-footer {
    flex-shrink: 0;
}

#report-user-modal textarea {
    resize: none;
    overflow-y: auto;
}

/* Profile modal - Panel Shell layout */
#profileModal .modal-content {
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

#profileModal .c-modal-header {
    flex-shrink: 0;
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    margin-bottom: 0;
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
}

#profileModal #profileModalTitleContainer {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#profileModal .c-modal-body {
    /*
     * IMPORTANT: This modal uses a flex column shell.
     * If the body uses `flex: 1 1 0` with `min-height: 0`, it can collapse to ~0 height
     * when the container height is auto (content-sized), making the modal look “too short”.
     * Use a content-based flex-basis so the modal grows to fit profile info (up to max-height).
     */
    flex: 0 1 auto;
    overflow-y: auto;
    padding: var(--panel-space-6, 24px);
}


/* Reduced padding for Account and You modals */
#accountModal .modal-content,
#youModal .modal-content {
    padding: var(--spacing-20);
}

/* --- AUTH MODAL - Panel Shell Layout --- */
#authModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    padding: 0;
    overflow: hidden; /* Clip header/footer/body to rounded corners (prevents squared bottom corners) */
}

#authModal .c-modal-header {
    flex-shrink: 0;
    padding: var(--panel-space-5, 20px) var(--panel-space-6, 24px);
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
}

#authModal .c-auth-header {
    gap: var(--panel-space-4, 16px);
}

#authModal .c-auth-brand {
    display: none;
    align-items: center;
    gap: 14px;
}

#authModal .c-auth-brand-logo {
    display: block;
    width: auto;
    height: 42px;
    flex-shrink: 0;
}

#authModal .c-auth-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#authModal .c-auth-brand-name {
    color: var(--panel-text, var(--color-text-primary));
    font-size: 0.98rem;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--letter-spacing-ui);
}

#authModal .c-auth-brand-tagline {
    margin: 0;
    color: var(--panel-text-muted, var(--color-text-secondary));
    font-size: 0.95rem;
    line-height: 1.35;
}

#authModal .c-auth-title-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#authModal .c-auth-subtitle {
    margin: 0;
    color: var(--panel-text-muted, var(--color-text-secondary));
    font-size: 0.95rem;
    line-height: 1.45;
}

#authModal .c-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--panel-space-6, 24px);
}

#authModal .c-modal-footer {
    flex-shrink: 0;
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    border-top: 1px solid var(--panel-border-subtle, var(--color-border-light));
    background: var(--panel-surface, var(--color-bg-primary));
}

#authModal .c-modal-footer-shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

#authModal .c-modal-footer-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

#authModal .c-modal-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#authModal .c-modal-footer-actions > div {
    display: flex;
}

#authModal .c-modal-footer-meta a {
    color: var(--panel-text-muted, var(--color-text-muted));
    font-size: 0.9em;
}

#authModal .c-modal-footer-meta a:hover {
    color: var(--panel-accent, var(--color-primary));
    text-decoration: underline;
}

#authModal #signup-confirm-password-field {
    margin-bottom: var(--spacing-xl, 24px);
}

#authModal #forgot-password-section {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

#authModal #forgot-password-section a:hover {
    text-decoration: underline;
}

#authModal .c-auth-dedicated-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#authModal .c-auth-dedicated-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--panel-border-subtle, var(--color-border-light));
    border-radius: 24px;
    background: var(--panel-surface, var(--color-bg-primary));
}

#authModal .c-auth-dedicated-field {
    margin-bottom: 0;
}

#authModal .c-auth-dedicated-eyebrow {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#authModal .c-auth-dedicated-title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

#authModal #forgot-password-form-panel .c-auth-dedicated-title {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    margin-bottom: 4px;
}

#authModal .c-auth-dedicated-copy,
#authModal .c-auth-dedicated-note {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.98rem;
    line-height: 1.55;
}

#authModal .c-auth-dedicated-note {
    color: var(--color-text-muted);
}

#authModal .c-auth-dedicated-status {
    min-height: 1.4em;
    margin: 0;
    color: var(--color-status-error);
    font-size: 0.92rem;
    line-height: 1.45;
}

#authModal .c-auth-dedicated-status:empty {
    display: none;
}

#authModal .c-auth-dedicated-status[data-state="pending"] {
    color: var(--color-text-secondary);
}

#authModal .c-auth-dedicated-success {
    gap: 12px;
}

/* --- DELETE ACCOUNT MODAL - Panel Shell Layout --- */
#deleteAccountModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: none;
    padding: 0;
    overflow: hidden; /* Keep rounded corners consistent with other modals */
}

#deleteAccountModal .c-modal-header {
    flex-shrink: 0;
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
}

#deleteAccountModal .c-modal-body {
    flex: 0 0 auto;
    overflow: visible;
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
}

#deleteAccountModal .c-modal-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--panel-space-3, 12px);
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    border-top: 1px solid var(--panel-border-subtle, var(--color-border-light));
    background: var(--panel-surface, var(--color-bg-primary));
}

/* --- CHANGE PASSWORD MODAL - Panel Shell Layout --- */
#changePasswordModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    padding: 0;
    overflow: hidden; /* Clip footer/header backgrounds to rounded corners */
}

#changePasswordModal .c-modal-header {
    flex-shrink: 0;
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
}

#changePasswordModal .c-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--panel-space-6, 24px);
}

#changePasswordModal .c-modal-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    border-top: 1px solid var(--panel-border-subtle, var(--color-border-light));
    background: var(--panel-surface, var(--color-bg-primary));
}

#changePasswordModal .c-modal-footer-meta a {
    color: var(--panel-text-muted, var(--color-text-muted));
    font-size: 0.9em;
}

#changePasswordModal .c-modal-footer-meta a:hover {
    color: var(--panel-accent, var(--color-primary));
    text-decoration: underline;
}

/* Modal error text styling */
.c-modal-error-text {
    min-height: 0;
    margin: var(--panel-space-2, 8px) 0;
    color: var(--color-error, #e53e3e);
    font-size: 0.9em;
}

/* --- ACCOUNT MODAL TABS --- */
.account-tabs {
    display: flex;
    gap: var(--panel-space-3, 12px);
    margin: 0;
    padding: 0 var(--panel-space-6, 24px);
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
}

.account-tab-btn {
    background: transparent;
    border: none;
    padding: var(--panel-space-3, 12px) var(--panel-space-4, 16px);
    font-size: var(--panel-font-body-size, 1rem);
    font-weight: var(--font-weight-semibold);
    color: var(--panel-text-muted, var(--color-text-muted));
    cursor: pointer;
    border-bottom: 3px solid transparent;
    border-radius: var(--panel-radius-sm, 6px) var(--panel-radius-sm, 6px) 0 0;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.account-tab-btn:hover {
    color: var(--panel-text, var(--color-text-primary));
    background: var(--panel-surface-muted, var(--color-surface-4));
}

.account-tab-btn.active {
    color: var(--panel-text, var(--color-text-primary));
    border-bottom-color: var(--panel-accent, var(--color-primary));
}

/* --- ACCOUNT MENU DIVIDERS --- */
.account-menu-divider {
    border-top: 1px solid var(--color-border-light);
    margin: 8px 0;
}

/* --- ACCOUNT MODAL - BIRTHDATE --- */
#accountModal .account-birthdate-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Month/day dropdowns: match Event Details Card select styling */
#accountModal select.account-birthdate-select {
    -webkit-appearance: none;
    appearance: none;
    padding: 8px 12px;
    min-height: 36px;
    line-height: 1.2;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-secondary);
    background-image: none;
    color: var(--color-text-primary);
    font-size: 0.95em;
    box-shadow: none;
    -webkit-box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

/* Year input: match Event Details Card year input styling */
#accountModal input.account-birthdate-select.account-birthdate-year {
    width: auto;
    padding: 8px 12px;
    min-height: 36px;
    line-height: 1.2;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.95em;
    box-shadow: none;
    -webkit-box-shadow: none;
    transition: border-color 0.2s;
}

#accountModal input.account-birthdate-select.account-birthdate-year:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: none;
}

#accountModal select.account-birthdate-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

#accountModal .account-birthdate-select.account-birthdate-month {
    flex: 0.8;
}

#accountModal .account-birthdate-select.account-birthdate-day {
    flex: 0.6;
}

#accountModal .account-birthdate-select.account-birthdate-year {
    flex: 0.8;
}

/* --- ACCOUNT SECTIONS --- */


/* --- LIBRARY SECTION --- */
.library-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.library-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.library-action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-12);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.95em;
    text-align: left;
    justify-content: flex-start;
}

.library-action-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary-sm);
    color: var(--color-text-primary);
    transform: none;
}

/* ======================================================================
   LIBRARY MODAL - Launcher for Timelines, Events, Attachments managers
   ====================================================================== */

#libraryModal .modal-content {
    width: min(440px, calc(100vw - 40px));
    max-width: 440px;
    min-height: 280px;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Ensure header matches standard panel shell spacing (override legacy margin-bottom) */
#libraryModal .c-modal-header {
    margin-bottom: 0;
}

#libraryModal .c-modal-header-actions {
    gap: var(--panel-space-3, 12px);
}

#libraryModal .c-modal-body {
    padding: var(--panel-space-6, 24px);
}

/* Hide iPhone tab bar on desktop — only visible inside @media ≤460px */
.library-tabs {
    display: none;
}

.library-launcher-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.library-launcher-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 12px);
    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-primary);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s ease);
    text-align: left;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .library-launcher-item:hover {
        background: var(--color-bg-secondary);
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.12);
    }
}

.library-launcher-item:focus:not(:focus-visible) {
    outline: none;
}

.library-launcher-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.library-launcher-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.library-launcher-item:hover .library-launcher-icon {
    background: rgba(102, 126, 234, 0.12);
    color: var(--color-primary);
}

.library-launcher-icon svg {
    width: 24px;
    height: 24px;
}

.library-launcher-label {
    font-weight: 500;
    color: var(--color-text-primary);
}

#accountLibraryLauncherList.library-launcher-list,
.library-launcher-list--text-only {
    gap: 12px;
}

#accountLibraryLauncherList .library-launcher-item,
.library-launcher-list--text-only .library-launcher-item {
    gap: 0;
}

#accountLibraryLauncherList .library-launcher-label,
.library-launcher-list--text-only .library-launcher-label {
    flex: 1;
    min-width: 0;
}

#accountLibraryLauncherList .library-launcher-chevron,
.library-launcher-list--text-only .library-launcher-chevron {
    flex: 0 0 auto;
    color: var(--color-text-primary);
    opacity: 0.34;
    font-size: 1rem;
    margin-left: 12px;
}

.library-launcher-item:hover .library-launcher-label {
    color: var(--color-primary);
}

/* Contact support link: styled as a tappable email hyperlink */
.account-trust-contact-link {
    display: inline-block;
    padding: 8px 0;
    margin-top: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-primary, #667eea);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
    border: none;
}
.account-trust-contact-link:hover {
    color: var(--color-primary-hover, #5a6fd6);
    text-decoration: underline;
}

/* --- MEMBERSHIP SECTION --- */
.membership-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* --- ACCOUNT → PROFILE CARDS (Email / Membership / Danger Zone) --- */
.account-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.account-card {
    padding: 18px;
    background: var(--color-bg-secondary);
    border-radius: 10px;
}

.account-card h3 {
    font-size: 0.9em;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: var(--letter-spacing-ui);
    margin: 0 0 8px 0;
}

.account-email-value {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: 500;
    word-break: break-word;
}

.account-email-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.account-email-row .account-email-value {
    flex: 1 1 auto;
    min-width: 0;
}

.account-email-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.78em;
    line-height: 1.2;
    white-space: nowrap;
}

.account-email-status--verified {
    color: var(--color-text-muted);
    font-weight: 500;
}

.account-email-status-check {
    color: var(--color-success, #22c55e);
    font-size: 0.95em;
}

.account-email-status--action {
    color: var(--color-primary);
    font-weight: 500;
    opacity: 0.82;
}

.account-email-status--action:hover {
    text-decoration: none;
    opacity: 1;
}

.account-email-status--action:disabled {
    opacity: 0.55;
    cursor: default;
}

.account-info-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.account-info-label {
    color: var(--color-text-muted);
    font-size: 0.9em;
}

.account-info-value {
    color: var(--color-text-primary);
    font-weight: 600;
    text-align: right;
}

.account-card-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 10px;
}

.account-card-actions--auth {
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.account-link-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.85em;
    line-height: 1.2;
}

.account-link-btn--danger {
    color: var(--color-danger);
}

.account-link-btn--subtle {
    color: var(--color-text-muted);
}

.account-link-btn:hover {
    text-decoration: underline;
}

.account-link-btn:focus-visible {
    outline: none;
    box-shadow: var(--panel-input-focus-ring, var(--shadow-focus));
    border-radius: var(--radius-sm, 6px);
}

.account-card--danger .btn {
    margin-top: 6px;
}

.legacy-export-modal-content {
    max-width: 520px;
}

.legacy-export-modal-body {
    padding: 20px 24px;
}

.legacy-export-progress-panel {
    margin-top: 20px;
    padding: 16px;
    border-radius: 10px;
    background: var(--color-bg-secondary);
}

.legacy-export-progress-panel h3 {
    margin: 0 0 6px;
    font-size: 1em;
}

.legacy-export-progress-panel progress {
    display: block;
    width: 100%;
    height: 10px;
    margin-top: 14px;
    accent-color: var(--color-primary);
}

.legacy-export-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 24px 22px;
}

.membership-plan-info,
.membership-storage-info {
    padding: 20px;
    background: var(--color-bg-secondary);
    border-radius: 10px;
}

.membership-plan-info h3,
.membership-storage-info h3 {
    font-size: 0.9em;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: var(--letter-spacing-ui);
    margin: 0 0 10px 0;
}

.plan-name {
    font-size: 1.6em;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 8px 0;
}

.plan-description {
    font-size: 0.9em;
    color: var(--color-text-muted);
    margin: 0;
    font-style: italic;
}

.membership-features {
    padding: 20px;
    background: var(--color-bg-secondary);
    border-radius: 10px;
}

.membership-features h3 {
    font-size: 0.9em;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: var(--letter-spacing-ui);
    margin: 0 0 15px 0;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    color: var(--color-text-secondary);
}

.feature-checkmark {
    color: var(--color-success);
    font-weight: bold;
    font-size: 1.1em;
}

.storage-text {
    font-size: 0.95em;
    color: var(--color-text-secondary);
    margin: 0 0 12px 0;
}

.storage-bar-container {
    width: 100%;
    height: 8px;
    background: var(--color-bg-tertiary);
    border-radius: 10px;
    overflow: hidden;
}

.storage-bar-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 10px;
}

.membership-upgrade-hint {
    margin: 10px 0 0;
    color: var(--color-text-muted);
    font-size: 0.88em;
    line-height: 1.45;
}

.membership-promo {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.membership-promo-label {
    color: var(--color-text-muted);
    font-size: 0.82em;
    letter-spacing: var(--letter-spacing-ui);
}

.membership-promo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin: 0;
}

.membership-promo-input {
    flex: 1 1 0;
    min-width: 0;
    text-transform: uppercase;
}

.membership-promo-row .btn-small {
    min-height: 36px;
}

.membership-promo-message {
    margin: 0;
    min-height: 1.25em;
    font-size: 0.88em;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.membership-promo-message.is-error {
    color: var(--color-danger);
}

.membership-promo-message.is-success {
    color: var(--color-success);
}

.membership-promo--subpage {
    margin-top: 16px;
    padding-top: 0;
    border-top: none;
}

.membership-promo-form-stacked {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.membership-promo-actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.account-membership-promo-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.membership-promo.is-success .membership-promo-row,
.membership-promo.is-success .membership-promo-form-stacked,
.membership-promo.is-success .membership-promo-label {
    display: none;
}

@media (max-width: 640px) {
    .membership-promo-row {
        align-items: center;
    }
}

.membership-footer {
    padding-top: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT MODAL - STICKY LAYOUT
   ═══════════════════════════════════════════════════════════════════════════
   Flex column layout: fixed header (title + tabs), scrollable body, sticky footer
   ═══════════════════════════════════════════════════════════════════════════ */

#accountModal .modal-content {
    display: flex;
    flex-direction: column;
    height: min(640px, calc(100vh - (80px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
    padding: 0;
    overflow: hidden;
    scrollbar-gutter: auto;
}


#accountModal .c-modal-header {
    flex-shrink: 0;
    margin-bottom: 0;
}

@media (min-width: 641px) {
    #accountModal {
        --account-modal-inline-pad: var(--panel-space-6, 24px);
    }

    #accountModal .c-modal-header,
    #accountModal .account-tabs,
    #accountModal .account-modal-body,
    #accountModal .account-modal-footer {
        padding-left: var(--account-modal-inline-pad);
        padding-right: var(--account-modal-inline-pad);
        box-sizing: border-box;
    }
}

#accountModal .c-modal-body--account {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

#accountModal .account-tabs {
    flex-shrink: 0;
}

.account-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--panel-space-3, 12px) 0 var(--panel-space-6, 24px);
    min-height: 0;
}

@media (min-width: 641px) {
    #accountModal.yrh-account-tab-profile .account-modal-body {
        padding-top: var(--panel-space-2, 8px);
    }

}

/* Account tab sections — only show the active one */
.account-section {
    display: none;
}
.account-section.active {
    display: block;
}

.account-modal-footer {
    flex-shrink: 0;
    padding: var(--panel-space-3, 12px) 0;
    border-top: 1px solid var(--panel-border-subtle, var(--color-border-light));
    background: var(--panel-surface, var(--color-bg-primary));
    display: none;
    justify-content: flex-end;
    gap: var(--panel-space-3, 12px);
}

@media (min-width: 641px) {
    #accountModal .account-modal-footer {
        display: flex;
    }
}

.account-modal-footer .btn {
    min-width: 110px;
}

/* Hide the footer buttons based on active tab */
.account-footer-profile,
.account-footer-membership {
    display: none;
    gap: 12px;
}

.account-footer-profile.active,
.account-footer-membership.active {
    display: flex;
}

/* ═══════════════════════════════════════════════════════════════════════════
   YOU MODAL - STICKY LAYOUT (mirrors Account Modal)
   ═══════════════════════════════════════════════════════════════════════════
   Flex column layout: fixed header (title + tabs), scrollable body
   ═══════════════════════════════════════════════════════════════════════════ */

#youModal .modal-content {
    display: flex;
    flex-direction: column;
    width: min(620px, 95vw);
    max-width: 660px;
    height: 85vh;
    max-height: 85vh;
    padding: 0;
    overflow: hidden;
}

#youModal .c-modal-header {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* You header contextual actions (About: Edit/Save/Cancel) */
#youModal .you-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 4px;
}

#youModal .you-header-action-btn {
    background: transparent;
    border: none;
    padding: 8px 4px;
    margin: 0;
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium, 500);
    color: var(--panel-text-muted, var(--color-text-muted));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#youModal .you-header-action-btn:hover {
    color: var(--panel-text, var(--color-text-primary));
    text-decoration: none;
}

#youModal .you-header-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: none;
}

#youModal .you-header-action-btn--save {
    color: var(--panel-text, var(--color-text-primary));
    font-weight: var(--font-weight-semibold, 600);
}

#youModal .c-modal-body--you {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* You tabs — always visible (desktop + iPhone) */
.you-tabs {
    display: flex;
    gap: var(--panel-space-3, 12px);
    margin: 0;
    padding: 0 var(--panel-space-6, 24px);
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
    flex-shrink: 0;
}

.you-tab-btn {
    background: transparent;
    border: none;
    padding: var(--panel-space-3, 12px) var(--panel-space-4, 16px);
    font-size: var(--panel-font-body-size, 1rem);
    font-weight: var(--font-weight-semibold);
    color: var(--panel-text-muted, var(--color-text-muted));
    cursor: pointer;
    border-bottom: 3px solid transparent;
    border-radius: var(--panel-radius-sm, 6px) var(--panel-radius-sm, 6px) 0 0;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.you-tab-btn:hover {
    color: var(--panel-text, var(--color-text-primary));
    background: var(--panel-surface-muted, var(--color-surface-4));
}

.you-tab-btn.active {
    color: var(--panel-text, var(--color-text-primary));
    border-bottom-color: var(--panel-accent, var(--color-primary));
}

.you-tab-btn:disabled,
.you-tab-btn.is-disabled {
    opacity: 0.35;
    filter: grayscale(1);
    cursor: not-allowed;
}

/* --- You About Tab Content --- */
.you-about-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 24px;
}

/* Keep the avatar anchored between view and edit; tighten only the form internals. */
.you-about-tab.you-about-tab--editing {
    padding: 32px 24px;
    gap: 16px;
}

.you-about-tab.you-about-tab--editing .you-about-edit-form {
    gap: 8px;
}

.you-about-photo-wrap {
    position: relative;
    flex-shrink: 0;
}

.you-about-remove-photo {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--panel-text-muted, var(--color-text-muted));
    font-size: 0.85rem;
    font-weight: var(--font-weight-normal, 400);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
    transform: translateY(-50%);
}

.you-about-remove-photo:hover {
    color: var(--panel-text, var(--color-text-primary));
}

.you-about-photo-wrap label {
    cursor: pointer;
    display: block;
}

.you-about-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--color-border-lighter);
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.you-about-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: cover;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.you-about-photo:hover {
    opacity: 0.8;
    box-shadow: 0 0 0 3px var(--color-primary);
}

.you-about-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.95rem;
    color: var(--panel-text, var(--color-text-primary));
    text-align: center;
}

.you-about-edit-form {
    width: min(380px, 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.you-about-edit-name-row {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

/* Edit mode spacing: give birthdate row breathing room below the name row */
.you-about-edit-field--birthdate {
    margin-top: 8px;
}

.you-about-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 120px;
}

.you-about-edit-label {
    font-size: 0.85rem;
    color: var(--panel-text-muted, var(--color-text-muted));
    font-weight: var(--font-weight-semibold, 600);
}

.you-about-edit-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--panel-radius-sm, 6px);
    border: 1px solid var(--panel-border-subtle, var(--color-border-light));
    background: var(--panel-surface, var(--color-bg-primary));
    color: var(--panel-text, var(--color-text-primary));
    font-size: 0.95rem;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
}

/* Prevent Safari/macOS contact autofill UI from making text inputs look like dropdowns */
.you-about-edit-input::-webkit-contacts-auto-fill-button,
.you-about-edit-input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
}

.you-about-edit-input:focus {
    outline: 2px solid var(--panel-accent, var(--color-primary));
    outline-offset: 2px;
}

/* Birthdate controls in You About should stay on one row like Event date entry. */
#youModal .you-about-birthdate-container.edc-date-inputs {
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
}

/* In You About, make month/day/year controls match in height */
#youModal .you-about-birthdate-container .edc-select,
#youModal .you-about-birthdate-container .edc-input {
    box-sizing: border-box;
    width: auto;
    flex: 0 0 auto;
    padding: 10px 12px;
    height: 40px;
    min-height: 40px;
    line-height: 1.2;
    font-size: 0.95rem;
}

#youModal .you-about-birthdate-container .edc-date-month {
    min-width: 110px;
}

#youModal .you-about-birthdate-container .edc-date-year {
    width: 84px;
    min-width: 84px;
}

/* Prevent Safari/macOS autofill UI from making the year input look like a dropdown */
#youModal .you-about-birthdate-container .edc-input::-webkit-contacts-auto-fill-button,
#youModal .you-about-birthdate-container .edc-input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
}

.you-about-name {
    font-weight: var(--font-weight-semibold, 600);
}

.you-about-dob {
    color: var(--panel-text-muted, var(--color-text-muted));
    font-weight: var(--font-weight-normal, 400);
}

#youModal .you-tabs {
    flex-shrink: 0;
}

.you-modal-body {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--panel-space-6, 24px);
    min-height: 0;
    scrollbar-gutter: stable;
}

.membership-comparison {
    padding: 20px;
    background: var(--color-bg-secondary);
    border-radius: 10px;
}

.membership-comparison h3 {
    font-size: 0.9em;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: var(--letter-spacing-ui);
    margin: 0 0 20px 0;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.comparison-column {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
}

.comparison-column:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary-sm);
}

.comparison-header {
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-bg-secondary);
    margin-bottom: 12px;
}

.comparison-header h4 {
    font-size: 1em;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comparison-list li {
    font-size: 0.85em;
    color: var(--color-text-secondary);
    padding-left: 18px;
    position: relative;
}

.comparison-list li:before {
    content: '✓';
    color: var(--color-success);
    font-weight: bold;
    position: absolute;
    left: 0;
}

@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
}

/* --- UPGRADE MODAL STYLING --- */
.upgrade-modal-content {
    width: min(1100px, 92vw);
    height: auto;
    max-height: min(640px, 85vh);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#upgradeModal .c-modal-header {
    margin-bottom: 0;
}

#upgradeModal .c-modal-header .c-modal-title {
    text-align: center;
    font-size: 1.5em;
}

#upgradeModal .upgrade-modal-scroll-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 30px;
}

.upgrade-modal-subtitle {
    color: var(--color-text-muted);
    font-size: 0.85em;
    margin: 0;
}

/* Promo code area inside scroll body */
.upgrade-modal-promo-area {
    padding: 8px 0 0;
    text-align: center;
}

.upgrade-modal-promo-area .c-promo-section {
    max-width: 400px;
    margin: 0 auto;
    background: transparent;
    border: none;
    padding: 0;
}

.upgrade-modal-promo-area .c-promo-section .u-flex {
    justify-content: center;
}

#upgradeModal #promoCodeMessage {
    min-height: 0;
    margin-top: 6px;
    text-align: center;
}

.upgrade-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 0;
}

/* Align tiers side by side */
.upgrade-plans-grid.side-by-side {
    display: grid;
    align-items: stretch;
}

.upgrade-plan-card {
    min-width: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 20px;
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    position: relative; /* For absolute positioning of current-plan-badge */
    display: flex;
    flex-direction: column;
}

/* Disabled tier (visible but not purchasable) */
.upgrade-plan-card.is-disabled {
    opacity: 0.55;
}

.upgrade-plan-card.is-disabled:hover {
    border-color: var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transform: none;
}

.upgrade-plan-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* Current Plan Badge */
.current-plan-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-primary, #667eea);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.025em;
    z-index: 10;
}

/* Plan Cancel Notice */
.plan-cancel-notice {
    color: var(--color-warning);
    font-size: 0.85em;
    font-weight: 600;
    margin: 5px 0 0 0;
    padding: 6px 10px;
    background: var(--color-alert-warning-bg);
    border-radius: 4px;
    border-left: 3px solid var(--color-warning);
}

.upgrade-plan-card.featured {
    border-color: var(--color-primary);
    background: var(--color-brand-primary-05);
    box-shadow: var(--shadow-sm);
}

.plan-card-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    padding: 4px 10px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 999px;
    background: rgba(102, 126, 234, 0.08);
    color: var(--color-primary);
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}


.plan-card-header {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border-lightest);
}

.plan-card-header h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: var(--color-text-primary);
    margin: 0 0 3px 0;
}

.plan-card-description {
    color: var(--color-text-muted);
    font-size: 0.92em;
    margin: 0;
    font-style: normal;
    line-height: 1.45;
}

.plan-card-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.92em;
    line-height: 1.45;
    flex: 1;
}

.plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--color-text-secondary);
    font-size: 0.92em;
}

.plan-feature > span:last-child {
    display: block;
    flex: 1;
    min-width: 0;
}

.plan-feature-icon {
    font-size: 1.2em;
    min-width: 24px;
}

.plan-feature-check {
    font-size: 1em;
    color: var(--color-status-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    margin-top: 1px;
}

.plan-feature-x {
    font-size: 1em;
    color: var(--color-status-error);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
}

/* Sticky footer for upgrade modal */
.upgrade-modal-sticky-footer {
    padding: 16px 30px;
    border-top: 1px solid var(--color-border-light);
}

.upgrade-modal-note {
    color: var(--color-text-muted);
    font-size: 0.8em;
    margin-bottom: 10px;
}

/* Plan card pricing buttons */
.plan-card-pricing {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-lightest);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.billing-option-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.billing-option-card {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 243, 239, 0.92) 100%);
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.billing-option-card:hover {
    border-color: var(--color-primary);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(243, 239, 234, 0.98) 100%);
    box-shadow: 0 8px 20px rgba(28, 30, 34, 0.06);
}

.billing-option-card:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--panel-input-focus-ring, var(--shadow-focus));
}

.billing-option-card.is-active,
.billing-option-card.is-current {
    border-color: var(--color-primary);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(234, 241, 250, 0.9) 100%);
    box-shadow: 0 10px 24px rgba(28, 30, 34, 0.08);
}

.billing-option-card.is-disabled {
    box-shadow: none;
    transform: none;
}

.billing-option-card:disabled {
    opacity: 1;
}

.billing-option-card-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.billing-option-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.billing-option-card-title {
    color: var(--color-text-primary);
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.billing-option-card-state {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(102, 126, 234, 0.1);
    color: var(--color-primary);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.billing-option-card-state:empty {
    display: none;
}

.billing-option-card-price {
    color: var(--color-text-primary);
    font-size: 1.02em;
    font-weight: 600;
}

.billing-option-card-meta {
    color: var(--color-text-muted);
    font-size: 0.84em;
    line-height: 1.4;
}

.billing-option-card-indicator {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1.5px solid var(--color-border-light);
    background: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.billing-option-card-indicator-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--color-primary);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.billing-option-card.is-active .billing-option-card-indicator,
.billing-option-card.is-current .billing-option-card-indicator {
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 1);
}

.billing-option-card.is-active .billing-option-card-indicator-dot,
.billing-option-card.is-current .billing-option-card-indicator-dot {
    opacity: 1;
    transform: scale(1);
}

.plan-card-pricing .btn {
    width: 100%;
    font-size: 1em;
    padding: 13px 16px;
    font-weight: 600;
}

.plan-card-pricing .btn-secondary {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.plan-card-pricing .btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.plan-card-compliance {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-lightest);
}

.plan-card-compliance-label {
    margin: 0 0 10px 0;
    color: var(--color-text-muted);
    font-size: 0.76em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.plan-card-offerings {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-card-offering {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.plan-card-offering-title {
    color: var(--color-text-primary);
    font-size: 0.9em;
    font-weight: 600;
}

.plan-card-offering-detail {
    color: var(--color-text-muted);
    font-size: 0.88em;
    text-align: right;
}

.subscription-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    font-size: 0.85em;
}

.subscription-legal-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.subscription-legal-link:hover {
    text-decoration: underline;
}

.subscription-legal-separator {
    color: var(--color-text-muted);
}

.plan-card-cta-fake {
    pointer-events: none;
    cursor: default;
    text-align: center;
}

.plan-card-cta-spacer {
    visibility: hidden;
    pointer-events: none;
}

/* --- UPGRADE NOTICE MODAL (for limit enforcement) --- */
.upgrade-notice-modal-content {
    max-width: 450px;
}

.upgrade-notice-header {
    margin-bottom: 20px;
}

.upgrade-notice-header h3 {
    color: var(--color-warning);
    font-size: 1.4em;
    margin: 0;
}

.upgrade-notice-body {
    margin-bottom: 25px;
}

.upgrade-notice-body > p {
    color: var(--color-text-secondary);
    font-size: 0.95em;
    margin: 0 0 15px 0;
}

.upgrade-notice-details {
    background: var(--color-alert-warning-bg);
    border-left: 4px solid var(--color-warning);
    padding: 12px;
    border-radius: 6px;
    font-size: 0.9em;
    color: var(--color-warning);
    line-height: 1.5;
}

.upgrade-notice-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.upgrade-notice-footer button {
    flex: 0 0 auto;
    min-width: 110px;
}

/* User Documents Table Styles */
.user-documents-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 2.6fr)  /* Name */
        minmax(0, 1.1fr)  /* Type */
        minmax(0, 1.6fr)  /* Event Name */
        minmax(0, 1.3fr)  /* Event Date */
        minmax(0, 1.6fr)  /* Event Tags */
        minmax(0, 1.6fr)  /* Timeline */
        60px;             /* Edit */
    column-gap: 12px;
    align-items: center;
    justify-items: start;
    text-align: left;
}

.user-documents-grid > div {
    text-align: left;
    justify-self: start;
}

[data-documents-grid="header"] {
    font-weight: 600;
    color: #555;
    font-size: 0.9em;
}

.c-sortable-header .sort-arrow {
    font-size: 0.8em;
}


.c-events-without-time-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.c-events-without-time-empty {
    text-align: center;
    color: #888;
}

.c-rename-cluster-input {
    margin-bottom: 5px;
    border-radius: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.c-legal-modal-z {
    z-index: var(--z-modal-special);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .upgrade-plans-grid {
        grid-template-columns: 1fr;
    }

    .upgrade-plans-grid.side-by-side {
        display: grid;
    }

    .upgrade-plan-card {
        padding: 18px;
    }

    .upgrade-modal-header h2 {
        font-size: 1.4em;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ATTACHMENTS MANAGER MODAL - Centered Modal (modal-kernel compliant)        */
/* ═══════════════════════════════════════════════════════════════════════════ */

.attachments-manager-modal {
    z-index: var(--z-modal-nested);
}

.attachments-manager-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Match Timeline/Event library viewport breathing room */
    padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .attachments-manager-modal.show {
        padding: calc(40px + env(safe-area-inset-top, 0px)) 24px calc(40px + env(safe-area-inset-bottom, 0px));
    }
}

/* Attachments Manager Timeline Picker - must appear above the attachments manager */
#am-timeline-picker-modal.timeline-picker-overlay {
    z-index: 1100; /* Above --z-modal-nested (1050) */
}


.attachments-manager-content {
    --am-header-actions-right-offset: 120px;
    position: relative;
    cursor: default;
    overflow: hidden; /* Prevent edit panel from causing horizontal scroll during transition */
    width: 100%;
    min-width: min(900px, 95vw);
    max-width: 1040px;
}

/* Attachments Library should be the same width as Events/Timelines libraries.
   Override the generic Apple-style .c-modal-size-lg-scroll cap (680px). */
#userDocumentsModal .attachments-manager-content.modal-content.c-modal-size-lg-scroll {
    width: 100%;
    max-width: 1040px;
    max-height: calc(100vh - 48px);
}

/* Attachments Manager uses standard c-modal-header pattern (matches Event Library) */
.attachments-manager-content .c-modal-header {
    flex-shrink: 0;
    border-radius: var(--panel-radius-lg, 20px) var(--panel-radius-lg, 20px) 0 0;
    margin: 0;
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
}

/* Scroll body should own scrolling; remove default padding for full-width table */
.attachments-manager-scroll-body {
    padding: 0;
    /* Keep scrolling off the modal shell/header; the list itself scrolls */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header Actions Group (matches Event Library pattern) */
.attachments-manager-content .c-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.am-header-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: var(--am-header-actions-right-offset);
}

.am-header-search {
    padding: 7px 12px;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.4;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    min-width: 220px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.am-header-search::placeholder {
    color: var(--color-text-muted);
    font-weight: 400;
}

.am-header-search:hover {
    border-color: var(--color-border-medium);
}

.am-header-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

/* iPhone-only (Account → Library → Artifacts): hidden by default (desktop/tablet). */
.am-iphone-only {
    display: none;
}

/* Filter badge (iPhone enables + positions; keep hidden elsewhere). */
#amFilterBtn {
    position: relative;
}

.am-filter-badge {
    display: none;
}

.am-header-actions-group .am-timeline-selector {
    margin-right: 4px;
}

/* Filter drawer (collapsible; pushes table down) */
.am-filter-drawer {
    flex-shrink: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease;
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
}

.am-filter-drawer.is-open {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.am-filter-drawer-inner {
    /* Match .c-modal-header horizontal padding (20px) so the chevron lines up */
    padding: 10px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

/* Chevron indicator at top of filter drawer pointing up to filter button */
.am-filter-drawer[aria-hidden="false"] .am-filter-drawer-inner::before {
    content: '';
    position: absolute;
    top: -6px;
    right: calc(var(--am-header-actions-right-offset, 120px) + 35px);
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--color-bg-primary);
    border-top: 1px solid var(--panel-border-strong, var(--color-border-medium));
    border-left: 1px solid var(--panel-border-strong, var(--color-border-medium));
    z-index: 1;
}

.am-filter-drawer-row {
    display: grid;
    /* Make the type column wide enough to keep all type chips on one row */
    grid-template-columns: minmax(620px, 2fr) minmax(260px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

@media (max-width: 768px) {
    .am-filter-drawer-row {
        grid-template-columns: 1fr;
    }
}

.am-filter-drawer-row-tags {
    grid-template-columns: 1fr;
    gap: 0;
}

.am-filter-tags-box {
    border: 1px solid var(--color-border-medium);
    border-radius: 10px;
    background: var(--color-bg-secondary);
    padding: 10px;
    height: 92px; /* ~2 rows of chips */
    max-height: 92px;
    overflow-y: auto;
    min-height: 92px;
}

.am-filter-tag-hint {
    font-size: 0.85em;
    color: var(--color-text-muted);
    padding: 2px 0;
}

.am-filter-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.am-filter-tag-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid var(--color-border-light);
    background: var(--color-brand-primary-10, #e3f2fd);
    color: var(--color-text-primary);
    font-size: 0.8em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.am-filter-tag-chip:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-strong, var(--color-border-medium));
}

.am-filter-tag-chip[aria-pressed="true"],
.am-filter-tag-chip.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

@media (max-width: 768px) {
    .am-filter-drawer-row-tags {
        padding-right: 0;
    }
}

.am-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.am-filter-label {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: lowercase;
}

.am-filter-control {
    padding: 7px 10px;
    font-size: 0.9em;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.am-filter-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

.am-filter-select {
    padding-right: 28px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.am-filter-checkbox-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px 12px;
    padding: 4px 0;
}

.am-filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88em;
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.am-filter-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.am-filter-checkbox-label:hover {
    color: var(--color-text-primary);
}

.am-filter-drawer-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.am-filter-clear {
    position: absolute;
    top: 12px;
    right: 20px;
    z-index: 1;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.8em;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-family-base);
}

.am-filter-clear:hover:not(:disabled) {
    color: var(--color-primary);
    text-decoration: underline;
}

.am-filter-clear:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

.am-filter-clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toolbar Row - legacy, kept for compatibility */
.am-header-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--panel-space-2) var(--panel-space-6) var(--panel-space-3) var(--panel-space-6);
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    width: 100%;
    box-sizing: border-box;
}

/* Canonical Toolbar Select */
.c-toolbar-select {
    padding: 7px 28px 7px 10px;
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    min-width: 150px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.c-toolbar-select:hover {
    border-color: var(--color-border-medium);
}

.c-toolbar-select:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

/* Canonical Toolbar Search Input */
.c-toolbar-search {
    padding: 7px 12px;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.4;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    min-width: 180px;
    max-width: 280px;
    flex: 1;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.c-toolbar-search::placeholder {
    color: var(--color-text-muted);
    font-weight: 400;
}

.c-toolbar-search:hover {
    border-color: var(--color-border-medium);
}

.c-toolbar-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

/* Toolbar Left/Right Groups */
.am-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.am-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Timeline Selector (matches Event Manager pattern) */
.am-timeline-selector,
.tm-status-selector,
.em-timeline-selector {
    display: flex;
    align-items: center;
}

/* Event Manager Timeline Picker Trigger (matches canvas timeline picker) */
.em-timeline-picker-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    height: 36px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.em-timeline-picker-trigger:hover {
    border-color: var(--color-border-medium);
    background: var(--color-surface-4);
}

.em-timeline-picker-trigger:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

.em-timeline-picker-trigger-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.em-timeline-picker-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Canonical Toolbar Select */
.c-toolbar-select {
    padding: 7px 28px 7px 10px;
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    min-width: 150px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.c-toolbar-select:hover {
    border-color: var(--color-border-medium);
}

.c-toolbar-select:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

/* Filter Input */
.am-filter-input {
    padding: 7px 10px;
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.am-filter-input:hover {
    border-color: var(--color-border-medium);
}

.am-filter-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

.am-filter-input::placeholder {
    color: var(--color-text-muted);
}

/* Filter Select Dropdowns */
/* .am-filter-select → use .c-toolbar-select */

/* Action Buttons in Toolbar */
.am-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.am-action-btn:hover {
    border-color: var(--color-border-medium);
    background: var(--color-surface-4);
}

.am-action-btn:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

.am-action-btn-primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.am-action-btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.am-action-btn-primary:focus {
    box-shadow: 0 0 0 2px var(--color-brand-primary-20);
}

/* Manager header close buttons - shared styling */
.attachments-manager-close-btn,
.timelines-manager-close-btn,
.event-manager-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--panel-text-muted, var(--color-text-muted));
    padding: 0;
    line-height: 1;
    font-size: 1.1em;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.attachments-manager-close-btn:hover,
.timelines-manager-close-btn:hover,
.event-manager-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--panel-text, var(--color-text-primary));
}

.attachments-manager-close-btn:focus,
.timelines-manager-close-btn:focus,
.event-manager-close-btn:focus {
    outline: none;
}

.attachments-manager-close-btn:focus-visible,
.timelines-manager-close-btn:focus-visible,
.event-manager-close-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--panel-accent, var(--color-primary));
}

/* Table Container */
.attachments-manager-table-container {
    padding: 0;
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.attachments-manager-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
    table-layout: fixed;
    /* Split header + body so only the body scrolls */
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.attachments-manager-table thead {
    background: var(--color-bg-primary);
    flex: 0 0 auto;
    /* No sticky needed when tbody owns scrolling */
    position: relative;
    top: auto;
    z-index: auto;
}

.attachments-manager-table tbody {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    scrollbar-gutter: stable;
    /* Extra space so the last row isn't obscured near the sticky footer */
    padding-bottom: 72px;
    box-sizing: border-box;
}

.attachments-manager-table thead,
.attachments-manager-table tbody {
    width: 100%;
}

.attachments-manager-table thead tr,
.attachments-manager-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.attachments-manager-table th {
    padding: 12px 10px;
    text-align: left;
    font-weight: 700;
    font-size: 0.9em;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--panel-border-strong, var(--color-border-medium));
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachments-manager-table th:hover {
    background: var(--color-surface-4);
    color: var(--color-text-primary);
}

.am-sort-indicator {
    font-size: 0.8em;
    margin-left: 4px;
    opacity: 0.5;
}

.attachments-manager-table tbody tr {
    border-bottom: 1px solid var(--color-border-lighter);
    transition: background-color 0.15s;
}

.attachments-manager-table tbody tr:hover {
    background: var(--color-surface-4);
}

.attachments-manager-table td {
    padding: 8px 10px;
    color: var(--color-text-primary);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column widths */
.am-col-edge {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    padding: 0 !important;
    pointer-events: none;
}

.am-col-name { width: 50% !important; min-width: 240px !important; }
.am-col-used-in { width: 16% !important; min-width: 112px !important; text-align: center !important; }
.am-col-size { width: 12% !important; min-width: 88px !important; text-align: center !important; }
.am-col-date-added { width: 14% !important; min-width: 116px !important; text-align: center !important; }
.am-col-actions { width: 52px !important; min-width: 52px !important; max-width: 52px !important; text-align: center !important; vertical-align: middle !important; }

/* Inline select-all checkbox inside the name header */
.am-selectall-inline {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-right: 8px;
}

.am-selectall-spacer {
    pointer-events: none;
}

.am-selectall-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* Action column button alignment */
th.am-col-actions {
    text-align: center;
}
td.am-col-actions {
    padding: 8px;
    text-align: center;
}
td.am-col-actions .am-action-btn-icon {
    margin: 0 auto;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.attachments-manager-table tbody tr:hover td.am-col-actions .am-action-btn-icon {
    opacity: 1;
}

td.am-col-actions .am-action-btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 0.85em;
    font-weight: normal;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

td.am-col-actions .am-action-btn-text:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-medium);
    color: var(--color-text-primary);
}

/* Text truncation */
.am-col-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* iPhone-only meta (hidden by default on desktop) */
.am-name-meta {
    display: none;
}

.am-name-meta-line {
    font-size: 0.78em;
    color: var(--color-text-muted, #888);
    margin-top: 3px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.am-name-usage-line {
    color: var(--color-text-secondary, #666);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED MANAGER PILL STYLES
   Standardized pill/chip styling for tags and timeline labels across managers
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pill row container - prevents clipping and supports proper truncation */
.mgr-pill-row {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: visible; /* Allow pills to show fully */
}

/* Base pill style */
.mgr-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    background: #e3f2fd;
    border-radius: 11px;
    color: var(--color-text-muted);
    font-size: 0.78em;
    font-weight: 500;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Muted pill for "none" / "—" placeholders */
.mgr-pill--muted {
    background: transparent;
    color: var(--color-text-muted);
    font-style: italic;
    font-weight: 400;
    padding: 0;
    max-width: none;
}

/* Count pill for "+N" overflow indicator */
.mgr-pill--count {
    background: var(--color-overlay-dark-10);
    color: var(--color-text-secondary);
    cursor: default;
    flex-shrink: 0;
}

/* Timeline pill - slightly different styling for timeline labels */
.mgr-pill--timeline {
    background: var(--color-surface-4);
    max-width: 120px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */

/* Attachment tag pills in table */
.am-tag-pills-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Read-only tag pills - shared base styling */
.am-tag-pill,
.edc-tag-pill-readonly,
.tm-tag-pill,
.event-card-tag {
    display: inline-flex;
    align-items: center;
    background: #e3f2fd;
    border-radius: 12px;
    color: var(--color-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.am-tag-pill {
    padding: 3px 8px;
    font-size: 0.8em;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edc-tag-pill-readonly {
    padding: 3px 8px;
    font-size: 0.75em;
}

.tm-tag-pill {
    padding: 2px 8px;
    font-size: 0.75em;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-card-tag {
    padding: 4px 10px;
    font-size: 0.85em;
    border: none;
    cursor: default;
}

.am-tag-overflow {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: var(--color-border-lighter);
    border-radius: 12px;
    font-size: 0.8em;
    color: var(--color-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

/* Empty tag state */
.am-tag-none {
    font-size: 0.9em;
    color: var(--color-text-muted);
}

/* Special States */
.am-special-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--color-text-muted);
}

.am-special-state-icon {
    font-size: 3em;
    margin-bottom: 16px;
    opacity: 0.6;
}

.am-special-state h3 {
    margin: 0 0 8px 0;
    font-size: 1.2em;
    color: var(--color-text-primary);
}

.am-special-state p {
    margin: 0;
    font-size: 0.95em;
}

/* Loading spinners (40px) */
.am-loading-spinner,
.em-export-processing-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: am-spin 0.8s linear infinite;
}

.am-loading-spinner {
    margin-bottom: 16px;
}

.em-export-processing-spinner {
    margin: 0 auto 12px;
}

@keyframes am-spin {
    to { transform: rotate(360deg); }
}

/* Manager footer containers */
.attachments-manager-footer,
.timelines-manager-footer,
.event-manager-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    border-top: 1px solid var(--panel-border-subtle, var(--color-border-light));
    background: var(--panel-surface, var(--color-bg-primary));
    flex-shrink: 0;
}

.attachments-manager-footer-info {
    font-size: 0.9em;
    color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 1024px) {
    .attachments-manager-header {
        flex-wrap: wrap;
        gap: 16px;
    }

    .attachments-manager-header-center {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .am-timeline-selector {
        width: 100%;
        margin-bottom: 8px;
    }

    .am-timeline-selector select {
        width: 100%;
    }

    .am-filter-row {
        flex-wrap: wrap;
        width: 100%;
    }

    .am-filter-input {
        flex: 1;
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .attachments-manager-header {
        padding: 12px 16px;
    }

    .am-header-logo {
        width: 32px;
        height: 32px;
    }

    .attachments-manager-header h2 {
        font-size: 1.1em;
    }

    .attachments-manager-table th,
    .attachments-manager-table td {
        padding: 10px 12px;
        font-size: 0.85em;
    }
    
    /* Compact bulk bar on mobile */
    .am-bulk-bar {
        flex-wrap: wrap;
        padding: 8px 16px;
    }
    
    .am-bulk-bar-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }
}

/* Row and cell styles */
.am-row {
    transition: background-color 0.15s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .am-row:hover {
        background: var(--color-surface-4);
    }
}

.am-row:active {
    background: var(--color-surface-4);
}

/* Name cell links - normal color by default, blue + underline on hover */
.am-name-link {
    display: block;
    text-decoration: none;
    color: var(--color-text-primary, #333);
    transition: color 0.15s ease;
}

.am-name-link:hover {
    color: var(--color-primary, #5b6fd8);
    text-decoration: underline;
}

/* Name cell structure - primary filename and secondary size */
.am-name-primary {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.am-name-secondary {
    font-size: 0.78em;
    color: var(--color-text-muted, #888);
    margin-top: 3px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Attachments Manager: thumbnail inside the name column (fixed size, no row expansion) */
.am-name-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.am-name-text {
    min-width: 0;
    flex: 1 1 auto;
}

.am-name-thumb {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 6px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-4);
}

.am-name-thumb--img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.15s ease;
    animation: _amThumbFallback 0s 1.8s forwards;
}

.am-name-thumb--img.is-loaded {
    opacity: 1;
    animation: none;
}

/* Safety net: if JS load detection fails entirely (e.g. WKWebView
   evicts decode data without firing any event), this keyframe
   ensures the thumbnail becomes visible after 1.8 s. The .is-loaded
   class overrides it instantly when JS works normally. */
@keyframes _amThumbFallback {
    to { opacity: 1; }
}

.am-name-thumb--icon {
    background: var(--color-surface-4);
    color: var(--color-text-secondary);
}

.am-name-thumb--icon svg {
    width: 18px;
    height: 18px;
}

.am-name-thumb--waveform {
    background: var(--color-surface-4);
}

.am-mini-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
}

.am-mini-waveform span {
    display: block;
    width: 2px;
    border-radius: 1px;
    background: var(--color-primary);
    opacity: 0.7;
}

.am-mini-waveform span:nth-child(1) { height: 6px; }
.am-mini-waveform span:nth-child(2) { height: 12px; }
.am-mini-waveform span:nth-child(3) { height: 16px; }
.am-mini-waveform span:nth-child(4) { height: 10px; }
.am-mini-waveform span:nth-child(5) { height: 7px; }

/* Edit button */
.am-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    color: var(--color-primary);
    font-size: 1.1em;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.am-edit-btn:hover {
    background: var(--color-surface-4);
    color: var(--color-primary-dark);
}

/* No data state */
.am-no-data {
    text-align: center;
    color: var(--color-text-muted);
    padding: 60px 20px;
    font-size: 0.95em;
}

/* Subtitle divider (matches Event Manager) */
.am-subtitle-divider {
    color: var(--color-text-muted);
    margin: 0 6px;
}

/* Type badge with icon */
.am-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

.am-type-badge svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

/* Helper text in empty states */
.am-helper-text {
    font-size: 0.85em;
    color: var(--color-text-muted);
    margin-top: 8px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ATTACHMENTS MANAGER - CHECKBOX COLUMN & SELECTION                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

.am-col-checkbox {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    text-align: center !important;
    padding: 8px 4px !important;
}

th.am-col-checkbox {
    vertical-align: middle;
}

th.am-col-checkbox input[type="checkbox"],
td.am-col-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.am-row-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.am-row-selected {
    background-color: var(--color-brand-primary-10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ATTACHMENTS MANAGER - BULK ACTION BAR                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

.am-bulk-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    flex-shrink: 0;
    gap: 16px;
}

.am-bulk-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.am-bulk-count {
    font-weight: 600;
    font-size: 0.95em;
}

.am-bulk-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--color-text-inverse);
    font-size: 0.85em;
    cursor: pointer;
    transition: background 0.2s;
}

.am-bulk-clear-btn:hover {
    background: var(--color-overlay-light-50);
}

.am-bulk-bar-actions {
    display: flex;
    gap: 8px;
}

.am-bulk-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--color-overlay-light-50);
    padding: 8px 14px;
    border-radius: 6px;
    color: var(--color-text-inverse);
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.am-bulk-action-btn:hover {
    background: var(--color-overlay-light-50);
    border-color: rgba(255, 255, 255, 0.8);
}

.am-bulk-action-danger {
    background: var(--color-status-error);
    border-color: var(--color-status-error);
    opacity: 0.9;
}

.am-bulk-action-danger:hover {
    background: var(--color-status-error);
    border-color: var(--color-status-error);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ATTACHMENTS MANAGER - ACTION BUTTONS (matches Event Manager)                */
/* ═══════════════════════════════════════════════════════════════════════════ */

.am-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: var(--panel-button-height, 40px);
    border: none;
    background: transparent;
    border-radius: var(--panel-button-radius, 6px);
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s;
}

.am-action-btn:hover {
    background: var(--panel-surface-muted, var(--color-surface-4));
}

.am-action-btn:focus:not(:focus-visible) {
    outline: none;
}

.am-action-btn svg {
    width: 20px;
    height: 20px;
}

/* Icon-only action buttons (32px, borderless) */
.am-action-btn-icon,
.em-action-btn-icon,
.timeline-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--panel-button-radius, 6px);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.am-action-btn-icon:hover,
.em-action-btn-icon:hover,
.timeline-action-btn:hover {
    background: var(--panel-surface-muted, var(--color-surface-4));
    color: var(--panel-accent, var(--color-primary));
}

.am-action-btn-icon svg,
.em-action-btn-icon svg,
.timeline-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Destructive action variant */
.timeline-action-btn.delete:hover {
    background: var(--color-status-error-bg);
    color: var(--color-status-error);
}

/* "No event yet" badge for unattached attachments */
.am-no-event-badge {
    display: inline-block;
    background: var(--color-surface-4);
    color: var(--color-text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
    border: 1px solid var(--color-border-light);
}

/* Attachment details view mode (metadata display in sidebar) */
#attachmentDetailViewMode {
    padding: 20px;
}

.attachment-detail-field {
    margin-bottom: 20px;
}

.attachment-detail-label {
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.attachment-detail-value {
    margin: 0;
    font-size: 0.95em;
    color: var(--color-text-primary);
    word-wrap: break-word;
    word-break: break-word;
}

.attachment-detail-value.empty {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Attachment tags in view mode */
.attachment-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Edit mode (form in sidebar) */
#attachmentDetailEditMode {
    padding: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ATTACHMENTS MANAGER - ENHANCED SPECIAL STATES                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

.am-special-state h3 {
    margin: 0 0 8px 0;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-text-primary);
}

.am-special-state p {
    margin: 0 0 16px 0;
    font-size: 0.95em;
    color: var(--color-text-muted);
}

.am-special-state .btn {
    margin-top: 8px;
}

.am-error-state {
    color: var(--color-status-error);
}

.am-error-state h3 {
    color: var(--color-status-error);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TIMELINE LIBRARY MODAL - Modal-kernel compliant centered dialog              */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* 
 * Timeline Library uses standard .modal and .modal-content classes
 * so it behaves like a true modal (backdrop visible, centered, ESC closes).
 */

/* Large modal content area */
.timeline-library-modal .tl-modal-content {
    max-width: 800px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: var(--panel-radius-lg, 16px);
}

/* Header styling */
.timeline-library-modal .tl-modal-header {
    padding: var(--panel-space-4) var(--panel-space-5);
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    flex-shrink: 0;
}

.timeline-library-modal .tl-modal-header .c-modal-title-container {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.timeline-library-modal .tl-header-count {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

/* Toolbar */
.timeline-library-modal .tl-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--panel-space-3) var(--panel-space-5);
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    background: var(--panel-surface-subtle, var(--color-bg-secondary));
    flex-shrink: 0;
}

.timeline-library-modal .tl-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.timeline-library-modal .tl-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.timeline-library-modal .tl-filter-btn:hover {
    background: var(--color-surface-4);
    color: var(--color-text-primary);
}

/* Modal body - scrollable list area */
.timeline-library-modal .tl-modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    position: relative;
}

/* Empty and Error states */
.timeline-library-modal .tl-empty-state,
.timeline-library-modal .tl-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--color-text-muted);
}

.timeline-library-modal .tl-empty-state h3,
.timeline-library-modal .tl-error-state h3 {
    margin: 12px 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.timeline-library-modal .tl-empty-state p,
.timeline-library-modal .tl-error-state p {
    margin: 0;
    font-size: 0.9rem;
}

.timeline-library-modal .tl-empty-icon,
.timeline-library-modal .tl-error-icon {
    font-size: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* LEGACY: Keep old classes as fallback until fully migrated                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

.timelines-manager-modal {
    z-index: var(--z-modal-blocking);
    overflow: hidden;
}

.tm-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--panel-font-subtitle-size, 0.85em);
    color: var(--panel-text-muted, var(--color-text-muted));
}

.tm-subtitle-divider {
    color: var(--color-text-muted);
    opacity: 0.5;
}

/* Toolbar Row */
.tm-header-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: var(--panel-space-2) var(--panel-space-6) var(--panel-space-3) var(--panel-space-6);
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    width: 100%;
}

/* Toolbar Left/Right Groups */
.tm-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tm-toolbar-right {
    margin-left: auto;
}

/* .tm-status-selector select → use .c-toolbar-select */

/* Secondary button style for filter */
.tm-action-btn-secondary {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
}

.tm-action-btn-secondary:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-light);
    color: var(--color-text-primary);
}

.tm-action-btn-secondary svg {
    fill: currentColor;
}

/* Search Wrapper in Header */
.tm-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.tm-search-input {
    width: 200px;
    padding: var(--panel-input-padding-y, 8px) var(--panel-input-padding-x, 12px) var(--panel-input-padding-y, 8px) 36px;
    border: 1px solid var(--panel-input-border, var(--color-border-light));
    border-radius: var(--panel-input-radius, 8px);
    background: var(--panel-input-bg, var(--color-bg-primary));
    color: var(--panel-text, var(--color-text-primary));
    font-size: var(--panel-font-body-size, 0.9em);
    transition: all 0.2s;
}

.tm-search-input:focus {
    outline: none;
    border-color: var(--panel-input-focus-border, var(--color-primary));
    box-shadow: var(--panel-input-focus-ring, 0 0 0 3px var(--color-brand-primary-10));
}

.tm-search-input::placeholder {
    color: var(--panel-input-placeholder, var(--color-text-muted));
}

.tm-search-wrapper svg {
    position: absolute;
    left: 10px;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* Icon-only Action Button */
.tm-action-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--panel-border-strong, var(--color-border-light));
    border-radius: var(--panel-button-radius, 8px);
    background: var(--panel-surface, var(--color-bg-primary));
    color: var(--panel-text-muted, var(--color-text-muted));
    cursor: pointer;
    transition: all 0.2s;
}

.tm-action-btn-icon:hover {
    background: var(--panel-surface-muted, var(--color-surface-4));
    border-color: var(--panel-border-strong, var(--color-border-medium));
    color: var(--panel-text, var(--color-text-primary));
}

.tm-action-btn-icon.primary {
    background: var(--panel-accent, var(--color-primary));
    border-color: var(--panel-accent, var(--color-primary));
    color: var(--panel-accent-contrast, var(--color-text-inverse));
}

.tm-action-btn-icon.primary:hover {
    background: var(--panel-accent-strong, var(--color-primary-dark));
    border-color: var(--panel-accent-strong, var(--color-primary-dark));
}

/* Timeline Filter Active State (Red Fill) */
#timeline-filter-btn.active {
    background-color: var(--color-status-error-bg);
    border-color: var(--color-danger, #dc3545);
    color: var(--color-danger, #dc3545);
}

#timeline-filter-btn.active:hover {
    background-color: var(--color-status-error-bg);
    border-color: var(--color-danger, #dc3545);
}

#timeline-filter-btn.active svg {
    fill: var(--color-danger, #dc3545);
}

.tm-action-btn {
    display: flex;
    align-items: center;
    gap: var(--panel-button-gap, 6px);
    padding: var(--panel-button-padding-y, 8px) var(--panel-button-padding-x, 14px);
    border: 1px solid var(--panel-border-strong, var(--color-border-light));
    border-radius: var(--panel-button-radius, 8px);
    background: var(--panel-surface, var(--color-bg-primary));
    color: var(--panel-text, var(--color-text-primary));
    font-size: var(--panel-font-body-size, 0.9em);
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s;
}

.tm-action-btn:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-medium);
}

.tm-action-btn:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

.tm-action-btn svg {
    flex-shrink: 0;
}

.tm-action-btn-primary {
    background: var(--color-primary, #667eea);
    border-color: var(--color-primary, #667eea);
    color: var(--color-text-inverse);
}

.tm-action-btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.tm-action-btn-primary svg {
    fill: var(--color-text-inverse);
}

/* Body - Scrollable Content */
/* Body - Contains status tabs and table */
.timelines-manager-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--panel-surface, var(--color-bg-primary));
}

/* Status Filter Tabs */
.tm-status-tabs {
    display: flex;
    gap: 8px;
    padding: var(--panel-space-3, 12px) var(--panel-space-6, 24px);
    background: var(--panel-surface-subtle, var(--color-bg-secondary));
    flex-shrink: 0;
}

.tm-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-primary);
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.tm-status-tab:hover {
    background: var(--color-surface-4);
    color: var(--color-text-primary);
    border-color: var(--color-border-light);
}

.tm-status-tab.active {
    background: var(--color-primary, #667eea);
    color: var(--color-text-inverse);
    border-color: var(--color-primary, #667eea);
}

.tm-status-tab .tm-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    background: var(--color-overlay-dark-10);
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: 600;
}

.tm-status-tab.active .tm-tab-count {
    background: var(--color-overlay-light-50);
}

/* Table Container */
.timelines-manager-table-container {
    flex: 1;
    overflow: auto;
    padding: 0;
    position: relative;
    scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shift */
}

.timelines-manager-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    table-layout: fixed;
}

.timelines-manager-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg-secondary);
}

.timelines-manager-table th {
    padding: 14px 12px;
    text-align: left;
    font-weight: 500;
    font-size: 0.85em;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    opacity: 0.85;
    border-bottom: 2px solid var(--color-border-light);
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timelines-manager-table tbody tr {
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.15s;
}

.timelines-manager-table tbody tr:hover {
    background: var(--color-surface-4);
}

.timelines-manager-table tbody tr.tm-inactive-row {
    opacity: 0.6;
}

.timelines-manager-table tbody tr.tm-row-selected {
    background-color: #e3f2fd;
}

.timelines-manager-table tbody tr.tm-row-selected:hover {
    background-color: #bbdefb;
}

.timelines-manager-table td {
    padding: 12px 12px;
    color: var(--color-text-primary);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column Widths - order: checkbox, name, events, tags, notes, visibility, status, edit */
.tm-col-checkbox { 
    width: 40px !important; 
    min-width: 40px !important; 
    max-width: 40px !important; 
    text-align: center !important;
}
th.tm-col-checkbox,
td.tm-col-checkbox {
    padding: 8px 4px !important;
}
.tm-col-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 auto;
    display: block;
    cursor: pointer;
}
/* Rebalanced: Name narrower, Notes wider for better readability */
.tm-col-name { width: 16% !important; min-width: 100px !important; max-width: 180px !important; }
.tm-col-events { width: 55px !important; min-width: 55px !important; max-width: 55px !important; }
.tm-col-notes { width: 28% !important; min-width: 140px !important; }

.tm-col-status { width: 11% !important; min-width: 85px !important; }
.tm-col-edit { width: 48px !important; min-width: 48px !important; max-width: 48px !important; text-align: center !important; }
th.tm-col-status,
td.tm-col-status,
th.tm-col-edit,
td.tm-col-edit,
th.tm-col-events,
td.tm-col-events { text-align: center; }
th.tm-col-edit,
td.tm-col-edit { 
    padding: 8px 4px;
    text-align: center;
    vertical-align: middle;
}

/* Notes column styling */
.tm-col-notes {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tm-notes-text {
    color: var(--color-text-secondary);
    font-size: 0.9em;
}
.tm-notes-none {
    color: var(--color-text-muted);
}

.tm-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tm-tag-more {
    display: inline-block;
    padding: 2px 6px;
    background: var(--color-overlay-dark-10);
    border-radius: 12px;
    font-size: 0.75em;
    color: var(--color-text-secondary);
    font-weight: 500;
    cursor: default;
}
.tm-tag-none {
    font-size: 0.9em;
    color: var(--color-text-muted);
}

/* Edit column - centered with hover effect */
td.tm-col-edit {
    text-align: center !important;
    padding: 8px 4px !important;
}

.tm-edit-btn {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    opacity: 0.6;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.tm-edit-btn:hover {
    opacity: 1;
    color: var(--color-primary);
    background: var(--color-bg-tertiary, rgba(0,0,0,0.04));
}

.tm-edit-btn:focus {
    outline: none;
}

.tm-edit-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.tm-edit-btn svg {
    width: 18px;
    height: 18px;
}

.timelines-manager-table tbody tr:hover .tm-edit-btn {
    opacity: 0.8;
}

/* Text truncation */
.tm-col-name {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Timeline Name Cell */
.tm-timeline-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Visibility Badge */
/* Events Count */
.tm-events-count {
    font-weight: 500;
    color: var(--color-text-muted);
}

.tm-events-count.clickable {
    color: var(--color-primary, #667eea);
    cursor: pointer;
    transition: color 0.2s;
}

.tm-events-count.clickable:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Status Toggle Switch */
.tm-status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.tm-status-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tm-status-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--color-border-medium);
    border-radius: 20px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.tm-status-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--color-bg-primary);
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px var(--color-overlay-dark-20);
}

.tm-status-checkbox:checked + .tm-status-slider {
    background: var(--color-status-success);
}

.tm-status-checkbox:checked + .tm-status-slider::before {
    transform: translateX(16px);
}

.tm-status-checkbox:focus-visible + .tm-status-slider {
    outline: 2px solid var(--color-primary, #667eea);
    outline-offset: 2px;
}

.tm-status-toggle:hover .tm-status-slider {
    background: var(--color-border-dark);
}

.tm-status-toggle:hover .tm-status-checkbox:checked + .tm-status-slider {
    background: var(--color-status-success);
    opacity: 0.9;
}

.tm-status-label {
    font-size: 0.8em;
    font-weight: 500;
    min-width: 50px;
    text-align: left;
}

.tm-status-label.active {
    color: var(--color-status-success);
}

.tm-status-label.inactive {
    color: var(--color-text-secondary);
}

/* Empty State */
.tm-empty-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 40px;
    max-width: 400px;
}

.tm-empty-state-icon {
    font-size: 3em;
    margin-bottom: 16px;
}

.tm-empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tm-empty-state p {
    margin: 0 0 24px 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.tm-empty-state .btn {
    min-width: 180px;
}

/* Error State */
.tm-error-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 40px;
    max-width: 400px;
}

.tm-error-state-icon {
    font-size: 3em;
    margin-bottom: 16px;
    color: var(--color-status-error);
}

.tm-error-state h3 {
    margin: 0 0 8px 0;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--color-status-error);
}

.tm-error-state p {
    margin: 0 0 24px 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.timelines-manager-footer-info {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TIMELINE LIBRARY - Clean List Layout (replaces table view)                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* List container */
.timeline-library-list {
    padding: 0;
}

.tl-list-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Timeline row item */
.tl-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border-lighter, rgba(0,0,0,0.06));
    cursor: pointer;
    transition: background-color 0.15s ease;
    user-select: none;
}

.tl-list-item:hover {
    background-color: var(--color-surface-4, rgba(0,0,0,0.03));
}

.tl-list-item.tl-item-selected {
    background-color: var(--color-brand-primary-10, #e3f2fd);
}

.tl-list-item.tl-item-selected:hover {
    background-color: var(--color-brand-primary-15, #bbdefb);
}

.tl-list-item.tl-item-inactive {
    opacity: 0.55;
}

/* Checkbox */
.tl-item-checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-primary, #667eea);
}

/* Main content area */
.tl-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Timeline name (primary) */
.tl-item-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Secondary metadata line */
.tl-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.tl-item-meta-divider {
    color: var(--color-border-medium);
}

.tl-item-events {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tl-item-edited {
    color: var(--color-text-muted);
}

/* Visibility pill/chip */
.tl-item-visibility {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.tl-item-visibility.private {
    background: var(--color-status-error-bg, #fee2e2);
    color: var(--color-status-error, #dc2626);
}

/* Status pill (active/inactive/archived) */
.tl-item-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.tl-item-status.active {
    background: var(--color-status-success-bg, #dcfce7);
    color: var(--color-status-success, #16a34a);
}

.tl-item-status.inactive {
    background: var(--color-surface-4, #f1f5f9);
    color: var(--color-text-muted, #64748b);
}

.tl-item-status.archived {
    background: var(--color-alert-warning-bg, #fef3c7);
    color: var(--color-alert-warning, #d97706);
}

/* Pills container (right side of row) */
.tl-item-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TIMELINE LIBRARY - Bottom Bulk Action Tray                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

.tl-bulk-action-tray {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    background: var(--color-bg-secondary, #f8fafc);
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    transition: transform 0.25s ease, opacity 0.25s ease;
    z-index: 10;
}

.tl-bulk-action-tray.is-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.tl-bulk-tray-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tl-bulk-count {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.tl-bulk-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tl-bulk-clear-btn:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-medium);
    color: var(--color-text-primary);
}

.tl-bulk-tray-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tl-bulk-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tl-bulk-action-btn:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-medium);
}

.tl-bulk-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tl-bulk-action-btn.tl-bulk-action-danger {
    color: var(--color-danger, #dc2626);
    border-color: var(--color-danger-light, #fecaca);
}

.tl-bulk-action-btn.tl-bulk-action-danger:hover {
    background: var(--color-status-error-bg, #fee2e2);
    border-color: var(--color-danger, #dc2626);
}

/* Responsive */
@media (max-width: 768px) {
    .timeline-library-modal .tl-modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .timeline-library-modal .tl-toolbar {
        padding: var(--panel-space-2) var(--panel-space-3);
    }
    
    .timeline-library-modal .tl-toolbar-left {
        flex-wrap: wrap;
    }
    
    .timeline-library-modal .tl-filter-btn span {
        display: none;
    }
    
    .tl-list-item {
        padding: 12px 16px;
        gap: 10px;
    }
    
    .tl-item-name {
        font-size: 0.95rem;
    }
    
    .tl-item-meta {
        font-size: 0.8rem;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .tl-item-pills {
        flex-direction: column;
        gap: 4px;
        align-items: flex-end;
    }
    
    .tl-item-visibility,
    .tl-item-status {
        padding: 3px 8px;
        font-size: 0.7rem;
    }
    
    .tl-bulk-action-tray {
        padding: 10px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .tl-bulk-tray-left {
        flex: 1;
    }
    
    .tl-bulk-action-btn {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
    
    .tl-bulk-action-btn span {
        display: none;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .tm-header-title-row {
        padding: 12px 16px 6px 16px;
    }

    .tm-header-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px 16px 10px 16px;
    }
    
    .tm-toolbar-left {
        flex-wrap: wrap;
    }
    
    .tm-toolbar-right {
        margin-left: 0;
    }

    .tm-status-selector select {
        min-width: 140px;
        font-size: 0.85em;
    }

    .tm-action-btn {
        padding: 8px 10px;
    }

    .tm-action-btn span {
        display: none;
    }
    
    /* Hide search on mobile */
    .tm-header-toolbar .c-toolbar-search {
        display: none;
    }

    .timelines-manager-table th,
    .timelines-manager-table td {
        padding: 10px 12px;
        font-size: 0.9em;
    }

    /* Hide less important columns on mobile */
        .tm-col-events {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TIMELINE EVENTS MODAL - Shows events for a specific timeline                */
/* ═══════════════════════════════════════════════════════════════════════════ */

.timeline-events-modal {
    z-index: var(--z-modal-attachment);
}

.timeline-events-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-events-content {
    background: var(--color-bg-primary);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px var(--color-overlay-dark-30);
    overflow: hidden;
}

.timeline-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
}

.timeline-events-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timeline-events-header h2 {
    margin: 0;
    font-size: 1.25em;
    font-weight: 600;
    color: var(--color-text-primary);
}

.timeline-events-subtitle {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.timeline-events-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background-color 0.2s, color 0.2s;
}

.timeline-events-close-btn:hover {
    background: var(--color-surface-4);
    color: var(--color-text-primary);
}

.timeline-events-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.timeline-events-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
    font-size: 0.95em;
}

.timeline-events-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.timeline-event-item {
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    transition: all 0.2s;
}

.timeline-event-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.timeline-event-text {
    flex: 1;
    min-width: 0;
}

.timeline-event-text h3 {
    font-size: 1.1em;
    margin: 0 0 2px 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-event-text p {
    font-size: 0.9em;
    opacity: 0.9;
    margin: 0;
}

.timeline-event-controls {
    flex-shrink: 0;
    margin-left: var(--spacing-md);
}

.timeline-event-remove-btn {
    background: transparent;
    border: none;
    color: var(--color-text-inverse);
    border-radius: 5px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.timeline-event-remove-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Add Event Section */
.timeline-events-add-section {
    padding: 0 0 var(--spacing-md) 0;
}

.timeline-events-list-container {
    display: flex;
    flex-direction: column;
}

.timeline-events-add-wrapper {
    display: flex;
    gap: 6px;
}

.timeline-events-add-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.95em;
}

.timeline-events-add-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.timeline-events-add-btn {
    padding: 8px 14px;
    background: var(--color-primary);
    border: none;
    border-radius: 6px;
    color: var(--color-text-inverse);
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.timeline-events-add-btn:hover {
    background: var(--color-primary-dark, #4a5fd9);
}

@media (max-width: 480px) {
    .timeline-events-content {
        width: 95%;
        max-height: 85vh;
    }
    
    .timeline-events-header {
        padding: 16px 20px;
    }
    
    .timeline-events-add-section {
        padding: 0 var(--spacing-md) var(--spacing-sm);
    }
    
    .timeline-events-body {
        padding: var(--spacing-md);
    }
    
    .timeline-event-item {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .timeline-event-text h3 {
        font-size: 1em;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TIMELINE CREATED BANNER - Post-Creation Success with Import Option          */
/* ═══════════════════════════════════════════════════════════════════════════ */

.timeline-created-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: var(--color-success-bg, #d4edda);
    border: 1px solid var(--color-success-border, #c3e6cb);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--color-overlay-dark-15);
    padding: 0;
    z-index: var(--z-toast);
    max-width: 600px;
    width: calc(100% - 32px);
    margin: 16px;
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    pointer-events: none;
}

.timeline-created-banner.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.timeline-created-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.timeline-created-banner-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-success, #28a745);
}

.timeline-created-banner-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.timeline-created-banner-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-primary, #2c3e50);
}

.timeline-created-banner-text strong {
    font-weight: 600;
    margin-right: 4px;
}

.timeline-created-banner-text .timeline-name {
    font-weight: 500;
    color: var(--color-text-primary, #2c3e50);
}

.timeline-created-banner-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--color-success, #28a745);
    border-radius: 4px;
    color: var(--color-success, #28a745);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.timeline-created-banner-action:hover {
    background: var(--color-success, #28a745);
    color: var(--color-text-inverse);
}

.timeline-created-banner-action svg {
    width: 16px;
    height: 16px;
}

.timeline-created-banner-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--color-text-secondary, #6c757d);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.timeline-created-banner-close:hover {
    background: var(--color-overlay-dark-05);
    color: var(--color-text-primary, #2c3e50);
}

.timeline-created-banner-close svg {
    width: 18px;
    height: 18px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .timeline-created-banner {
        max-width: calc(100% - 16px);
        margin: 8px;
    }
    
    .timeline-created-banner-content {
        padding: 10px 12px;
        gap: 8px;
    }
    
    .timeline-created-banner-action {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .timeline-created-banner-action span {
        display: none; /* Hide text on mobile, icon only */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* EVENT LIBRARY MODAL - Centered modal with backdrop for event selection/bulk actions */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Legacy class name retained for backwards compatibility */
.event-manager-modal,
.event-library-modal {
    z-index: var(--z-modal-nested);
    overflow: hidden; /* Modal handles its own scrolling */
}

.event-manager-modal.show,
.event-library-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure the sheet never touches viewport edges (iPad + small widths) */
    padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .event-manager-modal.show,
    .event-library-modal.show {
        padding: calc(40px + env(safe-area-inset-top, 0px)) 24px calc(40px + env(safe-area-inset-bottom, 0px));
    }
}

/* Event Library content - large centered modal */
.event-library-content {
    background: var(--panel-surface, var(--color-bg-primary));
    width: 100%;
    /* Slightly narrower, calmer library sheet */
    max-width: 1040px;
    height: 85vh;
    /* Respect the overlay padding instead of hard viewport math */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    cursor: default;
    overflow: hidden;
    border-radius: var(--panel-radius-lg, 20px);
    box-shadow: var(--panel-shadow, var(--shadow-xl));
}

/* Legacy content class for backwards compatibility */
.event-manager-content {
    background: var(--panel-surface, var(--color-bg-primary));
    width: 100%;
    /* Slightly narrower, calmer library sheet */
    max-width: 1040px;
    height: 85vh;
    /* Respect the overlay padding instead of hard viewport math */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    cursor: default;
    overflow: hidden;
    border-radius: var(--panel-radius-lg, 20px);
    box-shadow: var(--panel-shadow, var(--shadow-xl));
}

/* Prevent images inside library modals from overflowing/clipping */
.event-library-content img,
.timeline-library-content img {
    max-width: 100%;
    height: auto;
}

/* Event Library Timeline Picker - needs to be above Event Library modal */
#em-timeline-picker-modal {
    z-index: 1100; /* Above --z-modal-nested (1050) */
}

/* Event Library uses standard c-modal-header pattern */
.event-library-content .c-modal-header {
    flex-shrink: 0;
    border-radius: var(--panel-radius-lg, 20px) var(--panel-radius-lg, 20px) 0 0;
    margin: 0;
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
}

.event-library-content .c-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.event-library-content .em-header-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 120px;
}

.event-library-content .em-header-actions-group .em-timeline-selector {
    margin-right: 4px;
}

.event-library-content .c-modal-header-actions .em-timeline-dropdown {
    left: auto;
    right: 0;
}

/* Toolbar Row - sits below the standard header */
.event-library-content .em-header-toolbar,
.em-header-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px var(--panel-space-6, 24px);
    background: var(--panel-surface, var(--color-bg-primary));
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    flex-shrink: 0;
    margin-top: 0;
    border-top: none;
    box-shadow: none;
}

/* Toolbar Left/Right Groups */
.em-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.em-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Icon-only header actions (Event Library) */
.em-action-btn.em-action-btn-icon-only {
    width: 36px;
    padding: 0;
    justify-content: center;
}

/* Filter drawer (collapsible; pushes table down) */
.event-library-content .em-filter-drawer {
    flex-shrink: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 220ms ease, opacity 160ms ease, transform 220ms ease;
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    background: var(--panel-surface, var(--color-bg-primary));
}

.event-library-content .em-filter-drawer.is-open {
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
    overflow: visible;
}

.event-library-content .em-filter-drawer-inner {
    padding: 10px var(--panel-space-6, 24px) 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

/* Chevron indicator at top of filter drawer pointing up to filter button */
.event-library-content .em-filter-drawer[aria-hidden="false"] .em-filter-drawer-inner::before {
    content: '';
    position: absolute;
    top: -6px;
    right: calc(var(--panel-space-6, 24px) + 28px + 12px + 18px);
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--panel-surface, var(--color-bg-primary));
    border-top: 1px solid var(--panel-border-strong, var(--color-border-medium));
    border-left: 1px solid var(--panel-border-strong, var(--color-border-medium));
    z-index: 1;
}

.event-library-content .em-filter-drawer-row-1 {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 14px;
    align-items: start;
}

@media (max-width: 860px) {
    .event-library-content .em-filter-drawer-row-1 {
        grid-template-columns: 1fr;
    }
}

.event-library-content .em-filter-clear {
    position: absolute;
    top: 12px;
    right: 20px;
    z-index: 1;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.8em;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-family-base);
}

.event-library-content .em-filter-clear:hover:not(:disabled) {
    color: var(--color-primary);
    text-decoration: underline;
}

.event-library-content .em-filter-clear:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

.event-library-content .em-filter-clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.event-library-content .em-filter-date-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.event-library-content .em-filter-date-row .em-filter-control {
    width: 14ch;
    min-width: 0;
    flex: 0 0 auto;
}

.event-library-content .em-filter-date-sep {
    font-size: 0.85em;
    color: var(--color-text-muted);
    white-space: nowrap;
    padding: 0 2px;
}

.event-library-content .em-filter-field-full {
    width: 100%;
}

.event-library-content .em-filter-tags-box {
    border: 1px solid var(--color-border-medium);
    border-radius: 10px;
    background: #f8f8f8;
    padding: 10px;
    max-height: 92px; /* ~2 rows of chips + scroll */
    overflow-y: auto;
}

.event-library-content .em-filter-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.event-library-content .em-theme-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid var(--color-border-light);
    background: var(--color-brand-primary-10, #e3f2fd);
    color: var(--color-text-primary);
    font-size: 0.8em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.event-library-content .em-theme-filter-chip:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-strong, var(--color-border-medium));
}

.event-library-content .em-theme-filter-chip[aria-pressed="true"],
.event-library-content .em-theme-filter-chip.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.event-library-content .em-filter-drawer-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.event-library-content .em-filter-label {
    font-size: 0.8em;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.event-library-content .em-filter-section {
    margin-bottom: 14px;
}

/* Event Library-only hierarchy and density refinements */
.event-library-content .event-manager-table {
    font-size: 0.92em;
}

.event-library-content .event-manager-table thead {
    background: var(--color-bg-primary);
    box-shadow: inset 0 -1px 0 var(--panel-border-strong, var(--color-border-medium));
}

.event-library-content .event-manager-table th {
    padding: 12px 10px;
    font-size: 0.9em;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--panel-border-strong, var(--color-border-medium));
    color: var(--color-text-primary);
    font-weight: 700;
}

.event-library-content .event-manager-table td {
    padding: 8px 8px;
}

.event-library-content .em-col-title { width: auto !important; min-width: 132px !important; }
.event-library-content .em-col-date { width: 104px !important; min-width: 104px !important; max-width: 104px !important; }
/* Keep these compact but fully readable (header + badge text) */
.event-library-content .em-col-visibility { width: 112px !important; min-width: 112px !important; max-width: 112px !important; }
.event-library-content .em-col-effective { width: 112px !important; min-width: 112px !important; max-width: 112px !important; }
/* Status column: give the toggle breathing room near the right edge */
.event-library-content .em-col-status { width: 88px !important; min-width: 88px !important; max-width: 88px !important; text-align: center !important; }

/* Give the status toggle extra right-side breathing room */
.event-library-content .event-manager-table th.em-col-status { padding: 12px 14px; }
.event-library-content .event-manager-table td.em-col-status { padding: 8px 14px; }

.event-library-content .tm-status-toggle {
    justify-content: center;
    gap: 0;
}

.event-library-content .em-col-title {
    font-weight: 400;
}

.event-library-content .em-tag-pill {
    padding: 2px 6px;
    background: var(--color-brand-primary-10, #e3f2fd);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    font-size: 0.78em;
    color: var(--color-text-primary);
}

.event-library-content .em-tag-overflow {
    background: var(--color-brand-primary-10, #e3f2fd);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    font-size: 0.74em;
    color: var(--color-text-secondary);
}

.event-library-content .em-tag-none {
    font-size: 0.85em;
}

.event-library-content .event-manager-bulk-bar {
    padding: 12px 24px;
    background: var(--panel-surface, var(--color-bg-primary));
    box-shadow: inset 0 1px 0 var(--panel-border-subtle, var(--color-border-light));
}


.event-library-content .em-event-row {
    cursor: pointer;
}


.event-library-content .em-event-row:hover {
    background: var(--color-brand-primary-08);
}

.event-library-content .em-event-row:active {
    background: var(--color-brand-primary-08);
}

.event-library-content .em-bulk-count {
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: 0.9em;
}

.event-library-content .em-filter-control {
    padding: 8px 10px;
    font-size: 0.85em;
    background: var(--color-surface-1, var(--color-bg-primary));
    border-color: var(--color-border-light);
}

.event-library-content .em-filter-hint {
    font-size: 0.72em;
    color: var(--color-text-muted);
}

.event-library-content .em-filter-date-sep {
    font-size: 0.8em;
    color: var(--color-text-muted);
}

/* .em-timeline-selector select → use .c-toolbar-select */

/* Action Buttons */
.em-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--panel-button-gap, 6px);
    padding: var(--panel-button-padding-y, 8px) var(--panel-button-padding-x, 14px);
    height: var(--panel-button-height, 36px);
    box-sizing: border-box;
    border: 1px solid var(--panel-border-strong, var(--color-border-light));
    border-radius: var(--panel-button-radius, 8px);
    background: var(--panel-surface, var(--color-bg-primary));
    color: var(--panel-text, var(--color-text-primary));
    font-size: var(--panel-font-body-size, 0.9em);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.em-action-btn:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-medium);
}

.em-action-btn:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

.em-action-btn svg {
    flex-shrink: 0;
}

.em-action-btn-secondary {
    background: var(--panel-surface, var(--color-bg-primary));
    border: 1px solid var(--panel-border-strong, var(--color-border-light));
    color: var(--panel-text-muted, var(--color-text-secondary));
}

.em-action-btn-secondary:hover {
    background: var(--panel-surface-muted, var(--color-surface-4));
    border-color: var(--panel-border-strong, var(--color-border-light));
    color: var(--panel-text, var(--color-text-primary));
}

.em-action-btn-secondary svg {
    fill: currentColor;
}

.em-action-btn-primary {
    background: var(--panel-accent, var(--color-primary));
    border-color: var(--panel-accent, var(--color-primary));
    color: var(--panel-accent-contrast, var(--color-text-inverse));
}

.em-action-btn-primary:hover {
    background: var(--panel-accent-strong, var(--color-primary-dark));
    border-color: var(--panel-accent-strong, var(--color-primary-dark));
}

.em-action-btn-primary svg {
    fill: var(--color-text-inverse);
}

/* Event Manager Filter Active State (Red Fill) */
#emFilterBtn.active {
    background-color: var(--color-status-error-bg);
    border-color: var(--color-danger, #dc3545);
    color: var(--color-danger, #dc3545);
}

/* Event Library filter caret indicator when expanded */
.event-library-content #emFilterBtn {
    position: relative;
}

#emFilterBtn.active:hover {
    background-color: var(--color-status-error-bg);
    border-color: var(--color-danger, #dc3545);
}

#emFilterBtn.active svg {
    fill: var(--color-danger, #dc3545);
}

/* Digital Legacy Feature Buttons */
.event-manager-upgrade-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.em-upgrade-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.85em;
    font-weight: 500;
    border: 1px solid var(--color-border-medium);
    border-radius: 6px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.em-upgrade-btn:hover:not(.em-upgrade-locked) {
    background: var(--color-surface-4);
    border-color: var(--color-primary);
}

.em-upgrade-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary);
}

.em-upgrade-btn-text {
    white-space: nowrap;
}

/* Upgrade Badge */
.em-upgrade-badge {
    font-size: 0.65em;
    font-weight: 700;
    padding: 2px 5px;
    background: var(--color-warning);
    color: var(--color-text-primary);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-badge);
}

/* Locked Upgrade Buttons */
.em-upgrade-btn.em-upgrade-locked {
    opacity: 0.7;
    cursor: pointer; /* Still clickable to show upgrade prompt */
}

.em-upgrade-btn.em-upgrade-locked:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-medium);
}

/* Unlocked Upgrade Buttons - hide badge */
.em-upgrade-btn:not(.em-upgrade-locked) .em-upgrade-badge {
    display: none;
}

/* Filter active indicator */
.em-filter-indicator {
    color: var(--color-danger, #dc3545);
    font-size: 0.7em;
    margin-left: 2px;
    animation: pulse 2s infinite;
}

.em-upgrade-btn.em-filters-active {
    background-color: var(--color-status-error-bg);
    border-color: var(--color-danger, #dc3545);
    color: var(--color-danger, #dc3545);
}

.em-upgrade-btn.em-filters-active:hover {
    background-color: var(--color-status-error-bg);
    border-color: var(--color-danger, #dc3545);
}

.em-upgrade-btn.em-filters-active svg {
    fill: var(--color-danger, #dc3545);
}

/* Icon-only Upgrade Buttons */
.em-upgrade-btn.em-upgrade-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Filter sections */
.em-filter-section {
    margin-bottom: 20px;
}

.em-filter-label {
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.em-filter-control {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9em;
    border: 1px solid var(--color-border-medium);
    border-radius: 6px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.em-filter-control:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.em-filter-control::placeholder {
    color: var(--color-text-muted);
}

.em-filter-hint {
    font-size: 0.75em;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.em-filter-divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 16px 0;
}

/* Date range row */
.em-filter-date-row {
    display: flex;
    gap: 12px;
}

.em-filter-date-field {
    flex: 1;
}

.em-filter-date-field label {
    display: block;
    font-size: 0.75em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

/* Checkbox group */
.em-filter-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.em-filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    color: var(--color-text-primary);
    cursor: pointer;
}

.em-filter-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Saved views row */
.em-saved-views-row {
    display: flex;
    gap: 8px;
}

.em-saved-views-row select {
    flex: 1;
}

.em-filter-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border-medium);
    background: var(--color-bg-secondary);
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.2s;
    flex-shrink: 0;
}

.em-filter-icon-btn:hover {
    background: var(--color-surface-4);
    color: var(--color-text-primary);
    border-color: var(--color-primary);
}

.em-filter-icon-btn-danger:hover {
    background: var(--color-status-error-bg);
    color: var(--color-status-error);
    border-color: var(--color-status-error);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPORT MODAL STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.em-export-section {
    margin-bottom: 20px;
}

.em-export-label {
    display: block;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 10px;
}

.em-export-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.em-export-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-border-medium);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.em-export-radio-label:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-4);
}

.em-export-radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.em-export-radio-label input[type="radio"]:checked + span {
    color: var(--color-primary);
    font-weight: 500;
}

.em-export-radio-label span {
    font-size: 0.9em;
    color: var(--color-text-primary);
}

/* Visually hidden but accessible */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Table Container */
.event-manager-table-container {
    flex: 1;
    overflow: visible; /* Scroll is owned by tbody (rows list) */
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Event Library: no extra right inset; rows should align flush to the scrollbar edge */

/* When inside scroll body, table container expands to fit */
.event-library-scroll-body .event-manager-table-container {
    flex: 1 1 auto;
    /* Allow the table region to shrink when filter drawer expands (prevents clipping) */
    min-height: 0;
}

.event-manager-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    table-layout: fixed;
    /* Split header + body so only the body scrolls */
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.event-manager-table thead {
    background: var(--color-bg-secondary);
    flex: 0 0 auto;
    /* No sticky needed when tbody owns scrolling */
    position: relative;
    top: auto;
    z-index: auto;
    /* Align header columns with tbody when tbody shows/reserves a scrollbar gutter */
    padding-right: var(--em-scrollbar-width, 0px);
    box-sizing: border-box;
}

.event-manager-table tbody {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    scrollbar-gutter: stable;
    /* Extra space so the last row isn't obscured near the sticky footer */
    padding-bottom: 72px;
    box-sizing: border-box;
}

.event-manager-table thead,
.event-manager-table tbody {
    width: 100%;
}

.event-manager-table thead tr,
.event-manager-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.event-manager-table th {
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85em;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border-light);
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Numeric summary columns: center like Timeline Library */
.event-manager-table th.em-col-duration,
.event-manager-table td.em-col-duration,
.event-manager-table th.em-col-timelines,
.event-manager-table td.em-col-timelines,
.event-manager-table th.em-col-artifacts,
.event-manager-table td.em-col-artifacts,
.event-manager-table th.em-col-size,
.event-manager-table td.em-col-size {
    text-align: center !important;
}

.event-manager-table tbody tr {
    border-bottom: 1px solid var(--color-border-lighter);
    transition: background-color 0.15s;
}

.event-manager-table tbody tr:hover {
    background: var(--color-surface-4);
}

.event-manager-table td {
    padding: 10px 8px;
    color: var(--color-text-primary);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Match Timeline Library breathing room without insetting the scrollbar */
.event-manager-table td,
.event-manager-table th {
    padding-left: 14px;
    padding-right: 14px;
}

/* Column Widths - optimized for scanning with tighter padding */
/* Columns: checkbox | name | date | duration | timelines | artifacts | size */
.em-col-edge { width: 18px !important; min-width: 18px !important; max-width: 18px !important; padding: 0 !important; pointer-events: none; }
.em-col-checkbox { width: 40px !important; min-width: 40px !important; max-width: 40px !important; text-align: center !important; padding: 8px 4px !important; }
.em-col-title { width: auto !important; min-width: 132px !important; }
.em-col-date { width: 104px !important; min-width: 104px !important; max-width: 104px !important; }
.em-col-duration { width: 114px !important; min-width: 114px !important; max-width: 114px !important; }
.em-col-timelines { width: 114px !important; min-width: 114px !important; max-width: 114px !important; }
.em-col-artifacts { width: 114px !important; min-width: 114px !important; max-width: 114px !important; }
.em-col-narrated { width: 104px !important; min-width: 104px !important; max-width: 104px !important; }
.em-narrated-indicator { color: var(--color-text-muted); font-size: 0.85em; }
.em-col-size { width: 104px !important; min-width: 104px !important; max-width: 104px !important; }
.em-col-visibility { width: 112px !important; min-width: 112px !important; max-width: 112px !important; }
.em-col-effective { width: 112px !important; min-width: 112px !important; max-width: 112px !important; }
.em-col-status { width: 64px !important; min-width: 64px !important; max-width: 64px !important; text-align: center !important; }
.em-col-edit { width: 48px !important; min-width: 48px !important; max-width: 48px !important; text-align: center !important; }
th.em-col-edit,
td.em-col-edit { 
    text-align: center;
    vertical-align: middle;
}

th.em-col-status,
td.em-col-status {
    text-align: center !important;
}

th.em-col-narrated,
td.em-col-narrated {
    text-align: center !important;
}

.event-manager-table td.em-col-status {
    padding: 8px 4px;
}

.event-manager-table th.em-col-status {
    padding: 12px 4px;
}

/* Center the action button within the cell */
td.em-col-edit {
    padding: 8px 4px;
}
td.em-col-edit .em-action-btn-icon {
    margin: 0 auto;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.em-event-row:hover td.em-col-edit .em-action-btn-icon {
    opacity: 1;
}

/* Match the Attachments Library “view” button in the action column */
td.em-col-edit .am-action-btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 0.85em;
    font-weight: normal;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

td.em-col-edit .am-action-btn-text:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-medium);
    color: var(--color-text-primary);
}

/* Text truncation for long content */
.em-col-title {
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Event name cell can show a mobile-only meta line */
.event-manager-table td.em-col-title {
    white-space: normal;
    overflow: visible;
}

.em-name-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.em-name-primary {
    font-weight: 500;
    overflow: hidden;
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
    max-height: 3.9em;
}

.em-archived-age {
    font-size: 0.78em;
    line-height: 1.2;
    color: var(--color-text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.em-name-meta {
    display: none;
    font-size: 0.78em;
    line-height: 1.2;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.em-deleted-row {
    opacity: 0.55;
}

.em-deleted-row:hover {
    opacity: 0.7;
}

/* Notes/description column - clean truncation with ellipsis */
.em-col-description {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
    font-size: 0.95em;
}

/* Timeline and category columns */
.em-col-timeline {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tags/category column - pill container */
.em-col-category {
    max-width: 180px;
    overflow: visible;
    white-space: normal;
}

/* Event Manager tag pills container */
.em-tags-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    min-width: 0;
}

/* Event Manager tag pill */
.em-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #e3f2fd;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Event Manager tag overflow pill */
.em-tag-overflow {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: var(--color-overlay-dark-10);
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
    cursor: default;
    flex-shrink: 0;
}

/* Event Manager no tags state */
.em-tag-none {
    color: var(--color-text-muted);
    font-size: 0.9em;
}

/* Event Library footer - sticky bottom with close button */
.event-library-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    border-top: 1px solid var(--panel-border-strong, var(--color-border-medium));
    background: var(--panel-surface, var(--color-bg-primary));
    flex-shrink: 0;
    border-radius: 0 0 var(--panel-radius-lg, 20px) var(--panel-radius-lg, 20px);
}

/* Event Library scroll body and sticky footer */
.event-library-scroll-body {
    flex: 1 1 0;
    /* Keep scrolling off the modal shell/header; the list itself scrolls */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0; /* Table will have its own spacing */
    min-height: 0;
}

.event-library-sticky-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--panel-border-strong, var(--color-border-medium));
    border-radius: 0 0 var(--panel-radius-lg, 20px) var(--panel-radius-lg, 20px);
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    background: var(--panel-surface, var(--color-bg-primary));
}

.event-library-sticky-footer .c-modal-footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
}

.event-library-footer-meta {
    font-size: 0.85em;
    color: var(--color-text-muted);
    font-weight: 500;
    flex: 0 0 auto;
    background: transparent;
}

/* Bulk bar in the sticky footer - left-aligned */
.event-library-sticky-footer .event-manager-bulk-bar {
    flex: 0 1 auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
    justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE LIBRARY MODAL - Centered modal with backdrop for timeline management
   ═══════════════════════════════════════════════════════════════════════════ */

.timeline-library-modal {
    z-index: var(--z-modal-nested);
    overflow: hidden;
}

.timeline-library-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure the sheet never touches viewport edges (iPad + small widths) */
    padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .timeline-library-modal.show {
        padding: calc(40px + env(safe-area-inset-top, 0px)) 24px calc(40px + env(safe-area-inset-bottom, 0px));
    }
}

/* Timeline Library content - large centered modal */
.timeline-library-content {
    background: var(--panel-surface, var(--color-bg-primary));
    width: 100%;
    /* Match Event Library sheet width */
    max-width: 1040px;
    height: 85vh;
    /* Respect the overlay padding instead of hard viewport math */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    cursor: default;
    overflow: hidden;
    border-radius: var(--panel-radius-lg, 20px);
    box-shadow: var(--panel-shadow, var(--shadow-xl));
}

/* Desktop: align library modal sheet height with Account modal height contract. */
@media (min-width: 641px) {
    :root {
        --yrh-desktop-primary-modal-height: min(640px, calc(100vh - (80px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
    }

    #timelineLibraryModal .timeline-library-content,
    #timelineLibraryModal .tl-modal-content,
    #eventManagerModal .event-library-content,
    #eventManagerModal .event-manager-content,
    #userDocumentsModal .attachments-manager-content.modal-content.c-modal-size-lg-scroll {
        height: var(--yrh-desktop-primary-modal-height);
        max-height: var(--yrh-desktop-primary-modal-height);
    }
}

/* Timeline Library uses standard c-modal-header pattern */
.timeline-library-content .c-modal-header {
    flex-shrink: 0;
    border-radius: var(--panel-radius-lg, 20px) var(--panel-radius-lg, 20px) 0 0;
    margin: 0;
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
}

.timeline-library-content .c-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.timeline-library-content .tl-header-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 120px;
}

.timeline-library-content .tl-header-search {
    height: var(--panel-button-height, 36px);
    padding: 6px 10px;
    border: 1px solid var(--color-border-medium);
    border-radius: 8px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 0.85em;
    min-width: 220px;
}

.timeline-library-content .tl-header-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Show deleted inline checkbox */
.tl-show-deleted-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

/* Timeline count in footer */
.tl-timeline-count {
    font-size: 0.85em;
    color: var(--color-text-secondary);
    padding-left: 4px;
}

/* Timeline Library Action Buttons */
.tl-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--panel-button-gap, 6px);
    padding: var(--panel-button-padding-y, 8px) var(--panel-button-padding-x, 14px);
    height: var(--panel-button-height, 36px);
    box-sizing: border-box;
    border: 1px solid var(--panel-border-strong, var(--color-border-light));
    border-radius: var(--panel-button-radius, 8px);
    background: var(--panel-surface, var(--color-bg-primary));
    color: var(--panel-text, var(--color-text-primary));
    font-size: var(--panel-font-body-size, 0.9em);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tl-action-btn:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-medium);
}

.tl-action-btn:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

.tl-action-btn svg {
    flex-shrink: 0;
}

.tl-action-btn-secondary {
    background: var(--panel-surface, var(--color-bg-primary));
    border: 1px solid var(--panel-border-strong, var(--color-border-light));
    color: var(--panel-text-muted, var(--color-text-secondary));
}

.tl-action-btn-secondary:hover {
    background: var(--panel-surface-muted, var(--color-surface-4));
    border-color: var(--panel-border-strong, var(--color-border-light));
    color: var(--panel-text, var(--color-text-primary));
}

.tl-action-btn-secondary svg {
    fill: currentColor;
}

.tl-action-btn.tl-action-btn-icon-only {
    width: 36px;
    padding: 0;
    justify-content: center;
}

/* Timeline Library Filter Active State */
#tlFilterBtn.active {
    background-color: var(--color-status-error-bg);
    border-color: var(--color-danger, #dc3545);
    color: var(--color-danger, #dc3545);
}

#tlFilterBtn.active:hover {
    background-color: var(--color-status-error-bg);
    border-color: var(--color-danger, #dc3545);
}

#tlFilterBtn.active svg {
    fill: var(--color-danger, #dc3545);
}

/* Timeline Library Filter Drawer */
.timeline-library-content .tl-filter-drawer {
    flex-shrink: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 220ms ease, opacity 160ms ease, transform 220ms ease;
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    background: var(--panel-surface, var(--color-bg-primary));
}

.timeline-library-content .tl-filter-drawer.is-open {
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
    overflow: visible;
}

.timeline-library-content .tl-filter-drawer-inner {
    /* Extra right padding prevents content from sitting under the absolute-positioned clear button */
    padding: 10px calc(var(--panel-space-6, 24px) + 72px) 12px var(--panel-space-6, 24px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.timeline-library-content .tl-filter-drawer-row-1 {
    display: grid;
    /* Keep groups on the left; reserve remaining space to the right */
    grid-template-columns: max-content max-content 1fr;
    column-gap: 28px;
    row-gap: 14px;
    align-items: start;
}

@media (max-width: 860px) {
    .timeline-library-content .tl-filter-drawer-row-1 {
        grid-template-columns: 1fr;
    }
}

.timeline-library-content .tl-filter-clear {
    position: absolute;
    top: 12px;
    right: 20px;
    z-index: 1;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.8em;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-family-base);
}

.timeline-library-content .tl-filter-clear:hover:not(:disabled) {
    color: var(--color-primary);
    text-decoration: underline;
}

.timeline-library-content .tl-filter-clear:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

.timeline-library-content .tl-filter-clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.timeline-library-content .tl-filter-field-full {
    width: 100%;
}

.timeline-library-content .tl-filter-label {
    display: block;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.timeline-library-content .tl-filter-control {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.85em;
    border: 1px solid var(--color-border-medium);
    border-radius: 6px;
    background: var(--color-surface-1, var(--color-bg-primary));
    color: var(--color-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.timeline-library-content .tl-filter-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.timeline-library-content .tl-filter-control::placeholder {
    color: var(--color-text-muted);
}

.timeline-library-content .tl-filter-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.timeline-library-content .tl-filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    color: var(--color-text-primary);
    cursor: pointer;
}

.timeline-library-content .tl-filter-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.timeline-library-content .tl-filter-tags-box {
    border: 1px solid var(--color-border-medium);
    border-radius: 10px;
    background: #f8f8f8;
    padding: 10px;
    height: 92px; /* ~2 rows of chips */
    min-height: 92px;
    max-height: 92px;
    overflow-y: auto;
}

.timeline-library-content .tl-filter-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}


.timeline-library-content .tl-filter-tags-empty {
    font-size: 0.85em;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Timeline Library Scroll Body and Table */
.timeline-library-scroll-body {
    flex: 1 1 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
}

.timeline-library-table-container {
    flex: 1;
    overflow: visible;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.timeline-library-scroll-body .timeline-library-table-container {
    flex: 1 1 auto;
    /* Allow the table region to shrink when filter drawer expands (prevents clipping) */
    min-height: 0;
}

.timeline-library-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    table-layout: fixed;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.timeline-library-table thead {
    background: transparent;
    flex: 0 0 auto;
    position: relative;
    top: auto;
    z-index: auto;
    box-shadow: none;
    display: block;
    overflow-y: hidden;
    overflow-x: hidden;
    padding-right: var(--tl-scrollbar-width, 0px);
    box-sizing: border-box;
}

.timeline-library-table thead::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--tl-scrollbar-width, 0px);
    height: 1px;
    background: var(--panel-border-strong, var(--color-border-medium));
    pointer-events: none;
}

.timeline-library-table tbody {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    scrollbar-gutter: stable;
    /* Extra space so the last row isn't obscured near the sticky footer */
    padding-bottom: 72px;
    box-sizing: border-box;
}

.timeline-library-table thead,
.timeline-library-table tbody {
    width: 100%;
}

.timeline-library-table thead tr,
.timeline-library-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.timeline-library-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 700;
    font-size: 0.9em;
    letter-spacing: 0.01em;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--panel-border-strong, var(--color-border-medium));
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-library-table tbody tr {
    border-bottom: 1px solid var(--color-border-lighter);
    transition: background-color 0.15s;
}

.timeline-library-table tbody tr:hover {
    background: var(--color-brand-primary-08);
}

.timeline-library-table td {
    padding: 8px 8px;
    color: var(--color-text-primary);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Timeline name cell: allow a second line (subtext) */
.timeline-library-table td.tl-col-name {
    white-space: normal;
    overflow: visible;
}

.tl-name-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tl-name-primary {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-name-subtext {
    font-size: 0.78em;
    line-height: 1.2;
    color: var(--color-text-muted);
    font-style: italic;
    white-space: nowrap;
}

/* Ensure all header labels are left aligned except events */
.timeline-library-table th,
.timeline-library-table td {
    text-align: left !important;
}

/* Timeline Library Column Widths */
.tl-col-spacer { width: 20px !important; min-width: 20px !important; max-width: 20px !important; padding: 0 !important; }
.tl-col-name { width: auto !important; min-width: 96px !important; }
.tl-col-events { width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
/* Keep compact but fully readable (header + badge text) */
.tl-col-visibility { width: 96px !important; min-width: 96px !important; max-width: 96px !important; }
/* Date range column */
.tl-col-daterange { width: 244px !important; min-width: 244px !important; max-width: 244px !important; font-size: 0.85em; color: var(--color-text-secondary); white-space: nowrap; }
.tl-col-narrated { width: 104px !important; min-width: 104px !important; max-width: 104px !important; }
/* Artifact count + size columns */
.tl-col-artifacts { width: 118px !important; min-width: 118px !important; max-width: 118px !important; }
.tl-col-artifactsize { width: 104px !important; min-width: 104px !important; max-width: 104px !important; font-size: 0.85em; color: var(--color-text-secondary); white-space: nowrap; }
.tl-narrated-indicator { color: var(--color-text-muted); font-size: 0.85em; }
/* Year span sub-label in date range */
.tl-year-span { font-size: 0.88em; opacity: 0.7; }

/* Timeline Library: date range when a timeline has no events */
.tl-daterange-empty { font-style: italic; }

/* Per-column text alignment — use table-qualified selectors to beat the global left override */
.timeline-library-table th.tl-col-events,
.timeline-library-table td.tl-col-events,
.timeline-library-table th.tl-col-narrated,
.timeline-library-table td.tl-col-narrated,
.timeline-library-table th.tl-col-artifacts,
.timeline-library-table td.tl-col-artifacts,
.timeline-library-table th.tl-col-artifactsize,
.timeline-library-table td.tl-col-artifactsize {
    text-align: center !important;
}

.timeline-library-table th.tl-col-name,
.timeline-library-table th.tl-col-visibility,
.timeline-library-table th.tl-col-daterange,
.timeline-library-table td.tl-col-daterange {
    text-align: left !important;
}

/* Extra cell padding for breathing room */
.timeline-library-table td,
.timeline-library-table th {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* Inline restore button inside name cell for deleted timelines */
.tl-inline-restore {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.8em;
}

/* Timeline Library Tag Pills */
.tl-tags-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    min-width: 0;
}

.tl-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: var(--color-brand-primary-10, #e3f2fd);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    font-size: 0.78em;
    color: var(--color-text-primary);
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.tl-tag-overflow {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: var(--color-brand-primary-10, #e3f2fd);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    font-size: 0.74em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    cursor: default;
    flex-shrink: 0;
}

.tl-tag-none {
    color: var(--color-text-muted);
    font-size: 0.85em;
}

/* Timeline Library Visibility Badge */
.tl-visibility-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0.88;
}

.tl-visibility-private {
    background: var(--color-surface-4);
    color: var(--color-text-muted);
}

/* Timeline Library Status Toggle (matches Event Library) */
.tl-status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    user-select: none;
}

.tl-status-checkbox {
    display: none;
}

.tl-status-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--color-border-medium);
    border-radius: 10px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.tl-status-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.tl-status-checkbox:checked + .tl-status-slider {
    background: var(--color-status-success, #4caf50);
}

.tl-status-checkbox:checked + .tl-status-slider::before {
    transform: translateX(16px);
}


th.tl-col-daterange,
td.tl-col-daterange {
    text-align: left !important;
}

/* Timeline Library Row States */
.tl-timeline-row {
    cursor: pointer;
}

.timeline-library-content .tl-timeline-row:hover {
    background: var(--color-brand-primary-08);
}

.timeline-library-content .tl-timeline-row:active {
    background: var(--color-brand-primary-08);
}

.tl-inactive-row {
    opacity: 0.6;
}

.tl-inactive-row:hover {
    opacity: 0.8;
}

.tl-deleted-row {
    opacity: 0.55;
}

.tl-deleted-row:hover {
    opacity: 0.7;
}

.tl-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    border: 1px solid transparent;
}

.tl-status-deleted {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.18);
    color: rgba(239, 68, 68, 0.90);
}

.tl-deleted-age {
    margin-top: 2px;
}

/* Timeline Library Checkbox Column */
th.tl-col-checkbox {
    text-align: center !important;
}

th.tl-col-checkbox input[type="checkbox"],
td.tl-col-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary, #3b82f6);
    margin: 0 auto;
    display: block;
}

/* Timeline Library Sticky Footer */
.timeline-library-sticky-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    border-top: 1px solid var(--panel-border-strong, var(--color-border-medium));
    background: var(--panel-surface, var(--color-bg-primary));
    flex-shrink: 0;
    border-radius: 0 0 var(--panel-radius-lg, 20px) var(--panel-radius-lg, 20px);
}

.timeline-library-sticky-footer .c-modal-footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
}

/* Bulk bar in the sticky footer - match event library */
.timeline-library-sticky-footer .event-manager-bulk-bar {
    flex: 0 1 auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
    justify-content: flex-start;
}

.tl-footer-info {
    font-size: 0.9em;
    color: var(--color-text-muted);
    font-weight: 500;
}

.tl-timeline-count {
    font-weight: 500;
}

/* Timeline Library Empty State */
.tl-empty-row td {
    padding: 60px 20px;
}

.tl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}

.tl-empty-icon {
    font-size: 3em;
    margin-bottom: 8px;
}

.tl-empty-message {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tl-empty-subtext {
    font-size: 0.9em;
    color: var(--color-text-muted);
}

/* Timeline Library Loading State */
.tl-loading-row td {
    padding: 60px 20px;
}

.tl-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-text-muted);
}

.tl-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: tl-spin 0.8s linear infinite;
}

@keyframes tl-spin {
    to { transform: rotate(360deg); }
}

/* Timeline Library Error State */
.tl-special-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 40px;
    max-width: 400px;
}

.tl-special-state-icon {
    font-size: 3em;
    margin-bottom: 16px;
}

.tl-special-state h3 {
    margin: 0 0 8px 0;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tl-special-state p {
    margin: 0 0 24px 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE PICKER SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Timeline picker reuses the section-header pattern for the "views" dropdown.
 * These styles used to live under group UI; keep a scoped copy here so the
 * picker stays visually stable without reviving group-specific UI.
 */
.timeline-picker-content .group-section-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
}

.timeline-picker-content .group-section-chevron {
    flex: 0 0 auto;
    transition: transform var(--transition-fast, 0.15s ease);
}

.timeline-picker-content .group-section-header.collapsed .group-section-chevron {
    transform: rotate(-90deg);
}

.timeline-picker-views {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

.timeline-picker-views-title {
    font-size: 0.75rem;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6b7280);
    padding: 2px 0 0 0;
}

.timeline-picker-views-header-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

.timeline-picker-views-label {
    font-size: 0.7rem;
    color: var(--text-muted, #6b7280);
    margin-left: 4px;
    font-weight: 500;
    white-space: nowrap;
}

/* View rows: lighter, text-first controls */
.timeline-picker-view-row .sl-left {
    display: none;
}

.timeline-picker-view-row {
    padding: 6px 20px 6px 28px;
}

.timeline-picker-view-row.sl-selected {
    background: rgba(47, 128, 237, 0.06);
}

.timeline-picker-views-list .timeline-picker-view-row:first-child {
    margin-top: 10px;
}

.timeline-picker-views-list {
    padding: 0 0 12px;
}


.timeline-picker-views-header:hover {
    background: rgba(0,0,0,0.04);
}


.timeline-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 16px 16px;
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

.timeline-picker-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeline-picker-custom-checkbox {
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ATTACHMENTS LIBRARY STICKY FOOTER (matches Event Library)
   ═══════════════════════════════════════════════════════════════════════════ */

.attachments-manager-sticky-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
    border-top: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    background: var(--panel-surface, var(--color-bg-primary));
}

.attachments-manager-sticky-footer .c-modal-footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
}

.attachments-manager-footer-meta {
    font-size: 0.85em;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Bulk bar in the sticky footer - left-aligned */
.attachments-manager-sticky-footer .event-manager-bulk-bar {
    flex: 0 1 auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
    justify-content: flex-start;
}

/* Legacy footer styles for backwards compatibility */
.event-library-content .event-manager-footer,
.event-manager-content .event-manager-footer {
    border-radius: 0 0 var(--panel-radius-lg, 20px) var(--panel-radius-lg, 20px);
}

.event-manager-footer-info {
    font-size: 0.9em;
    color: var(--color-text-muted);
    font-weight: 500;
}

.event-manager-footer-actions {
    display: flex;
    gap: 10px;
}

/* Special States: No Timelines, Error */
.em-special-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 40px;
    max-width: 400px;
}

.em-special-state-icon {
    font-size: 3em;
    margin-bottom: 16px;
}

.em-special-state h3 {
    margin: 0 0 8px 0;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--color-text-primary);
}

.em-special-state p {
    margin: 0 0 24px 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.em-special-state .btn {
    min-width: 180px;
}

.em-error-special-state h3 {
    color: var(--color-status-error);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .em-header-title-row {
        padding: 12px 16px 8px 16px;
    }

    .em-header-toolbar {
        padding: 4px 16px 8px 16px;
        gap: 8px;
    }

    .em-timeline-selector select {
        min-width: 130px;
    }

    .event-manager-table {
        font-size: 0.9em;
    }

    .event-manager-table th,
    .event-manager-table td {
        padding: 10px 12px;
    }

    /* Hide less important columns on smaller screens */
    .em-col-description {
        display: none;
    }
}

@media (max-width: 768px) {
    .event-manager-header h2 {
        font-size: 1.2em;
    }

    .event-manager-subtitle {
        display: none;
    }

    .em-header-toolbar {
        flex-wrap: wrap;
    }
    
    .em-toolbar-left {
        flex-wrap: wrap;
    }
    
    .em-toolbar-right {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .em-action-btn {
        height: 32px;
        padding: 6px 10px;
    }

    .em-action-btn span {
        display: none;
    }

    .em-col-category,
    .em-col-visibility,
    .em-col-effective,
    .em-col-timeline,
    .em-col-status,
    .em-col-duration,
    .em-col-timelines,
    .em-col-artifacts,
    .em-col-narrated,
    .em-col-size {
        display: none;
    }

    .em-name-meta {
        display: block;
    }

    .em-col-title { width: 45%; }
    .em-col-date { width: 25%; }
    .em-col-edit { width: 30%; }
    
    /* Hide search on very small screens */
    .c-toolbar-search {
        display: none;
    }
    
    .em-upgrade-btn {
        padding: 6px 10px;
        font-size: 0.8em;
    }
    
    .em-upgrade-btn-text {
        display: none;
    }
    
    .em-upgrade-btn span:first-child {
        font-size: 1.1em;
    }
}

/* Loading State */
.em-loading-row td {
    background: var(--color-bg-secondary);
}

.em-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: var(--color-text-muted);
}

.em-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: am-spin 0.8s linear infinite;
}

/* Empty State */
.em-empty-row td,
.em-error-row td {
    background: var(--color-bg-secondary);
}

.em-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 8px;
}

.em-empty-icon {
    font-size: 2.5em;
    opacity: 0.5;
    margin-bottom: 8px;
}

.em-empty-message {
    font-size: 1.1em;
    color: var(--color-text-primary);
}

.em-empty-subtext {
    font-size: 0.9em;
    color: var(--color-text-muted);
}

/* Error State */
.em-error-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: var(--color-status-error);
}

/* Event Row Styling */
.em-event-row {
    cursor: default;
}

.em-event-row:hover {
    background: var(--color-surface-4);
}

.em-event-row.em-inactive-row {
    opacity: 0.6;
}

.em-col-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.em-col-description {
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.em-col-category {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Visibility Badge */
/* Event Library - soften status toggles for calm scanning */
.event-library-content .tm-status-toggle {
    gap: 6px;
}

.event-library-content .tm-status-slider {
    width: 32px;
    height: 18px;
    background: var(--color-border-light);
}

.event-library-content .tm-status-slider::before {
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
    box-shadow: 0 1px 2px var(--color-overlay-dark-10);
}

.event-library-content .tm-status-checkbox:checked + .tm-status-slider {
    background: var(--color-status-success);
    opacity: 0.85;
}

.event-library-content .tm-status-label {
    font-size: 0.75em;
    min-width: 44px;
    color: var(--color-text-muted);
}

.event-library-content .tm-status-label.active {
    color: var(--color-text-secondary);
}

/* Table Row Action Buttons (edit icons in table rows - scoped to not override header toolbar) */
.em-event-row .em-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s;
    padding: 0;
    gap: 0;
}

.em-event-row .em-action-btn:hover {
    background: var(--color-surface-4);
}

.em-event-row .em-action-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECTION & BULK ACTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Checkbox Column */
.em-col-checkbox {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    text-align: center !important;
    padding: 8px 4px !important;
}

/* Center the checkbox in the header cell */
th.em-col-checkbox {
    text-align: center !important;
}

th.em-col-checkbox input[type="checkbox"],
td.em-col-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary, #3b82f6);
    margin: 0 auto;
    display: block;
}

/* Selected Row State */
.em-row-selected {
    background-color: var(--color-brand-primary-08) !important;
}

.em-row-selected:hover {
    background-color: var(--color-brand-primary-10) !important;
}

/* Bulk Action Bar */
.event-manager-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: var(--color-bg-secondary);
    box-shadow: inset 0 1px 0 var(--color-border-light);
    flex-shrink: 0;
    gap: 16px;
}

.em-bulk-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.em-bulk-count {
    font-weight: 600;
    color: var(--color-primary, #3b82f6);
    font-size: 0.95em;
}

.em-bulk-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--color-text-primary);
    transition: all 0.2s;
    white-space: nowrap;
}

.em-bulk-clear-btn:hover {
    background: var(--color-surface-4);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.em-bulk-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.em-bulk-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--color-text-primary);
    transition: all 0.2s;
    white-space: nowrap;
}

.em-bulk-action-btn:hover {
    background: var(--color-surface-4);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.em-bulk-action-btn span {
    font-size: 1em;
}

.em-bulk-action-danger {
    color: var(--color-status-error);
    border-color: var(--color-status-error);
    opacity: 0.7;
}

.em-bulk-action-danger:hover {
    background: var(--color-status-error-bg);
    border-color: var(--color-status-error);
    color: var(--color-status-error);
    opacity: 1;
}

.event-manager-bulk-bar.command-rail.is-disabled .em-bulk-action-btn,
.event-manager-bulk-bar.command-rail.is-disabled .em-bulk-clear-btn,
.event-manager-bulk-bar.command-rail .em-bulk-action-btn:disabled,
.event-manager-bulk-bar.command-rail .em-bulk-clear-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-bg-primary);
    border-color: var(--color-border-light);
    color: var(--color-text-muted);
}

.event-manager-bulk-bar.command-rail.is-disabled {
    color: var(--color-text-muted);
}

.event-manager-bulk-bar.command-rail.is-disabled .em-bulk-count {
    color: var(--color-text-muted);
}

.event-manager-bulk-bar.command-rail.is-disabled .em-bulk-action-btn:hover,
.event-manager-bulk-bar.command-rail.is-disabled .em-bulk-clear-btn:hover {
    background: var(--color-bg-primary);
    border-color: var(--color-border-light);
    color: var(--color-text-muted);
}

/* Responsive adjustments for bulk bar */
@media (max-width: 900px) {
    .event-manager-bulk-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
    }

    .em-bulk-bar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .em-bulk-action-btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.8em;
    }

    .em-bulk-action-btn span {
        display: none;
    }
}

@media (max-width: 600px) {
    .em-bulk-bar-actions {
        flex-wrap: wrap;
    }

    .em-bulk-action-btn {
        flex: 0 1 auto;
        font-size: 0.75em;
        padding: 6px 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EDIT EVENT SLIDE-OUT PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.em-edit-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    max-width: 100%;
    height: 100%;
    background: var(--color-bg-primary);
    box-shadow: -4px 0 20px var(--color-overlay-dark-15);
    display: flex;
    flex-direction: column;
    z-index: var(--z-modal-bulk-upload);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    will-change: transform;
}

/* Attachments Edit Panel tabs (match Event Details Card styling) */
#attachmentsEditPanel .event-card-tabs {
    padding: 0 20px;
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
}

#attachmentsEditPanel .event-card-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--panel-space-3, 12px) var(--panel-space-4, 16px);
    font-size: var(--panel-font-body-size, 1rem);
}

#attachmentsEditPanel .c-modal-scroll-body {
    padding: 24px;
}

/* About tab: slightly tighter padding to avoid outer scroll */
#attachmentsEditPanel[data-active-tab="about"] .c-modal-scroll-body {
    padding: 18px;
}

.attachments-edit-tab-panel {
    padding: 0;
}

#attachmentEditTabDetails {
    padding: 0;
}

/* Artifacts modal — About notes:
   - View mode uses read-only text (no textarea scroll behavior)
   - Edit mode uses textarea with scrolling as needed */
#attachmentsEditPanel #artifactNotesPanel.edc-about-description-card--view.is-empty {
    overflow-y: hidden;
}

#attachmentsEditPanel #artifactNotesPanel.edc-about-description-card--fixed .edc-description-textarea {
    overflow: auto;
}

/* Artifacts modal — About notes: reduce card height so About tab fits without scrolling */
#attachmentsEditPanel #artifactNotesPanel.edc-about-description-card--view,
#attachmentsEditPanel #artifactNotesPanel.edc-about-description-card--fixed {
    height: 170px;
}

@media (min-width: 769px) {
    #attachmentsEditPanel #artifactNotesPanel.edc-about-description-card--view,
    #attachmentsEditPanel #artifactNotesPanel.edc-about-description-card--fixed {
        height: 170px;
    }
}

/* Artifacts modal — About tab: single artifact preview tile
   Match Artifacts tab tiles: square with rounded corners (NOT circles). */
#attachmentsEditPanel .artifact-about-preview-wrap {
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

#attachmentsEditPanel .artifact-about-preview-tile {
    width: clamp(96px, 12vh, 130px);
    max-width: 100%;
}

/* Ensure the image fits entirely (no zoom/crop) inside the square tile */
#attachmentsEditPanel .artifact-about-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--color-bg-secondary);
}

/* Document preview: centered icon + small type label */
#attachmentsEditPanel .artifact-about-preview-doc-icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
}

#attachmentsEditPanel .artifact-about-preview-doc-icon svg {
    width: 22px;
    height: 22px;
}

#attachmentsEditPanel .artifact-about-preview-doc-ext {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1;
    pointer-events: none;
}

#attachmentsEditPanel .artifact-usage-details-card {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    background: var(--color-bg-primary);
}

#attachmentsEditPanel .artifact-usage-details-title {
    margin: 0 0 10px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

#attachmentsEditPanel .artifact-usage-details-grid {
    display: grid;
    gap: 8px;
}

#attachmentsEditPanel .artifact-usage-details-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#attachmentsEditPanel .artifact-usage-details-label {
    color: var(--color-text-secondary);
    font-size: 0.92rem;
}

#attachmentsEditPanel .artifact-usage-details-value {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    font-weight: 500;
}

#attachmentsEditPanel .artifact-relationship-row--missing .edc-timeline-row-name,
#attachmentsEditPanel .artifact-relationship-row--missing .edc-timeline-row-label {
    color: var(--color-text-secondary);
}

#attachmentsEditPanel .artifact-relationship-row__badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
    vertical-align: middle;
}

/* Attachments Details tab: match Timeline details hero placement (left details, right hero preview) */
#attachmentsEditPanel #attachmentEditTabDetails .attachment-details-view-columns {
    grid-template-columns: 1fr 240px;
}

#attachmentsEditPanel #attachmentEditTabDetails .event-card-detail-section {
    max-width: none;
}

#attachmentsEditPanel #attachmentEditTabDetails .edc-details-view-right {
    padding-top: 4px;
}

#attachmentsEditPanel #attachmentEditTabDetails .edc-details-view-right .attachment-details-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
}

/* Square hero preview, like Timeline hero photo */
#attachmentsEditPanel #attachmentEditTabDetails .edc-details-view-right .attachment-details-preview {
    width: 240px;
    height: 240px;
}

/* ─── Attachment Notes Tab ─── */
#attachmentEditTabNotes {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    height: 100%;
}

.attachment-notes-tab {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding: 0;
    gap: 8px;
}

.attachment-notes-textarea {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding: 12px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95em;
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    transition: border-color 0.2s ease;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
}

.attachment-notes-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* View mode: notes textarea looks read-only */
#attachmentEditTabNotes.is-view-mode .attachment-notes-textarea {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-light);
    cursor: default;
}

/* Edit mode: notes textarea is editable */
#attachmentEditTabNotes.is-edit-mode .attachment-notes-textarea {
    background: var(--color-bg-primary);
    cursor: text;
}

.attachment-notes-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.attachment-notes-char-count {
    font-size: 0.8em;
    color: var(--color-text-muted);
}

/* Attachments Details tab: view mode should look like the event details display, not inputs */
#attachmentEditTabDetails.is-view-mode .attachments-edit-input {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
    height: auto;
    line-height: 1.4;
    cursor: default;
}

/* Hide filename row in view mode (it's already shown in the panel title) */
#attachmentEditTabDetails.is-view-mode #attachmentEditFileNameGroup {
    display: none;
}

#attachmentEditTabDetails.is-view-mode .attachments-edit-input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

/* Hide the tag input controls in view mode; show chips only */
#attachmentEditTabDetails.is-view-mode .edc-chip-input-wrapper {
    display: none;
}


/* ─── Attachment Details: Preview tile ─── */

#attachmentsEditPanel .attachment-details-preview {
    width: 100%;
    height: 220px;
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    background: var(--color-bg-secondary);
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#attachmentsEditPanel .attachment-details-preview:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
    border-color: var(--color-primary);
}

#attachmentsEditPanel .attachment-details-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#attachmentsEditPanel .attachment-details-preview-doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-text-secondary);
    padding: 16px;
    text-align: center;
}

#attachmentsEditPanel .attachment-details-preview-doc .attachment-details-preview-doc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
}

#attachmentsEditPanel .attachment-details-preview-doc .attachment-details-preview-doc-label {
    font-size: 0.95em;
    color: var(--color-text-primary);
    word-break: break-word;
}

#attachmentsEditPanel .attachment-details-preview-doc .attachment-details-preview-doc-meta {
    font-size: 0.8em;
    color: var(--color-text-muted);
}

#attachmentsEditPanel .attachment-details-preview-empty {
    font-size: 0.95em;
    color: var(--color-text-muted);
}

/* ─── Attachment Details: Inline PDF preview (documents only) ─── */
#attachmentsEditPanel .attachment-details-pdf-preview {
    width: 100%;
    height: min(420px, 55vh);
    max-height: 420px;
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    background: var(--color-bg-primary);
    overflow: hidden;
}

#attachmentsEditPanel .attachment-details-pdf-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ─── Attachment Details: Non-PDF document fallback card ─── */
#attachmentsEditPanel .attachment-details-doc-file-card {
    width: 100%;
    min-height: 220px;
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    background: var(--color-bg-secondary);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

#attachmentsEditPanel .attachment-details-doc-file-card .attachment-details-doc-file-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#attachmentsEditPanel .attachment-details-doc-file-card .attachment-details-doc-file-icon svg {
    width: 24px;
    height: 24px;
}

#attachmentsEditPanel .attachment-details-doc-file-card .attachment-details-doc-file-type {
    font-size: 1.0em;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
}

#attachmentsEditPanel .attachment-details-doc-file-card .attachment-details-doc-file-meta {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

#attachmentsEditPanel .attachment-details-doc-file-card .attachment-details-doc-file-download {
    width: 100%;
    max-width: 220px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Match event-details edit button styling inside attachments modal */
#attachmentsEditPanel .c-modal-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--panel-space-2, 8px);
    height: var(--panel-button-height, 36px);
    padding: 0 var(--panel-space-4, 16px);
    border: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    border-radius: var(--panel-button-radius, 8px);
    background: var(--panel-surface-subtle, var(--color-bg-secondary));
    color: var(--panel-text, var(--color-text-primary));
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    outline: none;
}

#attachmentsEditPanel .c-modal-edit-btn:hover,
#attachmentsEditPanel .c-modal-edit-btn:focus-visible {
    background: var(--panel-surface-strong, var(--color-bg-tertiary));
    border-color: var(--panel-border, var(--color-border-light));
    box-shadow: 0 0 0 2px var(--panel-accent, var(--color-primary));
}

#attachmentEditTabEvents {
    padding: 0;
}

#attachmentEditTabTimelines {
    padding: 0;
}

#attachmentEditTabTimelines .timeline-tab-controls {
    margin-bottom: 12px;
}

#attachmentsEditPanel .em-edit-form-group {
    margin-bottom: 4px;
}

#attachmentsEditPanel .em-edit-form-group label {
    margin-bottom: 4px;
}

#attachmentsEditPanel #attachmentEditTabDetails .em-edit-form-group {
    margin-bottom: 0;
}

#attachmentEditTabEvents .timeline-tab-controls {
    padding: 0;
    margin: 0 0 16px 0;
}

/* ── Artifacts modal: Events/Timelines tabs ──
   Replicate the timeline-modal / EDC pattern:
   Kill scroll on modal body → unbroken flex chain → inner list scrolls.
   This keeps the add-bar pinned and the dropdown on-screen. */

/* 1. Modal body becomes a flex column with no scroll on events/timelines tabs */
#attachmentsEditPanel[data-active-tab="events"] .c-modal-scroll-body,
#attachmentsEditPanel[data-active-tab="timelines"] .c-modal-scroll-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 2. Active tab panel fills the body */
#attachmentsEditPanel[data-active-tab="events"] #attachmentEditTabEvents,
#attachmentsEditPanel[data-active-tab="timelines"] #attachmentEditTabTimelines {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

/* 3. .em-edit-form-group fills the tab panel */
#attachmentsEditPanel[data-active-tab="events"] #attachmentEditTabEvents .em-edit-form-group,
#attachmentsEditPanel[data-active-tab="timelines"] #attachmentEditTabTimelines .em-edit-form-group {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    margin-bottom: 0;
}

/* 4. Controls (add bar) stay pinned — never shrink */
#attachmentsEditPanel .timeline-tab-controls,
#attachmentsEditPanel .tm-events-search-section {
    flex-shrink: 0;
    width: 100%;
}

/* 5. .edc-timelines-tab fills remaining space (flex column, overflow hidden → delegates to list) */
#attachmentsEditPanel[data-active-tab="events"] .edc-timelines-tab,
#attachmentsEditPanel[data-active-tab="timelines"] .edc-timelines-tab {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    overflow: hidden;
}

/* 6. .edc-timelines-list is THE scroller */
#attachmentsEditPanel[data-active-tab="events"] .edc-timelines-list,
#attachmentsEditPanel[data-active-tab="timelines"] .edc-timelines-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-right: 0;
}

#attachmentsEditPanel .edc-timeline-row {
    padding-right: 20px;
}

#attachmentsEditPanel .attachments-edit-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 0.95em;
}

#attachmentsEditPanel .attachments-edit-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

.am-timeline-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* Transparent backdrop to enable click-off-to-close for slide-out panels */
.em-edit-panel-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    z-index: 1090;
}

.em-edit-panel-backdrop.show {
    pointer-events: auto;
}

.em-edit-panel.show {
    transform: translateX(0);
}

/* Timelines Manager panels need extra width for 6 tabs to display comfortably */
.timelines-manager-modal .em-edit-panel {
    width: 520px;
}

/* When opened from Event Details Card, needs higher z-index to appear above the overlay */
#event-details-card-overlay.show ~ * .em-edit-panel.show,
.em-edit-panel.show.edc-context {
    z-index: var(--z-modal-comparison-header);
}

/* When opened from Event Details Card, keep backdrop below the panel but above the overlay */
#event-details-card-overlay.show ~ * .em-edit-panel-backdrop.show,
.em-edit-panel-backdrop.show.edc-context {
    z-index: var(--z-modal-comparison);
}

.em-edit-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.em-edit-panel-header h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Timeline Create Panel: Inline Name Input (matches Create Event pattern) */
.tm-create-name-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    font-size: 1.3em;
    font-weight: 600;
    border: 2px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: border-color 0.2s;
}

.tm-create-name-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
}

.tm-create-name-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.em-edit-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-tertiary);
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.em-edit-panel-close:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary);
}

/* Phase 2: Timeline tabs */
.tm-edit-panel-tabs {
    display: flex;
    gap: 0;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
    padding: 0 30px;
    flex-shrink: 0; /* Prevent tabs from shrinking when body content overflows */
}

/* Timeline modals (create/edit/info): match Event Details Card tabs + fixed tab bar */
#timelineModal .tm-edit-panel-tabs,
#editTimelineModal .tm-edit-panel-tabs,
#timelineInfoModal .tm-edit-panel-tabs {
    gap: 1px;
    margin: 0;
    padding: 0 var(--panel-space-6, 24px);
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
    background: transparent;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#timelineModal .tm-edit-panel-tabs::-webkit-scrollbar,
#editTimelineModal .tm-edit-panel-tabs::-webkit-scrollbar,
#timelineInfoModal .tm-edit-panel-tabs::-webkit-scrollbar {
    display: none;
}

/* Remove scrollbar hiding - tabs should all be visible now */

#timelineModal .tm-tab-btn,
#editTimelineModal .tm-tab-btn,
#timelineInfoModal .tm-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    min-height: 44px;
    padding: var(--panel-space-3, 12px) var(--panel-space-4, 16px);
    font-size: var(--panel-font-body-size, 1rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    color: var(--panel-text-muted, var(--color-text-muted));
    cursor: pointer;
    border-bottom: 3px solid transparent;
    border-radius: var(--panel-radius-sm, 6px) var(--panel-radius-sm, 6px) 0 0;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

#timelineModal .tm-tab-btn:hover,
#editTimelineModal .tm-tab-btn:hover,
#timelineInfoModal .tm-tab-btn:hover {
    color: var(--panel-text, var(--color-text-primary));
    background: var(--panel-surface-muted, var(--color-surface-4));
}

#timelineModal .tm-tab-btn.tm-tab-active,
#editTimelineModal .tm-tab-btn.tm-tab-active,
#timelineInfoModal .tm-tab-btn.tm-tab-active {
    color: var(--panel-text, var(--color-text-primary));
    border-bottom-color: var(--panel-accent, var(--color-primary));
}

/* Disabled tabs (e.g., for unauthenticated users) */
#timelineModal .tm-tab-btn:disabled,
#editTimelineModal .tm-tab-btn:disabled,
#timelineInfoModal .tm-tab-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--panel-text-muted, var(--color-text-muted));
}

#timelineModal .tm-tab-btn:disabled:hover,
#editTimelineModal .tm-tab-btn:disabled:hover,
#timelineInfoModal .tm-tab-btn:disabled:hover {
    background: transparent;
    color: var(--panel-text-muted, var(--color-text-muted));
}

/* Timeline Info Modal header with avatar photo */
#timelineInfoModal .c-modal-header {
    padding: 16px 20px;
    min-height: 84px;
    max-height: 84px;
    margin-bottom: 0;
    overflow: visible; /* Allow avatar menu to overflow */
}

#timelineInfoModal .c-modal-title-container {
    flex: 1;
    min-width: 0;
}

/* Timeline Info header: year range (left) + name (right)
   Matches Event Details Card header tone + sizing. */
#timelineInfoModal .tlm-header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--panel-space-3, 12px);
    min-width: 0;
}

#timelineInfoModal .tlm-header-range {
    flex: 0 0 auto;
    min-width: 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    line-height: 1.05;
    font-size: 0.9rem;
    color: var(--panel-text-muted, var(--color-text-muted));
    font-weight: var(--font-weight-normal, 400);
    letter-spacing: 0.01em;
    text-transform: none;
    user-select: none;
}

#timelineInfoModal .tlm-header-range[aria-hidden="true"] {
    visibility: hidden;
}

#timelineInfoModal .tlm-header-range.tlm-header-range--empty {
    font-style: italic;
    color: var(--color-text-muted, #999);
}

#timelineInfoModal #timelineInfoTitle {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

/* If the name is only one line, allow true vertical centering next to the
   3-line range block (don’t force a 2-line minimum height). */
#timelineInfoModal #timelineInfoTitle.yrh-user-modal-title-fixed-2l {
    min-height: 0;
}

#timelineInfoModal .c-modal-header-with-photo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: visible; /* Allow menu to overflow outside header */
}

#timelineInfoModal .timeline-info-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

#timelineInfoModal .timeline-info-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#timelineInfoModal .timeline-info-photo--initial {
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Timeline photo wrapper for action menu positioning */
#timelineInfoModal .timeline-info-photo-wrapper {
    position: relative;
    flex-shrink: 0;
    z-index: 10; /* Ensure avatar is above other header elements */
}

/* Clickable avatar in view mode */
#timelineInfoModal .timeline-info-photo--clickable {
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#timelineInfoModal .timeline-info-photo--clickable:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

#timelineInfoModal .timeline-info-photo--clickable:active {
    transform: scale(0.98);
}

/* Loading state for photo operations */
#timelineInfoModal .timeline-info-photo.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

#timelineInfoModal .timeline-info-photo.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Timeline photo action menu (dropdown) */
.timeline-photo-action-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--color-bg-primary, white);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    overflow: hidden;
    z-index: 1000; /* High z-index to ensure visibility above modal content */
    animation: fadeInMenu 0.15s ease-out;
}

@keyframes fadeInMenu {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.timeline-photo-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 0.9em;
    color: var(--color-text-primary);
    transition: background-color 0.15s ease;
}

.timeline-photo-menu-item:hover {
    background: var(--color-bg-secondary, #f5f5f5);
}

.timeline-photo-menu-item .menu-item-icon {
    font-size: 1em;
    flex-shrink: 0;
}

.timeline-photo-menu-item .menu-item-label {
    flex: 1;
    white-space: nowrap;
}

.timeline-photo-menu-item--danger:hover {
    background: var(--color-danger-light, #fef2f2);
    color: var(--color-danger, #dc2626);
}

#timelineInfoModal .c-modal-header-with-photo .c-modal-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

#timelineInfoModal .c-modal-header-with-photo .c-modal-title.yrh-user-modal-title-clamp {
    white-space: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CREATE TIMELINE MODAL: Header Avatar (same pattern as Edit mode)
   Avatar is ALWAYS visible and clickable for photo operations.
   ═══════════════════════════════════════════════════════════════════════════ */

#timelineModal .c-modal-header {
    margin-bottom: 0;
    overflow: visible; /* Allow avatar menu to overflow */
}

#timelineModal .c-modal-header-with-photo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: visible; /* Allow menu to overflow outside header */
}

#timelineModal .timeline-info-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

#timelineModal .timeline-info-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#timelineModal .timeline-info-photo--initial {
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

#timelineModal .timeline-info-photo-wrapper {
    position: relative;
    flex-shrink: 0;
    z-index: 10; /* Ensure avatar is above input area */
}

#timelineModal .timeline-info-photo--clickable {
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#timelineModal .timeline-info-photo--clickable:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

#timelineModal .timeline-info-photo--clickable:active {
    transform: scale(0.98);
}

#timelineModal .timeline-info-photo.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

#timelineModal .timeline-info-photo.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Adjust name input when avatar is present */
#timelineModal .c-modal-header-with-photo .timeline-modal-name-input {
    flex: 1 1 auto;
    min-width: 0;
}

#timelineInfoModal .timeline-details-hero-photo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#timelineInfoModal .timeline-details-hero-photo {
    width: 240px;
    height: 240px;
    padding: 0;
    border: none;
    background: none;
    font-size: 72px;
}

#timelineInfoModal .timeline-details-hero-photo.timeline-info-photo--initial {
    background: var(--gradient-primary);
}

#timelineInfoModal .timeline-details-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* ═══════════════════════════════════════════════════════════════════════════
   EDIT TIMELINE MODAL: Header Avatar (same as View mode)
   Avatar is ALWAYS visible and clickable for photo operations.
   ═══════════════════════════════════════════════════════════════════════════ */

#editTimelineModal .c-modal-header {
    margin-bottom: 0;
    overflow: visible; /* Allow avatar menu to overflow */
}

#editTimelineModal .c-modal-header-with-photo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: visible; /* Allow menu to overflow outside header */
}

#editTimelineModal .timeline-info-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

#editTimelineModal .timeline-info-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#editTimelineModal .timeline-info-photo--initial {
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

#editTimelineModal .timeline-info-photo-wrapper {
    position: relative;
    flex-shrink: 0;
    z-index: 10; /* Ensure avatar is above input area */
}

#editTimelineModal .timeline-info-photo--clickable {
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#editTimelineModal .timeline-info-photo--clickable:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

#editTimelineModal .timeline-info-photo--clickable:active {
    transform: scale(0.98);
}

#editTimelineModal .timeline-info-photo.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

#editTimelineModal .timeline-info-photo.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Adjust name input when avatar is present */
#editTimelineModal .c-modal-header-with-photo .timeline-modal-name-input {
    flex: 1 1 auto;
    min-width: 0;
}

#timelineModal .timeline-details-hero-photo-wrap,
#editTimelineModal .timeline-details-hero-photo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#timelineModal .edc-details-view-right,
#editTimelineModal .edc-details-view-right,
#timelineInfoModal .edc-details-view-right {
    padding-top: 4px;
}

/* Subtle remove-photo link (Apple-like) — all timeline modals */
#timelineModal .timeline-details-hero-remove,
#editTimelineModal .timeline-details-hero-remove,
#timelineInfoModal .timeline-details-hero-remove {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--color-text-muted, #999);
    cursor: pointer;
    letter-spacing: 0.01em;
}

#timelineModal .timeline-details-hero-remove:hover,
#editTimelineModal .timeline-details-hero-remove:hover,
#timelineInfoModal .timeline-details-hero-remove:hover {
    color: var(--color-danger, #dc2626);
}

#timelineModal .timeline-details-hero-remove:disabled,
#editTimelineModal .timeline-details-hero-remove:disabled,
#timelineInfoModal .timeline-details-hero-remove:disabled {
    opacity: 0.35;
    cursor: default;
    color: var(--color-text-muted, #999);
}

#timelineModal .edc-details-view-right .timeline-details-hero-photo-wrap,
#editTimelineModal .edc-details-view-right .timeline-details-hero-photo-wrap,
#timelineInfoModal .edc-details-view-right .timeline-details-hero-photo-wrap {
    align-items: center;
    margin-left: 14px;
}

#timelineModal .timeline-details-hero-photo,
#editTimelineModal .timeline-details-hero-photo {
    width: 240px;
    height: 240px;
    padding: 0;
    border: none;
    background: none;
    font-size: 72px;
}

#timelineModal .timeline-details-hero-photo.timeline-info-photo--initial,
#editTimelineModal .timeline-details-hero-photo.timeline-info-photo--initial {
    background: var(--gradient-primary);
}

#timelineModal .timeline-details-hero-photo img,
#editTimelineModal .timeline-details-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE EDIT MODAL: LEGACY SETTINGS-ROW PATTERN (removed)
   Photo controls are now in the header avatar only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Make timeline modal tabs fixed: scroll the tab content, not the whole scroll body */
#timelineModal .c-modal-scroll-body,
#editTimelineModal .c-modal-scroll-body,
#timelineInfoModal .c-modal-scroll-body {
    padding: 0;
    overflow: hidden;
}

/* Smooth transitions for edit timeline modal to reduce flicker */
#editTimelineModal .modal-content {
    will-change: transform;
}

#editTimelineModal .c-modal-scroll-body,
#editTimelineModal #canvasTimelineTabContent {
    min-height: 300px; /* Prevent collapse during tab switch */
}

#canvasCreateTimelineTabContent,
#canvasTimelineTabContent,
#timelineInfoTabContent {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 28px;
}

/* Timeline modals: ensure consistent spacing below tab control buttons */
#canvasCreateTimelineTabContent .timeline-tab-controls,
#canvasTimelineTabContent .timeline-tab-controls,
#timelineInfoTabContent .timeline-tab-controls {
    padding: 0;
    margin: 0 0 16px 0;
}

/* Sticky tabs in Timeline Manager edit panels (scoped) - removed sticky, tabs are already fixed */
.timelines-manager-modal .em-edit-panel .tm-edit-panel-tabs {
    background: #ffffff; /* Solid white background (not CSS variable to ensure no transparency) */
    border-bottom: 2px solid var(--color-border-light); /* Thicker for visual stability */
    z-index: 2; /* Ensure tabs appear above scrolling content if any overlap occurs */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth and visual separation */
}


/* Timeline manager slide-out panel tab buttons (create/edit panels) */
.tm-edit-tab-btn {
    background: transparent;
    border: none;
    padding: var(--panel-space-3, 12px) var(--panel-space-3, 12px);
    font-size: var(--panel-font-body-size, 1rem);
    font-weight: var(--font-weight-semibold);
    color: var(--panel-text-muted, var(--color-text-muted));
    cursor: pointer;
    border-bottom: 3px solid transparent;
    border-radius: var(--panel-radius-sm, 6px) var(--panel-radius-sm, 6px) 0 0;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
    text-transform: lowercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.tm-edit-tab-btn:hover {
    color: var(--panel-text, var(--color-text-primary));
    background: var(--panel-surface-muted, var(--color-surface-4));
}

.tm-edit-tab-btn.tm-tab-active,
.tm-edit-tab-btn.tm-edit-tab-active {
    color: var(--panel-text, var(--color-text-primary));
    border-bottom-color: var(--panel-accent, var(--color-primary));
}

/* Timeline Notes Tab - matching event notes style */
.tm-notes-container {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.tm-notes-textarea {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding: 12px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95em;
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    transition: border-color 0.2s ease;
}

.tm-notes-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.em-edit-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 30px;
    display: flex; /* Enable flex layout for children */
    flex-direction: column; /* Stack children vertically */
}

/* Timeline Manager: Remove padding from body when Events tab is active to allow full-height flex */
.timelines-manager-modal .em-edit-panel-body {
    padding: 0; /* Remove padding, let child tabs handle their own spacing */
}


/* Add padding back for non-flex tab content */
.timelines-manager-modal .em-edit-panel-body > .em-edit-form-group,
.timelines-manager-modal .em-edit-panel-body > div:not(.timeline-events-panel) {
    padding: 20px 30px; /* Restore padding for other tabs */
}


.em-edit-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 30px;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ATTACHMENTS EDIT - CENTERED MODAL (replaces slide-out sidebar)
   Scoped override: keep .em-edit-panel for other features.
   ═══════════════════════════════════════════════════════════════════════════ */

#attachmentsEditPanelBackdrop.em-edit-panel-backdrop {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: calc(var(--z-modal-bulk-upload) - 1);
}

#attachmentsEditPanelBackdrop.em-edit-panel-backdrop.show {
    opacity: 1;
}

#attachmentsEditPanel.em-edit-panel {
    top: 50%;
    left: 50%;
    right: auto;
    width: min(var(--yrh-apple-modal-width, 620px), 95vw);
    max-width: var(--yrh-apple-modal-max-width, 680px);
    height: 85vh;
    height: 85dvh;
    max-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: var(--panel-radius-lg, 16px);
    overflow: hidden;
    box-shadow: 0 20px 60px var(--color-overlay-dark-30);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -48%) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: var(--z-modal-bulk-upload);
}

#attachmentsEditPanel.em-edit-panel.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTIFACT NOTES POPOVER (lightweight "flip card")
   Used for artifact opens outside Library (Event/Timeline/You).
   ═══════════════════════════════════════════════════════════════════════════ */

/* PDF viewer must keep its opaque white background even when kernel-managed.
   Without this, the kernel sets background: transparent and the viewer is invisible.
   Also guarantee a z-index above any overlay/artifact-notes stacking. */
#pdfViewerModal.modal.modal-kernel-managed,
#pdfViewerModal.modal.modal-kernel-managed.modal-kernel-stacked {
    background: var(--color-surface-1, #ffffff) !important;
    z-index: var(--z-modal-image-preview, 1090) !important;
}

/* Make the kernel backdrop much lighter ONLY when the popover is the sole modal.
   (When opened on top of another modal, do not change the global kernel scrim.)
   Use :has() when available; use a body class fallback for Safari compatibility. */
body:has(#artifactNotesOverlay.modal.show):not(:has(.modal.show:not(#artifactNotesOverlay))) .modal-kernel-overlay.modal-kernel-overlay--visible,
body.artifact-notes-popover-open--solo .modal-kernel-overlay.modal-kernel-overlay--visible {
    background: var(--color-overlay-dark-30);
}

/* If stacked above another kernel modal, keep any additional scrim subtle. */
#artifactNotesOverlay.modal.modal-kernel-managed.modal-kernel-stacked {
    background: var(--color-overlay-dark-12) !important;
}

#artifactNotesOverlay.modal.show {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: hidden; /* avoid iOS Safari scrolling the overlay container */
    box-sizing: border-box;
    background: transparent;
    /* pointer-events stays auto so the kernel considers this modal interactable.
       Clicks directly on this transparent .modal element will be caught by the
       kernel's handleBackdropClose (event.target === .modal) and close it. */
}

/* Full-bleed two-sided surface (no card borders/shadows) */
#artifactNotesOverlay .artifact-notes-popover__surface {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    cursor: default;
    overflow: hidden;
    position: relative;
    /* Surface is click-through so taps on empty space fall through to the
       .modal element, where the kernel's handleBackdropClose dismisses it.
       Only the __object child re-enables pointer-events. */
    pointer-events: none;
}

/* Artifact preview mat color (single source of truth for the FRONT letterbox bars) */
#artifactNotesOverlay {
    --artifact-mat: var(--color-surface-paper-warm, var(--color-bg-secondary));
}

/* PDFs should feel archival: pure white sheet, minimal shadow, no warm mat */
#artifactNotesOverlay.artifact-notes-popover--pdf {
    --artifact-mat: var(--color-surface-1, #ffffff);
}

#artifactNotesOverlay.artifact-notes-popover--pdf .artifact-notes-popover__object {
    background: var(--color-surface-1, #ffffff);
    border: 1px solid var(--color-border-lightest);
    border-radius: var(--radius-xl, 12px);
    box-shadow: var(--shadow-xs);
}

#artifactNotesOverlay.artifact-notes-popover--pdf .artifact-notes-popover__preview {
    background: var(--color-surface-1, #ffffff);
    padding: 0;
}

#artifactNotesOverlay.artifact-notes-popover--pdf .artifact-notes-popover__preview-pdf {
    border: 0;
    border-radius: 0;
    background: var(--color-surface-1, #ffffff);
}

#artifactNotesOverlay.artifact-notes-popover--audio .artifact-notes-popover__object {
    height: min(58vh, 468px);
}

/* Full-screen in-app PDF viewer */
#pdfViewerModal {
    padding: 0;
    overflow: hidden;
    background: var(--color-surface-1, #ffffff);
}

#pdfViewerModal .pdf-viewer__shell {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-1, #ffffff);
}

#pdfViewerModal .pdf-viewer__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Content area is 56px; safe-area-inset pushes it below the notch/island. */
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border-lightest);
    background: var(--color-surface-1, #ffffff);
    flex: 0 0 auto;
}

#pdfViewerModal .pdf-viewer__close {
    position: absolute;
    left: 12px;
    /* Center in the 56px content area below the safe-area inset. */
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    transform: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    color: var(--color-text-secondary);
}

#pdfViewerModal .pdf-viewer__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    max-width: calc(100vw - 140px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0 70px;
}

#pdfViewerModal .pdf-viewer__pages {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    display: block;
    padding: 12px;
    /* Keep last page clear of the iPhone home-indicator bar */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: var(--color-bg-secondary, #f5f5f5);
}

#pdfViewerModal .pdf-viewer__pages.is-pannable {
    cursor: grab;
}

#pdfViewerModal .pdf-viewer__pages.is-pannable.is-dragging {
    cursor: grabbing;
    user-select: none;
}

#pdfViewerModal .pdf-viewer__stage {
    width: fit-content;
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
}

#pdfViewerModal .pdf-viewer__page-canvas {
    display: block;
    /* Let JS set both width & height explicitly; do NOT use max-width
       because it would shrink width without shrinking height, skewing
       the page.  The JS already caps at 816 CSS px. */
    box-shadow: var(--shadow-xs);
    background: var(--color-surface-1, #ffffff);
    border-radius: 2px;
    /* Override global canvas { touch-action: none } so PDF pages scroll & zoom */
    touch-action: auto;
    flex: 0 0 auto;
}

#pdfViewerModal .pdf-viewer__loading,
#pdfViewerModal .pdf-viewer__error {
    padding: 40px 20px;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-tertiary, #999);
}

#pdfViewerModal .pdf-viewer__error-text {
    margin: 0;
}

#pdfViewerModal .pdf-viewer__error-actions {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

#videoLightboxModal.modal.modal-kernel-managed,
#videoLightboxModal.modal.modal-kernel-managed.modal-kernel-stacked {
    background: rgba(239, 232, 223, 0.68) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: var(--z-modal-image-preview, 1090) !important;
}

#videoLightboxModal {
    padding: min(6vh, 36px) min(5vw, 32px);
    box-sizing: border-box;
    background:
        radial-gradient(circle at top, rgba(253, 249, 243, 0.88) 0%, rgba(238, 229, 218, 0.76) 42%, rgba(214, 202, 189, 0.72) 100%);
}

#videoLightboxModal .video-lightbox__shell {
    width: min(94vw, 980px);
    height: min(88vh, 760px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    overflow: hidden;
    background: rgba(255, 250, 244, 0.5);
    box-shadow: 0 28px 60px rgba(73, 58, 46, 0.16);
}

#videoLightboxModal .video-lightbox__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: max(12px, env(safe-area-inset-top, 0px)) 72px 12px;
    background: rgba(255, 249, 243, 0.6);
    color: var(--color-text-secondary);
    flex: 0 0 auto;
}

#videoLightboxModal .video-lightbox__close,
#videoLightboxModal .video-lightbox__fullscreen {
    position: absolute;
    top: max(10px, calc(env(safe-area-inset-top, 0px) + 2px));
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 252, 247, 0.56);
    color: rgba(79, 65, 52, 0.88);
    box-shadow: 0 10px 24px rgba(98, 83, 69, 0.1);
}

#videoLightboxModal .video-lightbox__close {
    left: 14px;
}

#videoLightboxModal .video-lightbox__fullscreen {
    right: 14px;
    cursor: pointer;
}

#videoLightboxModal .video-lightbox__fullscreen svg {
    width: 18px;
    height: 18px;
}

#videoLightboxModal .video-lightbox__caption {
    max-width: min(70vw, 520px);
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: rgba(82, 68, 55, 0.86);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#videoLightboxModal .video-lightbox__stage-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px calc(18px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

#videoLightboxModal .video-lightbox__stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(35, 31, 29, 0.94);
}

#videoLightboxModal .video-lightbox__player {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: transparent;
}

#artifactNotesOverlay .artifact-notes-popover__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--panel-space-3, 12px);
    padding: var(--panel-space-3, 12px) var(--panel-space-4, 16px);
    border-bottom: 0;
    pointer-events: none; /* only buttons should be interactive */
}

/* Artifact flipping affordance (desktop + iPhone):
   - Glass lens circle, always visible
   - Icon represents destination state (notes on front, media-type on back)
   - No text labels */
#artifactNotesOverlay .artifact-notes-popover__flip-icon {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    color: #444;
    padding: 0;
    opacity: 1;
    transition: opacity 150ms ease;
    z-index: 60; /* above invisible front-tap (z-index:15) */
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#artifactNotesOverlay .artifact-notes-popover__flip-icon::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
}

#artifactNotesOverlay .artifact-notes-popover__flip-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

#artifactNotesOverlay .artifact-notes-popover__title {
    position: absolute;
    top: max(24px, calc(env(safe-area-inset-top, 0px) + 12px));
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 420px);
    padding: 0 56px 0 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    color: var(--color-text-primary);
    pointer-events: none;
    z-index: 30;
    display: none;
}


/* Single centered object — fixed size for all artifacts.
   Leaves ~14vh top + 14vh bottom clearance for tap-to-dismiss. */
#artifactNotesOverlay .artifact-notes-popover__object {
    position: relative;
    width: min(92vw, 420px);
    height: min(72vh, 560px);
    pointer-events: auto;
    border-radius: var(--radius-2xl, 20px);
    box-shadow: var(--shadow-photo-print, var(--shadow-lg));
    background: var(--artifact-mat);
    overflow: hidden;
}

/* FRONT media: fills the fixed container */
#artifactNotesOverlay .artifact-notes-popover__preview {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    padding: var(--spacing-14, 14px);
    box-sizing: border-box;
    background: var(--artifact-mat);
}

#artifactNotesOverlay .artifact-notes-popover__preview-img {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-xl, 16px);
    box-shadow: none;
    background: var(--artifact-mat);
}

#artifactNotesOverlay .artifact-notes-popover__preview.is-video-preview {
    background:
        radial-gradient(circle at top, rgba(253, 249, 243, 0.78) 0%, rgba(246, 238, 228, 0.32) 36%, transparent 72%),
        linear-gradient(180deg, rgba(241, 234, 224, 0.98) 0%, rgba(218, 207, 194, 0.94) 100%);
}

#artifactNotesOverlay .artifact-notes-popover__preview-video,
#artifactNotesOverlay .artifact-notes-popover__preview-video-poster {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl, 16px);
    box-shadow: none;
}

#artifactNotesOverlay .artifact-notes-popover__preview-video {
    object-fit: contain;
    background: rgba(26, 22, 19, 0.96);
}

#artifactNotesOverlay .artifact-notes-popover__preview-video-poster {
    object-fit: cover;
    background:
        radial-gradient(circle at top, rgba(255, 251, 246, 0.9) 0%, rgba(245, 237, 227, 0.3) 42%, transparent 70%),
        linear-gradient(180deg, rgba(238, 229, 218, 0.96) 0%, rgba(214, 202, 189, 0.92) 100%);
}

#artifactNotesOverlay .artifact-notes-popover__preview-video-play,
#artifactNotesOverlay .artifact-notes-popover__preview-video-watch {
    position: absolute;
    z-index: 20;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

#artifactNotesOverlay .artifact-notes-popover__preview-video-play {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 251, 246, 0.52);
    color: rgba(82, 68, 55, 0.96);
    box-shadow: 0 18px 36px rgba(67, 52, 40, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#artifactNotesOverlay .artifact-notes-popover__preview-video-play svg {
    width: 32px;
    height: 32px;
    margin-left: 2px;
}

#artifactNotesOverlay .artifact-notes-popover__preview-video-watch {
    top: 28px;
    right: 28px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 252, 247, 0.62);
    color: rgba(86, 72, 59, 0.92);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
    box-shadow: 0 12px 28px rgba(83, 67, 54, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#artifactNotesOverlay .artifact-notes-popover__preview.is-video-inline-active .artifact-notes-popover__preview-video-play,
#artifactNotesOverlay .artifact-notes-popover__preview.is-video-inline-active .artifact-notes-popover__preview-video-poster,
#artifactNotesOverlay .artifact-notes-popover__preview.is-video-inline-active .artifact-notes-popover__preview-placeholder {
    display: none;
}

#artifactNotesOverlay .artifact-notes-popover__preview.is-video-inline-active .artifact-notes-popover__preview-video-watch {
    top: 22px;
    right: 22px;
}

#artifactNotesOverlay .artifact-notes-popover__preview-pdf {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid var(--color-border-lightest);
    border-radius: var(--radius-xl, 16px);
    box-shadow: none;
    background: var(--artifact-mat);
}

#artifactNotesOverlay .artifact-notes-popover__preview.is-audio-preview {
    align-items: stretch;
    padding: 18px;
    background:
        radial-gradient(circle at top, rgba(255, 251, 246, 0.82) 0%, rgba(247, 239, 229, 0.38) 34%, transparent 72%),
        linear-gradient(180deg, rgba(242, 236, 229, 0.98) 0%, rgba(226, 216, 205, 0.96) 100%);
}

#artifactNotesOverlay .artifact-notes-popover__preview-audio-card {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    min-height: 0;
    padding: 22px 20px 56px;
    border-radius: var(--radius-xl, 16px);
    background: linear-gradient(180deg, rgba(255, 252, 248, 0.62) 0%, rgba(247, 241, 232, 0.46) 100%);
    box-shadow: inset 0 0 0 1px rgba(151, 129, 107, 0.1);
}

#artifactNotesOverlay .artifact-notes-popover__preview-audio-kicker {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(115, 99, 84, 0.64);
}

#artifactNotesOverlay .artifact-notes-popover__preview-audio-title {
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.28;
    color: rgba(58, 47, 38, 0.96);
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#artifactNotesOverlay .artifact-notes-popover__preview-audio-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: rgba(107, 92, 78, 0.78);
    font-size: 0.78rem;
    font-weight: 500;
}

#artifactNotesOverlay .artifact-notes-popover__preview-audio-meta.is-hidden {
    display: none;
}

#artifactNotesOverlay .artifact-notes-popover__preview-audio-meta span {
    display: inline-flex;
    align-items: center;
}

#artifactNotesOverlay .artifact-notes-popover__preview-audio-meta span:not(:last-child)::after {
    content: '•';
    margin-left: 8px;
    color: rgba(120, 103, 88, 0.45);
}

#artifactNotesOverlay .artifact-notes-popover__preview-audio-mark {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 120px;
}

#artifactNotesOverlay .artifact-notes-popover__preview-audio-waveform {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    height: 54px;
    width: min(224px, 72%);
}

#artifactNotesOverlay .artifact-notes-popover__preview-audio-waveform span {
    width: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(155, 130, 108, 0.78) 0%, rgba(127, 104, 83, 0.48) 100%);
}

#artifactNotesOverlay .artifact-notes-popover__preview-audio-waveform span:nth-child(1) { height: 18px; }
#artifactNotesOverlay .artifact-notes-popover__preview-audio-waveform span:nth-child(2) { height: 34px; }
#artifactNotesOverlay .artifact-notes-popover__preview-audio-waveform span:nth-child(3) { height: 46px; }
#artifactNotesOverlay .artifact-notes-popover__preview-audio-waveform span:nth-child(4) { height: 28px; }
#artifactNotesOverlay .artifact-notes-popover__preview-audio-waveform span:nth-child(5) { height: 38px; }
#artifactNotesOverlay .artifact-notes-popover__preview-audio-waveform span:nth-child(6) { height: 22px; }

#artifactNotesOverlay .artifact-notes-popover__preview-audio-control {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    margin-top: auto;
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 14px;
    opacity: 0.94;
}

/* Invisible front tap target (captures taps over image/PDF to flip) */
#artifactNotesOverlay .artifact-notes-popover__front-tap {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 15;
}

/* Back-only controls pinned inside the object boundary */
#artifactNotesOverlay .artifact-notes-popover__back-controls {
    position: absolute;
    top: var(--spacing-16, 16px);
    right: var(--spacing-16, 16px);
    display: flex;
    align-items: center;
    gap: var(--panel-space-2, 8px);
    z-index: 40;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transform: translateZ(0);
}

#artifactNotesOverlay .artifact-notes-popover__title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--panel-space-3, 12px);
}

#artifactNotesOverlay .artifact-notes-popover__thumb-wrap {
    width: 36px;
    height: 36px;
    border-radius: var(--panel-radius-md, 10px);
    overflow: hidden;
    background: var(--panel-surface-muted, var(--color-surface-4));
    flex-shrink: 0;
}

#artifactNotesOverlay .artifact-notes-popover__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Title remains sr-only for this overlay style; visibility toggles are ignored. */
#artifactNotesOverlay .artifact-notes-popover__title.is-visible {
    display: block;
    opacity: 1;
}

#artifactNotesOverlay .artifact-notes-popover__title-input {
    width: min(360px, 52vw);
    max-width: 100%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--panel-text, var(--color-text-primary));
    background: var(--panel-surface, var(--color-bg-primary));
    border: 1px solid var(--color-border-light);
    border-radius: var(--panel-radius-sm, 8px);
    padding: 6px 10px;
    outline: none;
}

#artifactNotesOverlay .artifact-notes-popover__title-actions {
    display: flex;
    align-items: center;
    gap: var(--panel-space-2, 8px);
    flex-shrink: 0;
}

#artifactNotesOverlay .artifact-notes-popover__close {
    position: absolute;
    top: max(12px, calc(env(safe-area-inset-top, 0px) + 4px));
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: var(--color-overlay-light-96);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-xs);
    pointer-events: auto;
    z-index: 40;
}

/* Remove old full-bleed face preview rules (now sized by media itself) */

/* BACK: overlays the same exact boundary as the front media */
#artifactNotesOverlay .artifact-notes-popover__back {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-2xl, 20px);
    background: var(--color-surface-paper-warm, var(--color-surface-3));
    border: 0;
    box-shadow: none;
    opacity: 0;
    transform: rotateY(-6deg);
    transition: opacity 220ms ease, transform 240ms ease;
    pointer-events: none;
    overflow: hidden;
}

#artifactNotesOverlay .artifact-notes-popover__object.is-back-visible .artifact-notes-popover__back {
    opacity: 1;
    transform: rotateY(0deg);
    pointer-events: auto;
}

#artifactNotesOverlay .artifact-notes-popover__object.is-back-visible .artifact-notes-popover__preview {
    opacity: 0;
    transform: rotateY(6deg);
    transition: opacity 220ms ease, transform 240ms ease;
}

/* Front tap is only active on the FRONT */
#artifactNotesOverlay .artifact-notes-popover__object.is-back-visible .artifact-notes-popover__front-tap {
    pointer-events: none;
}

#artifactNotesOverlay .artifact-notes-popover__preview.is-video-inline-active + .artifact-notes-popover__front-tap {
    pointer-events: none;
}

#artifactNotesOverlay .artifact-notes-popover__preview.is-audio-preview + .artifact-notes-popover__front-tap {
    pointer-events: none;
}

/* BACK surface (paper-like), with internal scrolling only here */
#artifactNotesOverlay .artifact-notes-popover__back-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Extra top clearance so the note field never sits under the header controls */
    padding: calc(var(--spacing-40, 40px) + var(--spacing-12, 12px)) var(--panel-space-6, 24px) var(--panel-space-7, 28px);
    box-sizing: border-box;
    background: transparent;
}

/* Subtle status line under the menu area */
#artifactNotesOverlay .artifact-notes-popover__status {
    position: absolute;
    top: 8px;
    right: 0;
    margin-top: 0;
    font-size: 0.8em;
    color: var(--color-text-tertiary);
    text-align: right;
    opacity: 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    pointer-events: none;
}

/* The saved/status chip is unnecessary in the overlay UI — hide it.
   Kept as CSS-only so behavior is removed without touching JS. */
#artifactNotesOverlay .artifact-notes-popover__status {
    display: none !important;
}

#artifactNotesOverlay .artifact-notes-popover__status.is-visible {
    opacity: 1;
}

#artifactNotesOverlay .artifact-notes-popover__back-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

#artifactNotesOverlay .artifact-notes-popover__back-top {
    display: flex;
    align-items: center;
    gap: var(--panel-space-3, 12px);
    justify-content: flex-end;
    margin-bottom: var(--panel-space-6, 24px);
}

#artifactNotesOverlay .artifact-notes-popover__empty-cta {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0 0 var(--panel-space-6, 24px);
    text-align: left;
    font-size: 1.05em;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
}

#artifactNotesOverlay .artifact-notes-popover__preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-text-muted);
    line-height: 0;
}

#artifactNotesOverlay .artifact-notes-popover__preview-placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

#artifactNotesOverlay .artifact-notes-popover__preview-placeholder-icon svg {
    width: 100%;
    height: 100%;
}

#artifactNotesOverlay .artifact-notes-popover__sheet {
    --artifact-notes-sheet-peek: 56px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(62%, 520px);
    transform: translateY(calc(100% - var(--artifact-notes-sheet-peek)));
    transition: transform 0.18s ease;
    display: flex;
    flex-direction: column;
    background: var(--panel-surface, var(--color-bg-primary));
    border-top: 1px solid var(--color-border-light);
}

#artifactNotesOverlay .artifact-notes-popover__sheet.is-expanded {
    transform: translateY(0);
}

#artifactNotesOverlay .artifact-notes-popover__sheet-handle {
    width: 100%;
    height: 24px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#artifactNotesOverlay .artifact-notes-popover__sheet-handle::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: var(--color-border-light);
}

#artifactNotesOverlay .artifact-notes-popover__sheet-header {
    display: flex;
    align-items: center;
    gap: var(--panel-space-3, 12px);
    padding: 0 var(--panel-space-4, 16px) var(--panel-space-2, 8px);
}

#artifactNotesOverlay .artifact-notes-popover__sheet-title {
    font-size: 0.9em;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: lowercase;
}

#artifactNotesOverlay .artifact-notes-popover__sheet-body {
    padding: 0 var(--panel-space-4, 16px) calc(var(--panel-space-4, 16px) + env(safe-area-inset-bottom, 0px));
    flex: 1;
    min-height: 0;
    display: none;
}

/* Collapsed peek: handle + label only (no textarea, no edit controls, no body) */
#artifactNotesOverlay .artifact-notes-popover__sheet:not(.is-expanded) .artifact-notes-popover__status,
#artifactNotesOverlay .artifact-notes-popover__sheet:not(.is-expanded) .artifact-notes-popover__btn--view,
#artifactNotesOverlay .artifact-notes-popover__sheet:not(.is-expanded) .artifact-notes-popover__btn--edit {
    display: none;
}

#artifactNotesOverlay .artifact-notes-popover__sheet.is-expanded .artifact-notes-popover__sheet-body {
    display: block;
}

#artifactNotesOverlay .artifact-notes-popover__note-view {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 0;
    min-height: 260px;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: var(--color-text-primary);
    font-size: 1.05em;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow: visible;
    max-height: none;
}

#artifactNotesOverlay .artifact-notes-popover__note-view.is-empty {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Empty note: show a faint placeholder line (not a button) */
#artifactNotesOverlay .artifact-notes-popover__note-view.is-empty:empty::before {
    content: 'note…';
    color: var(--color-text-muted);
    opacity: 0.75;
}

#artifactNotesOverlay .artifact-notes-popover__textarea {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    resize: none;
    overflow-y: auto;
    min-height: 260px;
    background: transparent;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    font-size: 1.05em;
    line-height: 1.55;
    color: var(--color-text-primary);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 180ms ease;
}

#artifactNotesOverlay .artifact-notes-popover__textarea::placeholder {
    font-family: inherit;
    font-weight: inherit;
    font-style: italic;
    letter-spacing: inherit;
    line-height: 1.55;
}

#artifactNotesOverlay .artifact-notes-popover__textarea::-webkit-input-placeholder {
    font-family: inherit;
    font-weight: inherit;
    font-style: italic;
    letter-spacing: inherit;
    line-height: 1.55;
}

/* In view mode we don't show the textarea at all (note view is shown instead). */
#artifactNotesOverlay .artifact-notes-popover__textarea {
    display: none;
}

#artifactNotesOverlay .artifact-notes-popover__object.is-editing .artifact-notes-popover__textarea {
    display: block;
}

#artifactNotesOverlay .artifact-notes-popover__object.is-editing .artifact-notes-popover__note-view {
    display: none;
}

#artifactNotesOverlay .artifact-notes-popover__textarea:focus,
#artifactNotesOverlay .artifact-notes-popover__textarea:focus-visible {
    outline: none;
    border-color: var(--color-border-light);
    box-shadow: none;
}

#artifactNotesOverlay .artifact-notes-popover__textarea[readonly] {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    cursor: default;
}

/* Keep editing calm: no heavy field chrome. */
#artifactNotesOverlay .artifact-notes-popover__object.is-editing .artifact-notes-popover__textarea {
    background: var(--color-bg-tertiary);
}

/* Edit-mode actions: appear below the textarea, aligned bottom-right */
#artifactNotesOverlay .artifact-notes-popover__edit-actions {
    display: none;
    width: 100%;
    margin-top: var(--panel-space-3, 12px);
    gap: var(--panel-space-3, 12px);
    justify-content: flex-end;
    align-items: center;
}

#artifactNotesOverlay .artifact-notes-popover__object.is-editing .artifact-notes-popover__edit-actions {
    display: flex;
}

#artifactNotesOverlay .artifact-notes-popover__edit-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    margin: 0;
    min-width: 44px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-secondary);
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
    white-space: nowrap;
}

#artifactNotesOverlay .artifact-notes-popover__edit-action-btn:active {
    opacity: 0.6;
}

#artifactNotesOverlay .artifact-notes-popover__action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    margin: 0;
    font-size: 0.9em;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    line-height: 1.2;
    text-transform: lowercase;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

#artifactNotesOverlay .artifact-notes-popover__action-link:hover,
#artifactNotesOverlay .artifact-notes-popover__action-link:focus-visible {
    color: var(--color-text-primary);
    background: transparent;
}

#artifactNotesOverlay .artifact-notes-popover__action-link.is-active {
    color: var(--color-text-primary);
}

.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-title {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.35;
    color: var(--color-text-primary);
    text-align: center;
    word-break: break-word;
}

.modal.yrh-action-sheet-modal .yrh-artifact-edit-sheet-message {
    display: none;
}

#artifactNotesOverlay .artifact-notes-popover__btn--edit {
    display: none;
}

#artifactNotesOverlay .artifact-notes-popover__surface.is-editing .artifact-notes-popover__btn--view {
    display: none;
}

#artifactNotesOverlay .artifact-notes-popover__surface.is-editing .artifact-notes-popover__btn--edit {
    display: inline;
}

#artifactNotesOverlay .artifact-notes-popover__status {
    margin-right: auto;
    font-size: 0.85em;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

#artifactNotesOverlay .artifact-notes-popover__status.is-visible {
    opacity: 1;
}

/* Overlay is intentionally full-bleed on all viewports. */

/* Match the standard modal contract spacing inside the attachment edit modal */
#attachmentsEditPanel .c-modal-scroll-body {
    padding: 24px;
}

/* Notes tab: reduce the standard padding so notes fill the canvas better */
#attachmentsEditPanel[data-active-tab="notes"] .c-modal-scroll-body {
    padding: 5px;
}

#attachmentsEditPanel .c-modal-sticky-footer {
    justify-content: flex-end;
}

#attachmentEditFooterDetailsEdit {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--spacing-8);
}

#attachmentsEditPanel .c-modal-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

#attachmentsEditPanel .yrh-about-destructive-actions--footer {
    margin-top: 0;
    padding: 0;
    display: none;
}

#attachmentsEditPanel .yrh-about-destructive-actions--inline {
    display: none;
}

#attachmentsEditPanel .yrh-about-destructive-actions--footer .btn-text-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    #attachmentsEditPanel .yrh-about-destructive-actions--footer:not(.is-hidden) {
        display: flex;
        align-items: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED CANVAS SIDEBAR SYSTEM
   Shared right-hand sidebar used for BOTH event details and filters
   Only ONE can be open at a time
   ═══════════════════════════════════════════════════════════════════════════ */

.canvas-sidebar {
    position: fixed;
    top: var(--app-header-height, 0px);
    right: 0;
    width: 420px;
    max-width: 95vw;
    height: calc(100vh - var(--app-header-height, 0px));
    background-color: var(--color-bg-primary);
    box-shadow: -2px 0 8px var(--color-overlay-dark-12);
    z-index: var(--z-modal-bulk-upload);

    display: flex;
    flex-direction: column;

    transform: translateX(100%);
    transition: transform 0.2s ease-out;
}

/* In the full-screen Event Manager, the app header is not part of the layout.
   The unified sidebar should be flush to the top of the viewport. */
#eventManagerModal.show ~ #eventDetailsSidebar.canvas-sidebar {
    top: 0;
    height: 100vh;
}

/* When a sidebar is open, slide it into view */
.canvas-sidebar.is-open {
    transform: translateX(0);
}

/* Typical inner layout for canvas sidebar */
.canvas-sidebar .yh-sidebar__header {
    flex-shrink: 0;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.canvas-sidebar .yh-sidebar__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary, #1a1a1a);
}

.canvas-sidebar .yh-sidebar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-muted, #666);
    transition: background-color 0.2s, color 0.2s;
}

.canvas-sidebar .yh-sidebar__close:hover {
    background: var(--color-surface-4);
    color: var(--color-text-primary, #1a1a1a);
}

.canvas-sidebar .yh-sidebar__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 30px;
    overflow-x: hidden;
    min-height: 0;
}

/* Event Details sidebar: let the Event Details Card manage its own
   padding + scroll body (matches modal contract behavior). */
#eventDetailsSidebar .yh-sidebar__body {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#eventSidebarContent {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    position: relative;
}

.canvas-sidebar .yh-sidebar__footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 16px 30px;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
}

.canvas-sidebar .yh-sidebar__footer:empty {
    display: none;
}

.canvas-sidebar .yh-sidebar__btn {
    border-radius: 8px;
    font-size: 0.95rem;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s, opacity 0.2s;
}

.canvas-sidebar .yh-sidebar__btn--primary {
    background: var(--color-primary, #667eea);
    color: var(--color-text-inverse);
}

.canvas-sidebar .yh-sidebar__btn--primary:hover {
    opacity: 0.9;
}

.canvas-sidebar .yh-sidebar__btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-light);
}

.canvas-sidebar .yh-sidebar__btn--ghost:hover {
    background: var(--color-surface-4);
    color: var(--color-text-primary);
}

/* Responsive: Full width on mobile */
@media (max-width: 768px) {
    .canvas-sidebar {
        width: 100vw;
        max-width: 100vw;
    }
}

@media (max-width: 480px) {
    .canvas-sidebar .yh-sidebar__header {
        padding: 16px 16px 12px;
    }

    .canvas-sidebar .yh-sidebar__body {
        padding: 16px;
    }

    .canvas-sidebar .yh-sidebar__footer {
        padding: 12px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY SIDEBAR STYLES - Kept for backwards compatibility
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container overlay - only used for click-outside on event sidebar if needed */
.yh-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay-dark-30);
    z-index: var(--z-sidebar-popover);
    display: none;
    justify-content: flex-end;
}

.yh-sidebar-overlay--hidden {
    display: none;
}

.yh-sidebar-overlay--visible {
    display: flex;
}

/* For backwards compatibility with old #sidebarOverlay references */
#sidebarOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay-dark-30);
    z-index: var(--z-modal-nested);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#sidebarOverlay.show {
    opacity: 1;
    visibility: visible;
}

/* Base sidebar styles - kept for backwards compatibility */
.yh-sidebar {
    position: relative;
    width: 420px;
    max-width: 100%;
    height: 100vh;
    background: var(--color-bg-primary, white);
    box-shadow: -4px 0 20px var(--color-overlay-dark-15);
    display: flex;
    flex-direction: column;
    z-index: var(--z-modal-bulk-upload);
}

/* Right-side sidebar */
/* (Modifiers are handled by ID-based styles above) */

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR CONTENT LAYOUT - Unified internal container for both sidebars
   ═══════════════════════════════════════════════════════════════════════════ */

.event-details-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--color-bg-primary);
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTER SIDEBAR - Internal layout styles
   ═══════════════════════════════════════════════════════════════════════════ */

#filterSidebar .event-details-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#filterSidebar .sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

#filterSidebar .sidebar-header,
#filterSidebar .sidebar-footer {
    flex-shrink: 0;
}

#filterSidebar .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-lighter);
}

#filterSidebar .sidebar-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

#filterSidebar .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 24px;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s;
}

#filterSidebar .sidebar-close:hover {
    background: var(--color-surface-4);
    color: var(--color-text-primary);
}

#filterSidebar .sidebar-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border-lighter);
    background: var(--color-bg-secondary);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

#filterSidebar .clear-btn,
#filterSidebar .apply-btn {
    border-radius: 8px;
    font-size: 0.95rem;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

#filterSidebar .clear-btn {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-light);
}

#filterSidebar .clear-btn:hover {
    background: var(--color-surface-4);
    color: var(--color-text-primary);
}

#filterSidebar .apply-btn {
    background: var(--color-accent, #007bff);
    color: var(--color-text-inverse);
}

#filterSidebar .apply-btn:hover {
    background: var(--color-accent-hover, #0056b3);
}

/* Responsive: Full width on mobile */
@media (max-width: 768px) {
    #filterSidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Sidebar header for canvas sidebars only (not main left sidebar) */
.canvas-sidebar .sidebar-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border-lightest);
}

.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.sidebar-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-lightest);
}

/* Responsive: Full width on mobile */
@media (max-width: 768px) {
    .yh-sidebar {
        width: 100%;
        height: 100vh;
        border-radius: 0;
    }
    
    .yh-sidebar--right {
        border-radius: 0;
    }
}

/* Legacy ID-based selectors for backward compatibility */
/* #filterSidebar, #eventDetailsSidebar inherit from .yh-sidebar */

/* Reuse the yh-sidebar inner styles */
.yh-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-light, #e3e3e3);
    flex-shrink: 0;
}

.yh-sidebar__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary, #1a1a1a);
}

.yh-sidebar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-muted, #666);
    transition: background-color 0.2s, color 0.2s;
}

.yh-sidebar__close:hover {
    background: var(--color-surface-4);
    color: var(--color-text-primary, #1a1a1a);
}

.yh-sidebar__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 24px 24px;
}

.yh-sidebar__footer {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border-light, #e3e3e3);
    background: var(--color-bg-secondary, #f8f8f8);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.yh-sidebar__btn {
    border-radius: 8px;
    font-size: 0.95rem;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s, opacity 0.2s;
}

.yh-sidebar__btn--primary {
    background: var(--color-primary, #667eea);
    color: var(--color-text-inverse);
}

.yh-sidebar__btn--primary:hover {
    opacity: 0.9;
}

.yh-sidebar__btn--ghost {
    background: transparent;
    color: var(--color-status-error);
}

.yh-sidebar__btn--ghost:hover {
    background: var(--color-status-error-bg);
}

/* Prevent body scroll when sidebar is open */
.yh-no-scroll {
    overflow: hidden;
}

/* Section styling to match event edit sidebar */
.filter-panel-section {
    margin-bottom: 24px;
}

.filter-panel-section:last-child {
    margin-bottom: 0;
}

/* Section label - matches "Tags / Category" style from event edit */
.filter-section-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--color-text-secondary);
    text-transform: lowercase;
}

/* Tag select dropdown - scoped to filter sidebar */
#filterSidebar select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-size: 0.95em;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    margin-bottom: 10px;
}

#filterSidebar select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

/* Tag pillbox */
#filterSidebar .tag-pillbox {
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Date filter styling */
#filterSidebar .date-filter-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#filterSidebar .date-filter-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#filterSidebar .date-filter-label {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color-text-secondary);
}

#filterSidebar .date-filter-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
}

#filterSidebar .date-filter-inputs select {
    flex: 1;
    margin-bottom: 0;
    padding: 8px 10px;
}

#filterSidebar .date-filter-inputs input {
    flex: 0 0 70px;
    padding: 8px 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-size: 0.9em;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

#filterSidebar .date-filter-inputs input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

/* Attributes checkboxes */
#filterSidebar .attachment-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#filterSidebar .filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
}

#filterSidebar .filter-checkbox-label:last-child {
    border-bottom: none;
}

#filterSidebar .filter-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

#filterSidebar .filter-checkbox-label span {
    font-size: 0.95em;
    color: var(--color-text-primary);
}

/* Reduce form spacing in timeline modals */
#editTimelineModal .form-group,
#timelineModal .form-group,
.timelines-manager-modal .form-group {
    margin-bottom: 6px;
}

/* Edit Form Styles */
.em-edit-form-group {
    margin-bottom: 6px;
}

.em-edit-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: 0.95em;
}

.em-edit-form-group label .required {
    color: var(--color-status-error);
}

.em-edit-form-group [data-birth-date-locked="true"] {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--panel-surface-muted, var(--color-surface-4));
    cursor: default;
}

.em-edit-form-group [data-birth-date-locked="true"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.em-edit-form-group [data-birth-date-locked="true"] [data-birth-date-locked-input="true"] {
    width: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-text-muted);
    cursor: default;
    pointer-events: none;
}

.em-edit-form-group [data-birth-date-locked="true"] [data-birth-date-locked-input="true"]:focus {
    outline: none;
}

/* Timeline Manager Create Panel - chip input styling */
.em-edit-form-group .edc-chip-input-wrapper {
    max-width: 100%;
}

#tmCreateTagInput.edc-chip-input,
#tmEditTagInput.edc-chip-input {
    flex: 1;
    padding: 10px 12px !important;
    border: 2px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    font-size: 0.95em;
    background: var(--color-bg-secondary) !important;
    color: var(--color-text-primary);
    width: auto !important;
}

#tmCreateTagInput.edc-chip-input:focus,
#tmEditTagInput.edc-chip-input:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    background: var(--color-bg-primary) !important;
}

.em-edit-help-text {
    margin-top: 4px;
    font-size: 0.8em;
    color: var(--color-text-muted);
}

.em-edit-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.85em;
    color: var(--color-text-muted);
}

/* Multi-Select Container for Events */
.multi-select-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.multi-select-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.multi-select-input-row select {
    flex: 1;
    min-width: 0;
}

.btn-add-event {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-add-event:hover {
    background-color: var(--color-primary-dark);
    transform: scale(1.05);
}

.btn-add-event:active {
    transform: scale(0.95);
}

/* Chips Container */
.chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-brand-primary-08);
    color: var(--color-primary);
    padding: 6px 10px;
    border-radius: 16px;
    font-size: 0.85em;
    border: 1px solid var(--color-brand-primary-20);
}

.chip-text {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    transition: opacity 0.2s, transform 0.1s;
    line-height: 1;
}

.chip-remove:hover {
    opacity: 0.7;
    transform: scale(1.15);
}

.chip-remove:active {
    transform: scale(0.9);
}

/* Radio Group for Edit/Create Panels */
.em-edit-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.em-edit-radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.em-edit-radio-option:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-4);
}

.em-edit-radio-option input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary);
}
.profile-options-menu .ti-sort-menu-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.profile-options-menu .ti-sort-menu-check {
    visibility: hidden;
    color: var(--color-text-muted);
}

.profile-options-menu .ti-sort-menu-item[aria-checked="true"] .ti-sort-menu-check {
    visibility: visible;
}

.em-edit-radio-option input[type="radio"]:checked ~ .em-edit-radio-label {
    color: var(--color-primary);
    font-weight: 500;
}

.em-edit-radio-label {
    font-size: 0.9em;
    color: var(--color-text-primary);
}


/* Effective Visibility Display */
.em-edit-effective-visibility {
    margin-top: 8px;
}

.em-effective-visibility-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-tertiary, #f5f5f5);
    border-radius: 6px;
    font-size: 0.9em;
}

.em-effective-label {
    color: var(--color-text-muted);
    font-weight: 500;
}

.em-effective-note-text {
    color: var(--color-text-muted);
    font-size: 0.9em;
}

.em-effective-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--color-bg-tertiary, #f5f5f5);
    border-radius: 6px;
    font-size: 0.85em;
}

.em-effective-timeline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.em-effective-timeline .em-timeline-name {
    color: var(--color-text-muted);
}

/* Timeline Checkbox List for Edit Panel */
.em-timeline-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-primary);
}

.em-timeline-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background-color 0.15s;
    white-space: nowrap;
    margin-bottom: 0;
}

.em-timeline-checkbox:hover {
    background: var(--color-surface-4);
}

.em-timeline-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.em-timeline-checkbox-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 8px;
    min-width: 0;
}

.em-timeline-name {
    font-size: 0.95em;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.em-timeline-visibility {
    font-size: 0.85em;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Edit Form Loading & Error States */
.em-edit-loading,
.em-edit-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    text-align: center;
    color: var(--color-text-muted);
}

.em-edit-error {
    color: var(--color-status-error);
}

.em-edit-form-error {
    padding: 12px 16px;
    background: var(--color-status-error-bg);
    border: 1px solid var(--color-status-error);
    border-radius: 6px;
    color: var(--color-status-error);
    font-size: 0.9em;
    margin-top: 10px;
    opacity: 0.9;
}

/* Inline edit error (used for validation messages) */
.em-edit-panel-body .em-edit-error {
    display: block;
    padding: 10px 12px;
    background: var(--color-status-error-bg);
    border: 1px solid var(--color-status-error);
    border-radius: 6px;
    color: var(--color-status-error);
    font-size: 0.9em;
    margin: 10px 0;
    text-align: left;
}

/* Section Divider for edit panel */
.em-edit-section-divider {
    height: 1px;
    background: var(--color-border-light);
    margin: 20px 0;
}

/* Timeline Edit Panel - Associated Events Section */
.tm-edit-events-section {
    margin-top: 0;
}

.tm-edit-events-count {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* NEW: Expanding flex layout for Events tab */
.timeline-events-panel {
    display: flex;
    flex-direction: column;
    flex: 1; /* Fill parent flex container */
    min-height: 0; /* Allow flex children to shrink below content size */
    padding: 0 20px 20px 20px; /* No top padding */
    background: var(--color-bg-primary); /* Ensure solid background */
}

/* Timeline modals: remove horizontal padding (modal body already has 28px) and reduce top padding */
.timeline-modal--edc-spacing .timeline-events-panel {
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;
}

/* Timeline Manager Events tab: lightweight section header (not modal header) */
.timelines-manager-modal .timeline-events-header {
    flex-shrink: 0; /* Don't shrink header */
    margin-bottom: 12px;
    background: transparent; /* Remove gray panel background */
    padding: 0 0 8px 0; /* Minimal vertical padding */
    border-bottom: 1px solid var(--color-border-light); /* Subtle divider */
}

.timelines-manager-modal .timeline-events-header label {
    display: block;
    margin-bottom: 0;
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: 0.95em;
}

.timeline-events-add-row {
    display: flex;
    gap: 6px;
    flex-shrink: 0; /* Don't shrink add row */
    margin-bottom: 16px; /* More space before list */
    align-items: center; /* Vertically center input and button */
}

/* Timeline tab controls (positioned above tab content, below tabs) */
.timeline-tab-controls {
    display: flex;
    gap: 12px;
    padding: 8px 12px 0 12px;
    margin-bottom: 0;
    align-items: center;
}

/* Inside timeline tab controls, remove extra vertical spacing from the shared connections search styles */
.timeline-tab-controls .edc-connected-search-section {
    margin-bottom: 0;
    align-self: center;
}

/* Profile options (kebab menu) in timeline tab controls */
.timeline-tab-controls .profile-options-container {
    align-self: center;
}

.timeline-tab-controls .profile-options-btn {
    width: 32px;
    /* Match the *visual* center by aligning to the input height without widening the button */
    height: 44px;
}

.timeline-events-tab-surface {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#tmTimelineEventMembershipPickerHost {
    position: absolute;
    inset: 0;
    z-index: 18;
    pointer-events: none;
}

#tmTimelineEventMembershipPickerHost:empty {
    display: none;
}

#tmEditPanel .timeline-event-membership-controls {
    padding: 8px 12px 0 12px;
    margin-bottom: 0;
}

/* Timeline info: event membership picker */
#timelineInfoModal .modal-content {
    position: relative;
}

#timelineInfoEventMembershipPickerHost,
#edcEventTimelineMembershipPickerHost {
    position: absolute;
    inset: 0;
    z-index: 18;
    pointer-events: none;
}

#timelineInfoEventMembershipPickerHost:empty,
#edcEventTimelineMembershipPickerHost:empty {
    display: none;
}

.timeline-event-membership-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.timeline-event-membership-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.timeline-event-membership-trigger {
    text-transform: lowercase;
}

.timeline-event-membership-trigger.is-open,
.timeline-event-membership-trigger:focus-visible {
    outline: none;
    border-color: rgba(var(--color-primary-rgb, 108, 117, 224), 0.26);
    background: var(--color-bg-tertiary, rgba(15, 23, 42, 0.03));
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 108, 117, 224), 0.06);
}

.timeline-event-membership-trigger-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.timeline-event-membership-trigger-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1;
}

.timeline-event-membership-picker-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.14);
    pointer-events: auto;
}

.timeline-event-membership-picker-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--color-surface-1, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.timeline-event-membership-picker-content--inline {
    width: 100%;
    max-height: min(420px, 52vh);
}

.timeline-event-membership-picker-content--overlay {
    width: min(520px, calc(100% - 48px));
    max-width: 520px;
    max-height: min(85%, var(--yrh-centered-modal-height, 640px));
}

.timeline-event-membership-picker-sheet-handle {
    display: none;
}

.timeline-event-membership-picker-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 18px 12px;
}

.timeline-event-membership-picker-header-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    width: 100%;
}

.timeline-event-membership-picker-header-top {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.timeline-event-membership-picker-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.timeline-event-membership-picker-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
}

.timeline-event-membership-picker-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.timeline-event-membership-picker-hint {
    margin: 2px 0 0;
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.timeline-event-membership-picker-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.timeline-event-membership-picker-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--color-text-primary);
}

.timeline-event-membership-picker-close:focus-visible {
    outline: 2px solid rgba(var(--color-primary-rgb, 108, 117, 224), 0.45);
    outline-offset: 2px;
}

.timeline-event-membership-picker-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 18px 14px;
    border-bottom: 1px solid var(--color-border-light);
}

.timeline-event-membership-picker-search-wrap {
    width: 100%;
}

.timeline-event-membership-picker-search {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(120, 132, 152, 0.24);
    border-radius: 10px;
    background: #ffffff;
    color: var(--color-text-primary);
    font-size: 0.92rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.timeline-event-membership-picker-search::placeholder {
    color: var(--color-text-muted);
}

.timeline-event-membership-picker-search:focus {
    outline: none;
    background: #ffffff;
    border-color: rgba(var(--color-primary-rgb, 108, 117, 224), 0.32);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 108, 117, 224), 0.06);
}

.timeline-event-membership-picker-filters {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: max-content;
    max-width: 100%;
    padding: 2px;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.03);
}

.timeline-event-membership-picker-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.timeline-event-membership-picker-filter:hover {
    background: rgba(15, 23, 42, 0.04);
    color: var(--color-text-primary);
}

.timeline-event-membership-picker-filter.is-active {
    border: 1px solid var(--color-border-light);
    background: #ffffff;
    color: var(--color-text-primary);
}

.timeline-event-membership-picker-filter:focus-visible {
    outline: 2px solid rgba(var(--color-primary-rgb, 108, 117, 224), 0.35);
    outline-offset: 1px;
}

.timeline-event-membership-picker-segmented {
    align-self: flex-start;
}

.timeline-event-membership-picker-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 0 8px;
}

.timeline-event-membership-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 13px 18px;
    border: none;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: transparent;
    text-align: left;
    cursor: pointer;
    /* Match the canvas event sidebar selection mechanics: same color, same
       timing, no iOS tap-flash. The button element gets the WebKit tap
       highlight by default which appears as a gray flicker on every tap. */
    transition: background 0.18s;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.timeline-event-membership-picker-row.is-added {
    /* Match .event-item.selected so the picker selection feels identical to
       the canvas bottom sheet selection. */
    background: rgba(123, 107, 192, 0.06);
}

@media (hover: hover) and (pointer: fine) {
    .timeline-event-membership-picker-row:hover {
        background: rgba(0, 0, 0, 0.03);
    }

    .timeline-event-membership-picker-row.is-added:hover {
        background: rgba(123, 107, 192, 0.08);
    }
}

.timeline-event-membership-picker-row:focus-visible {
    outline: 2px solid rgba(var(--color-primary-rgb, 108, 117, 224), 0.35);
    outline-offset: -2px;
}

.timeline-event-membership-picker-row-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.timeline-event-membership-picker-row-name {
    color: var(--color-text-primary);
    font-size: 0.94rem;
    font-weight: 500;
}

.timeline-event-membership-picker-row-date {
    color: var(--color-text-muted);
    font-size: 0.79rem;
}

.timeline-event-membership-picker-row-date.is-empty {
    font-style: italic;
}

.timeline-event-membership-picker-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: transparent;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}

.timeline-event-membership-picker-indicator.is-added {
    color: var(--color-text-primary);
}

.timeline-event-membership-picker-empty {
    padding: 34px 20px 24px;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    text-align: center;
}

/* Base style for tab control buttons */
.timeline-tab-control-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Primary action: "+ add event" */
.timeline-tab-control-primary {
    color: var(--color-text-primary);
    border-color: var(--color-border-secondary);
}

.timeline-tab-control-primary:hover {
    background: var(--color-bg-tertiary, rgba(0,0,0,0.02));
    border-color: var(--color-border-secondary);
}

/* Secondary action: "bulk upload" - more subdued */
.timeline-tab-control-secondary {
    color: var(--color-text-secondary);
    border-color: var(--color-border-light);
    font-weight: 400;
}

.timeline-tab-control-secondary:hover {
    background: var(--color-bg-tertiary, rgba(0,0,0,0.02));
    color: var(--color-text-primary);
}

.timeline-tab-control-btn:focus {
    outline: none;
}

.timeline-tab-control-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.timeline-tab-control-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* “+ event” button (replaces datalist input + plus button) */
.timeline-events-open-picker-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    color: var(--color-text-secondary);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.timeline-events-open-picker-btn:hover {
    background: var(--color-bg-tertiary, rgba(0,0,0,0.02));
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.timeline-events-open-picker-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.timeline-events-open-picker-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.timeline-events-add-input {
    flex: 1;
    padding: 10px 12px; /* Slightly more padding for better visual weight */
    border: 2px solid var(--color-border-light);
    border-radius: 6px;
    font-size: 0.95em; /* Slightly larger text */
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}

.timeline-events-add-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); /* Subtle focus ring */
}

.timeline-events-list-container {
    flex: 1; /* Take remaining space */
    min-height: 0; /* Allow scrolling */
    overflow-y: auto; /* Scroll when content exceeds space */
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
    background: var(--color-bg-primary); /* Solid background to prevent any transparency */
}

/* Smooth scrollbar styling for events list */
.timeline-events-list-container::-webkit-scrollbar {
    width: 8px;
}

.timeline-events-list-container::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: 4px;
}

.timeline-events-list-container::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
    border-radius: 4px;
}

.timeline-events-list-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-dark);
}

/* ========================================
   TIMELINE EVENTS TAB - ALL SURFACES
   (Canvas Modals + Timeline Info Modal)
   ======================================== 
   
   VISUAL PARITY NOTES:
   - All headers use lightweight style (no gray background, subtle border-bottom)
   - All add-rows use .timeline-events-add-input (10px 12px padding, focus ring)
   - All list containers use custom scrollbar (8px width, gray track)
   - All buttons use .edc-chip-add-btn (consistent size/color)
   - Empty states use .tm-edit-events-empty or .event-card-placeholder-section
*/

/* Canvas timeline modals: Events tab content needs height context */
#canvasCreateTimelineTabContent .timeline-events-panel,
#canvasTimelineTabContent .timeline-events-panel {
    height: 100%; /* Fill the tab content container */
}

/* Canvas timeline modals: Header styling (lightweight) */
#canvasCreateTimelineTabContent .timeline-events-header,
#canvasTimelineTabContent .timeline-events-header {
    flex-shrink: 0;
    margin-bottom: 12px;
    background: transparent;
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--color-border-light);
}

#canvasCreateTimelineTabContent .timeline-events-header label,
#canvasTimelineTabContent .timeline-events-header label {
    display: block;
    margin-bottom: 0;
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: 0.95em;
}

/* Timeline Info Modal: Events tab (read-only version) */
#timelineInfoTabContent .timeline-events-panel {
    height: 100%; /* Fill the tab content container */
}

/* Timeline Info Modal: Header styling (lightweight) */
#timelineInfoTabContent .timeline-events-header {
    flex-shrink: 0;
    margin-bottom: 12px;
    background: transparent;
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--color-border-light);
}

#timelineInfoTabContent .timeline-events-header label {
    display: block;
    margin-bottom: 0;
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: 0.95em;
}

/* Read-only modifier: no add-row needed */
.timeline-events-panel--readonly .timeline-events-add-row {
    display: none;
}

/* Timeline tab content containers need flex context for Events tab */
#canvasCreateTimelineTabContent,
#canvasTimelineTabContent,
#timelineInfoTabContent {
    display: flex;
    flex-direction: column;
    flex: 1; /* Fill remaining space after tabs */
    min-height: 0; /* Allow flex child to shrink */
}

/* Ensure parent modal scroll body provides height for timeline modals */
.timeline-modal--edc-spacing .c-modal-scroll-body {
    display: flex;
    flex-direction: column;
}

/* DEPRECATED - Old sticky approach (keep for now in case other code references) */
.tm-edit-events-add {
    margin-bottom: 16px;
    /* Removed sticky positioning - using new flex layout instead */
}

.tm-edit-events-add-wrapper {
    display: flex;
    gap: 6px;
}

.tm-edit-events-add-input {
    flex: 1;
    padding: 8px 10px;
    border: 2px solid var(--color-border-light);
    border-radius: 6px;
    font-size: 0.9em;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.tm-edit-events-add-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
}

/* DEPRECATED - Old list without scrolling */
.tm-edit-events-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
}

/* Remove scrollbar styles since list no longer scrolls independently */

/* Compact event card variant */
.tm-edit-event-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.tm-edit-event-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px var(--color-brand-primary-20);
}

.tm-edit-event-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tm-edit-event-name {
    font-weight: 500;
    font-size: 0.88em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.tm-edit-event-date {
    font-size: 0.75em;
    opacity: 0.85;
    line-height: 1.2;
}

.tm-edit-event-date.no-date {
    opacity: 0.6;
    font-style: italic;
}

.tm-edit-event-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--color-text-inverse);
    opacity: 0.7;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.tm-edit-event-remove:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.tm-edit-events-empty {
    padding: 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85em;
    font-style: italic;
}

.tm-edit-events-empty p {
    margin: 0;
}

/* Danger Zone - Delete Section */
.em-edit-danger-zone {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
}

.em-edit-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-status-error);
    border-radius: 8px;
    background: var(--color-status-error-bg);
    color: var(--color-status-error);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.8;
}

.em-edit-delete-btn:hover {
    background: var(--color-status-error-bg);
    border-color: var(--color-status-error);
    opacity: 1;
}

.em-edit-delete-btn svg {
    flex-shrink: 0;
}

/* Responsive adjustments for edit panel */
@media (max-width: 768px) {
    .em-edit-panel {
        width: 100%;
        /* transform already handles positioning */
    }
}

@media (max-width: 480px) {
    .em-edit-panel-body {
        padding: 16px;
    }

    .em-edit-panel-footer {
        padding: 12px 16px;
    }

    .em-edit-form-group {
        margin-bottom: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BULK ACTION MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

.em-bulk-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-attachment-sidebar);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.em-bulk-modal.show {
    display: flex;
    opacity: 1;
}

.em-bulk-modal-content {
    background: var(--color-bg-primary);
    border-radius: 12px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px var(--color-overlay-dark-30);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.em-bulk-modal.show .em-bulk-modal-content {
    transform: scale(1);
}

.em-bulk-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.em-bulk-modal-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: var(--color-text-primary);
}

.em-bulk-modal-header h3 span {
    color: var(--color-primary);
    font-weight: 700;
}

.em-bulk-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-tertiary);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.em-bulk-modal-close:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary);
}

.em-bulk-modal-body {
    padding: 24px;
    overflow-y: visible;
    overflow-x: visible;
    flex: 1;
}

.em-bulk-modal-hint {
    margin: 0 0 20px 0;
    color: var(--color-text-secondary);
    font-size: 0.9em;
    line-height: 1.5;
}

.em-bulk-modal-subhint {
    margin: 8px 0 16px 0;
    color: var(--color-text-tertiary);
    font-size: 0.85em;
    font-style: italic;
}

.em-bulk-form-group {
    margin-bottom: 20px;
}

.em-bulk-form-group label {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
    font-size: 0.95em;
}

.em-bulk-form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    font-size: 0.95em;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.em-bulk-form-control:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Styling for select dropdown options */
.em-bulk-form-control option {
    padding: 10px 14px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: none;
}

.em-bulk-form-control option:hover {
    background: var(--color-bg-secondary);
}

.em-bulk-form-control option:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Custom Visibility Dropdown for Bulk Modal */
.em-bulk-visibility-dropdown-wrapper {
    position: relative;
}

.em-bulk-form-group {
    overflow: visible;
}

.em-bulk-visibility-dropdown-anchor {
    position: relative;
    display: block;
}

.em-bulk-visibility-trigger {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.95em;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.em-bulk-visibility-trigger:hover {
    border-color: var(--color-primary);
}

.em-bulk-visibility-trigger:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-15);
}

.em-bulk-visibility-dropdown-anchor.is-open .em-bulk-visibility-trigger {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.em-bulk-visibility-arrow {
    color: var(--color-text-muted);
    font-size: 0.7em;
    transition: transform 0.2s;
}

.em-bulk-visibility-dropdown-anchor.is-open .em-bulk-visibility-arrow {
    transform: rotate(180deg);
}

.em-bulk-visibility-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 9999;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-top: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 10px 24px var(--color-overlay-dark-15);
    overflow: hidden;
    margin-top: 0;
}

.em-bulk-visibility-dropdown.is-hidden {
    display: none;
}

.em-bulk-visibility-dropdown-list {
    max-height: 240px;
    overflow-y: auto;
}

.em-bulk-visibility-option {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.15s;
    color: var(--color-text-primary);
    font-size: 0.95em;
}

.em-bulk-visibility-option:last-child {
    border-bottom: none;
}

.em-bulk-visibility-option:hover {
    background: var(--color-bg-secondary);
}

.em-bulk-form-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.em-bulk-form-group-inline {
    flex: 1;
}

.em-bulk-shift-input {
    width: 100%;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
}

.em-bulk-error {
    padding: 12px 16px;
    background: var(--color-status-error-bg);
    border: 1px solid var(--color-status-error);
    border-radius: 8px;
    color: var(--color-status-error);
    font-size: 0.9em;
    margin-top: 8px;
    opacity: 0.9;
}

.em-bulk-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    background: var(--color-bg-secondary);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.em-bulk-modal-footer .btn {
    padding: 10px 20px;
    font-size: 0.95em;
    border-radius: 8px;
}

.em-bulk-modal-footer .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BULK OPERATION TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

.em-bulk-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 0.95em;
    font-weight: 500;
    z-index: var(--z-billing-overlay);
    box-shadow: 0 8px 24px var(--color-overlay-dark-30);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.em-bulk-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Responsive adjustments for bulk modals */
@media (max-width: 480px) {
    .em-bulk-modal-content {
        max-width: calc(100% - 32px);
        margin: 16px;
    }

    .em-bulk-modal-header,
    .em-bulk-modal-body,
    .em-bulk-modal-footer {
        padding: 16px 20px;
    }

    .em-bulk-form-row {
        flex-direction: column;
        gap: 16px;
    }

    .em-bulk-modal-footer {
        flex-direction: column-reverse;
    }

    .em-bulk-modal-footer .btn {
        width: 100%;
    }

    .em-bulk-toast {
        left: 16px;
        right: 16px;
        transform: translateX(0) translateY(100px);
        text-align: center;
    }

    .em-bulk-toast.show {
        transform: translateX(0) translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT MANAGER PRO FEATURES - ADVANCED FILTERS PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

/* Filter Active Indicator Badge */
.em-filter-active-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: var(--color-status-error);
    border-radius: 50%;
    border: 2px solid var(--color-bg-primary, #fff);
    pointer-events: none;
}

/* Make the filter button relative for badge positioning */
.em-toolbar-btn[data-action="filters"] {
    position: relative;
}

/* Advanced Filters Slide-Out Panel */
.em-filters-panel {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 90vw;
    height: 100vh;
    background: var(--color-bg-primary, #fff);
    box-shadow: -4px 0 24px var(--color-overlay-dark-15);
    z-index: 11000;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.em-filters-panel.show {
    display: flex;
    transform: translateX(0);
}

.em-filters-panel-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.em-filters-panel-header h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 8px;
}

.em-filters-panel-header h3::before {
    content: "🔍";
}

.em-filters-panel-close {
    background: transparent;
    border: none;
    font-size: 1.1em;
    cursor: pointer;
    color: var(--color-text-tertiary, #6b7280);
    padding: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.em-filters-panel-close:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary, #111827);
}

.em-filters-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Filter Form Groups */
.em-filter-form-group {
    margin-bottom: 20px;
}

.em-filter-form-group label {
    display: block;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--color-text-secondary, #374151);
    margin-bottom: 8px;
}

.em-filter-input,
.em-filter-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.95em;
    background: var(--color-bg-primary, #fff);
    color: var(--color-text-primary, #111827);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.em-filter-input:focus,
.em-filter-select:focus {
    outline: none;
    border-color: var(--color-primary, #667eea);
    box-shadow: 0 0 0 3px var(--color-brand-primary-15);
}

.em-filter-input::placeholder {
    color: var(--color-text-muted, #9ca3af);
}

/* Date Range Row */
.em-filter-date-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.em-filter-date-row .em-filter-input {
    flex: 1;
}

.em-filter-date-separator {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.9em;
}

/* Multi-Select (Visibility, Categories) */
.em-filter-select[multiple] {
    height: auto;
    min-height: 100px;
    padding: 8px;
}

.em-filter-select[multiple] option {
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 2px;
}

.em-filter-select[multiple] option:checked {
    background: var(--color-primary, #667eea);
    color: var(--color-text-inverse);
}

/* Saved Views Section */
.em-saved-views-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.em-saved-views-section h4 {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-text-secondary, #374151);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.em-saved-views-section h4::before {
    content: "⭐";
    font-size: 0.9em;
}

.em-saved-views-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.em-saved-view-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-secondary, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.em-saved-view-item:hover {
    background: var(--color-surface-4);
    border-color: var(--color-primary, #667eea);
}

.em-saved-view-item.active {
    background: var(--color-brand-primary-10);
    border-color: var(--color-primary, #667eea);
}

.em-saved-view-name {
    flex: 1;
    font-size: 0.9em;
    color: var(--color-text-primary, #111827);
}

.em-saved-view-delete {
    background: transparent;
    border: none;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    padding: 4px;
    font-size: 1em;
    line-height: 1;
    transition: color 0.2s;
}

.em-saved-view-delete:hover {
    color: var(--color-status-error);
}

.em-save-view-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.em-save-view-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    font-size: 0.9em;
}

.em-save-view-row button {
    padding: 8px 16px;
    background: var(--color-primary, #667eea);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.em-save-view-row button:hover {
    background: var(--color-primary-dark);
}

.em-no-saved-views {
    font-size: 0.85em;
    color: var(--color-text-muted, #6b7280);
    text-align: center;
    padding: 12px;
    font-style: italic;
}

/* Filters Panel Footer */
.em-filters-panel-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    background: var(--color-bg-secondary, #f9fafb);
}

.em-filters-panel-footer .btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT MANAGER PRO FEATURES - EXPORT MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.em-export-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-attachment-sidebar);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.em-export-modal.open {
    display: flex;
}

.em-export-modal-content {
    background: var(--color-bg-primary, #fff);
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 50px var(--color-overlay-dark-20);
    overflow: hidden;
}

.em-export-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.em-export-modal-header h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 8px;
}

.em-export-modal-header h3::before {
    content: "📤";
}

.em-export-modal-close {
    background: transparent;
    border: none;
    font-size: 1.1em;
    cursor: pointer;
    color: var(--color-text-tertiary, #6b7280);
    padding: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.em-export-modal-close:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary, #111827);
}

.em-export-modal-body {
    padding: 24px;
}

/* Export Option Groups */
.em-export-option-group {
    margin-bottom: 20px;
}

.em-export-option-group label {
    display: block;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--color-text-secondary, #374151);
    margin-bottom: 10px;
}

.em-export-options {
    display: flex;
    gap: 12px;
}

.em-export-radio {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.em-export-radio:hover {
    background: var(--color-bg-secondary, #f9fafb);
}

.em-export-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary, #667eea);
}

.em-export-radio input[type="radio"]:checked + span {
    color: var(--color-primary, #667eea);
    font-weight: 500;
}

.em-export-radio:has(input:checked) {
    border-color: var(--color-primary, #667eea);
    background: var(--color-brand-primary-05);
}

.em-export-radio span {
    font-size: 0.95em;
    color: var(--color-text-primary, #111827);
}

/* Filename Preview */
.em-export-filename-preview {
    margin-top: 20px;
    padding: 12px 16px;
    background: var(--color-bg-secondary, #f9fafb);
    border-radius: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
}

.em-export-filename-preview span {
    display: block;
    font-size: 0.8em;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 4px;
}

.em-export-filename-preview code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    color: var(--color-primary, #667eea);
}

/* Export Modal Footer */
.em-export-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    background: var(--color-bg-secondary, #f9fafb);
}

.em-export-modal-footer .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 500;
}

/* Export Processing State */
.em-export-processing {
    display: none;
    text-align: center;
    padding: 20px;
}

.em-export-processing.active {
    display: block;
}

.em-export-processing-text {
    font-size: 0.9em;
    color: var(--color-text-secondary, #374151);
}

/* Hide export form when processing */
.em-export-modal-body.processing .em-export-form {
    display: none;
}

.em-export-modal-body.processing .em-export-processing {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT MANAGER PRO FEATURES - RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .em-filters-panel {
        width: 100%;
        max-width: none;
    }

    .em-filters-panel-body {
        padding: 16px;
    }

    .em-filter-date-row {
        flex-direction: column;
        gap: 8px;
    }

    .em-filter-date-separator {
        display: none;
    }

    .em-export-modal-content {
        max-width: calc(100% - 32px);
    }

    .em-export-options {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .em-filters-panel-header,
    .em-filters-panel-footer {
        padding: 16px 20px;
    }

    .em-export-modal-header,
    .em-export-modal-body,
    .em-export-modal-footer {
        padding: 16px 20px;
    }

    .em-export-modal-footer {
        flex-direction: column-reverse;
    }

    .em-export-modal-footer .btn {
        width: 100%;
    }
}

/* ========================================================================== */
/* NEW EVENT DETAILS CARD - Tabbed Interface */
/* ========================================================================== */

/* Overlay container */
#event-details-card-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.65);
    z-index: var(--z-modal-bulk-upload);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

#event-details-card-overlay.show {
    display: flex;
}

/* Main card container */
.event-details-card {
    background: var(--color-bg-primary);
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    width: min(var(--yrh-apple-modal-width, 620px), 95vw);
    max-width: var(--yrh-apple-modal-max-width, 680px);
    height: 85vh;
    display: flex;
    flex-direction: column;
    cursor: default;
    overflow: hidden;
    position: relative;
    /* Stabilize GPU layer to prevent corner flash during re-renders */
    isolation: isolate;
    will-change: transform;
    transform: translateZ(0);
}

/* Card content wrapper - needs explicit height constraint for scrolling */
#event-details-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Header section */
.event-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

/* Title row with inline edit icon */
.event-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.event-card-title {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    white-space: pre-line;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    max-height: 3.6em;
}

/* Small edit icon next to name */
.event-card-name-edit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
    opacity: 0.6;
}

.event-card-name-edit-icon:hover {
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    opacity: 1;
}

.event-card-name-edit-icon svg {
    width: 16px;
    height: 16px;
}

/* Hide name edit icon when notes tab is active */
#event-details-card-overlay[data-active-tab="notes"] .event-card-name-edit-icon {
    display: none !important;
}

.event-card-edit-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Close buttons: restored globally (see docs/LOWERCASE_UI_STANDARD.md). */

.event-card-edit-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-medium);
    color: var(--color-text-primary);
}

.event-card-edit-btn svg {
    width: 16px;
    height: 16px;
}

/* Status toggle in header */
.event-card-header-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.event-card-header-toggle .edc-status-toggle {
    gap: 6px;
}

.event-card-header-toggle .edc-status-slider {
    width: 32px;
    height: 18px;
}

.event-card-header-toggle .edc-status-slider::before {
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
}

.event-card-header-toggle .edc-status-checkbox:checked + .edc-status-slider::before {
    transform: translateX(14px);
}

/* Container for right-side header elements (toggle + actions) */
.event-card-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT CARD SIDEBAR COMPACT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Compact header for sidebar */
.event-card-header--compact {
    padding: 12px 16px;
}

.event-card-header--compact .event-card-title {
    font-size: 1.1em;
}

/* Compact tabs for sidebar - horizontal scroll on mobile */
.event-card-tabs--compact {
    /* Match modal tab strip gutters */
    padding: 0 var(--panel-space-6, 24px);
    gap: 1px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.event-card-tabs--compact::-webkit-scrollbar {
    display: none;
}

.event-card-tab--compact {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 0.9em;
}

/* Sidebar content area adjustments */
.event-card-content--sidebar {
    padding: 0;
}

.event-card-sidebar-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-top: none;
    background: transparent;
    flex-shrink: 0;
}

/* Sidebar save success message */
.sidebar-save-success {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-status-success-bg);
    color: var(--color-status-success);
    border-bottom: 1px solid var(--color-status-success);
    font-size: 0.9em;
    font-weight: 500;
    flex-shrink: 0;
    animation: slideInUp 0.3s ease-out;
}

.sidebar-save-success svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.sidebar-save-no-changes {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-surface-4);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-lighter);
    font-size: 0.9em;
    font-weight: 500;
    flex-shrink: 0;
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sidebar edit-event marker (Event Manager) */
/* #eventSidebarContent.sidebar-edit-mode is a marker class for sibling/header rules */

#eventDetailsSidebar:has(> #eventSidebarContent.sidebar-edit-mode) > .yh-sidebar__header .yh-sidebar__close {
    display: none;
}

/* Sidebar action bar - contains edit/save/cancel buttons */
.event-sidebar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align with sidebar tab/body horizontal padding */
    padding: 8px 28px;
    border-bottom: 1px solid var(--color-border-light, #e3e3e3);
    background: transparent;
    gap: 8px;
}

.event-sidebar-actions--create {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.event-sidebar-actions .event-card-name-input--sidebar {
    flex: 1;
    min-width: 0;
}

.event-sidebar-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.event-card-name-input--sidebar {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light, #ddd);
    border-radius: 6px;
    font-size: 1em;
}

.event-card-name-input--sidebar:focus {
    outline: none;
    border-color: var(--color-primary, #667eea);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

/* Tabs section - styled to match account modal */
.event-card-tabs {
    display: flex;
    justify-content: flex-start;
    gap: 1px;
    margin: 0;
    padding: 0 var(--panel-space-6, 24px);
    border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
    background: transparent;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.event-card-tabs::-webkit-scrollbar {
    display: none;
}

/* Event Details SIDEBAR: ensure tabs can scroll without expanding panel width */
#eventDetailsSidebar .event-card-tabs {
    padding: 0 16px;
}

.event-card-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    min-height: 44px;
    padding: var(--panel-space-3, 12px) var(--panel-space-4, 16px);
    font-size: var(--panel-font-body-size, 1rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    color: var(--panel-text-muted, var(--color-text-muted));
    cursor: pointer;
    border-bottom: 3px solid transparent;
    border-radius: var(--panel-radius-sm, 6px) var(--panel-radius-sm, 6px) 0 0;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

#eventDetailsSidebar .event-card-tab {
    padding: 10px 12px;
    font-size: 0.9em;
}

@media (hover: hover) and (pointer: fine) {
    .event-card-tab:hover {
        color: var(--panel-text, var(--color-text-primary));
        background: var(--panel-surface-muted, var(--color-surface-4));
    }
}

.event-card-tab.active {
    color: var(--panel-text, var(--color-text-primary));
    border-bottom-color: var(--panel-accent, var(--color-primary));
}

/* Body/content section - scrollable */
.event-card-body {
    flex: 1 1 0;
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* Footer container - holds meta and actions side-by-side */
.event-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: var(--color-bg-secondary);
    flex-shrink: 0;
    min-height: 48px;
    /* Explicit radius to match container corners during re-renders */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Last edited metadata footer line - left aligned */
.event-card-last-edited {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: left;
    flex-shrink: 1;
    min-width: 0;
}

/* Footer with action buttons - right aligned */
.event-card-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 0;
}

/* Details tab styles */
.event-card-detail-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    max-width: 200px;
}

/* Two-column layout for details and notes */
.event-card-detail-section.event-card-details-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Left column - metadata */
.edc-details-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

/* Right column - notes */
.edc-details-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Details tab: two-column view with photo preview ── */
.edc-details-view-columns {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: start;
    height: 100%;
}
.edc-details-view-columns.edc-details-view-columns--single {
    grid-template-columns: 1fr;
}
.edc-details-view-columns.edc-details-view-columns--single .edc-details-view-right {
    display: none;
}
.edc-details-view-left {
    min-width: 0;
}
.edc-details-view-right {
    min-width: 0;
    height: 100%;
}

/* Photo preview — 5-col × 4-row grid that fills available space */
.edc-photo-preview-cluster {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    height: 100%;
    min-height: 260px;
    cursor: pointer;
    place-items: center;
}

.edc-photo-preview-thumb {
    width: 100%;
    aspect-ratio: 1;
    max-width: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--color-bg-primary, #fff);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
    background: var(--color-bg-secondary, #f0f0f0);
}
.edc-photo-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.edc-photo-preview-thumb img[complete],
.edc-photo-preview-thumb img.is-loaded {
    opacity: 1;
}

/* Icon row styling */
.event-card-detail-row--with-icon {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.event-card-detail-with-icon {
    display: flex;
    align-items: center;
    gap: 6px;
}

.event-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.event-card-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

/* Status toggle styling for event details card */
.edc-status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.edc-status-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.edc-status-slider {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--color-border-medium);
    border-radius: 20px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.edc-status-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--color-bg-primary);
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px var(--color-overlay-dark-20);
}

.edc-status-checkbox:checked + .edc-status-slider {
    background: var(--color-status-success);
}

.edc-status-checkbox:checked + .edc-status-slider::before {
    transform: translateX(16px);
}

.edc-status-checkbox:focus-visible + .edc-status-slider {
    outline: 2px solid var(--color-primary, #667eea);
    outline-offset: 2px;
}

.edc-status-toggle:hover .edc-status-slider {
    background: var(--color-border-dark);
}

.edc-status-toggle:hover .edc-status-checkbox:checked + .edc-status-slider {
    background: var(--color-status-success);
    opacity: 0.9;
}

/* Edit icon in top right of Details tab */
.event-card-details-edit-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.event-card-details-edit-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.event-card-details-edit-btn svg {
    width: 16px;
    height: 16px;
}

.event-card-detail-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Visibility row needs special styling for the selector */
.event-card-detail-row--visibility .c-visibility-selector {
    margin-top: 4px;
}

.event-card-detail-label {
    font-size: 0.85em;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: none;
    letter-spacing: var(--letter-spacing-ui);
}

.event-card-detail-value {
    font-size: 1em;
    color: var(--color-text-primary);
}

.event-card-detail-value.status-active {
    color: var(--color-text-primary);
    font-weight: inherit;
}

.event-card-detail-value.status-inactive {
    color: var(--color-text-primary);
}

.event-card-visibility-label {
    text-transform: capitalize;
}

.event-card-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: var(--color-border-light);
}

.event-card-status-dot.is-active {
    background: var(--color-status-success);
}

.event-card-status-dot.is-inactive {
    background: var(--color-border-light);
}

.event-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Details tab: keep excessive tags from forcing the whole tab to scroll.
   Instead, make the tags area its own scrollable box when it grows large. */
#event-details-card-overlay[data-active-tab="details"] .event-card-detail-row .event-card-tags {
    /* ~2 chip rows (chip ~24-26px tall) + gap + padding */
    max-height: 80px;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: flex-start;
    padding: 10px;
    border: 1px solid var(--panel-border-subtle, var(--color-border-light));
    border-radius: 12px;
    background: var(--panel-surface-subtle, var(--color-bg-secondary));
    scrollbar-gutter: stable;
}


.event-card-notes-row {
    margin-top: 8px;
}

.event-card-notes {
    font-size: 0.95em;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

/* Notes tab styling */
.event-card-notes-tab {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

.edc-notes-view-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.edc-notes-content {
    flex: 1;
    font-size: 0.95em;
    color: var(--color-text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
    padding: 12px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
}

.edc-notes-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: var(--color-text-muted);
    font-size: 0.95em;
}

.edc-notes-edit-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    position: relative;
}

.edc-notes-edit-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
}

.edc-notes-view-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    min-height: 32px;
}

.edc-notes-full-textarea {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    resize: none;
    overflow-y: auto;
}

/* Notes tab: FORCE all containers to fill available height */
#event-details-card-overlay[data-active-tab="notes"] .event-card-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 12px;
}

#event-details-card-overlay[data-active-tab="notes"] .event-card-notes-tab {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

#event-details-card-overlay[data-active-tab="notes"] .edc-notes-edit-container {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
}

#event-details-card-overlay[data-active-tab="notes"] .edc-notes-full-textarea {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
}

.edc-notes-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.edc-notes-textarea {
    min-height: 150px;
}

.edc-notes-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8em;
    color: var(--color-text-muted);
}

.edc-notes-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    color: var(--color-text-secondary);
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.edc-notes-edit-btn:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.edc-notes-edit-btn svg {
    flex-shrink: 0;
}

.edc-notes-separator {
    color: var(--color-border-light);
}

.edc-notes-char-count,
.edc-notes-word-count,
.edc-notes-modified {
    white-space: nowrap;
}

/* Placeholder content styles */
.event-card-placeholder-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.event-card-placeholder-icon {
    font-size: 3em;
    margin-bottom: 16px;
    opacity: 0.5;
}

.event-card-placeholder {
    font-size: 1.1em;
    color: var(--color-text-muted);
    margin: 0 0 8px;
}

.event-card-placeholder-hint {
    font-size: 0.9em;
    color: var(--color-text-light);
    margin: 0;
}

/* Empty/placeholder value text */
.event-card-empty-value {
    color: var(--color-text-muted);
    font-style: italic;
    opacity: 0.8;
}

/* ========================================
   EVENT CARD EDIT MODE STYLES
   ======================================== */

/* Edit mode header */
.event-card-header-edit {
    flex-wrap: wrap;
    gap: 12px;
}

.event-card-name-input {
    display: block;
    width: 100%;
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    font-size: 1.3em;
    font-weight: 600;
    border: 2px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-family: inherit;
    line-height: 1.2;
    resize: none;
    overflow-y: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    transition: border-color 0.2s;
}

.event-card-name-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-secondary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

/* Sidebar variant must override base edit-mode input styles (defined above).
   Without this, the sidebar name field inherits the large modal title styling. */
.event-card-name-input.event-card-name-input--sidebar {
    min-width: 0;
    padding: 10px 12px;
    font-size: 1em;
    font-weight: 600;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-secondary);
}

.event-card-name-input.event-card-name-input--sidebar:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

.event-card-name-input-edit {
    display: block;
    width: 100%;
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    font-size: 1.3em;
    font-weight: 600;
    border: 2px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-family: inherit;
    line-height: 1.2;
    resize: none;
    overflow-y: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    transition: border-color 0.2s;
}

.event-card-name-input-edit:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-secondary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}

.event-card-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.event-card-save-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--color-primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.event-card-save-btn:hover {
    background: var(--color-primary-dark, #4a5fd9);
    transform: translateY(-1px);
}

.event-card-save-btn svg {
    width: 16px;
    height: 16px;
}

.event-card-cancel-btn {
    padding: 10px 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.event-card-cancel-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-medium);
}

/* Create button (for create mode) */
.event-card-create-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--color-status-success);
    border: none;
    border-radius: 8px;
    color: var(--color-text-inverse);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.event-card-create-btn:hover {
    background: var(--color-status-success);
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--color-overlay-dark-20);
}

.event-card-create-btn svg {
    width: 16px;
    height: 16px;
}

/* Create mode header styling - inline layout with input and buttons on same row */
.event-card-header.event-card-header-create {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.event-card-header.event-card-header-create .event-card-name-input {
    flex: 0 1 350px !important;
    min-width: 150px !important;
    max-width: 350px;
    width: 350px;
}

.event-card-header.event-card-header-create .event-card-header-actions {
    flex-shrink: 0;
    margin-left: auto;
}

/* Create mode placeholder for disabled tabs */
.edc-create-mode-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    min-height: 200px;
}

.edc-placeholder-icon {
    color: var(--color-text-muted);
    margin-bottom: 16px;
    opacity: 0.6;
}

.edc-placeholder-title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
}

.edc-placeholder-message {
    font-size: 0.95em;
    color: var(--color-text-secondary);
    margin: 0 0 20px 0;
    max-width: 280px;
}

.edc-placeholder-btn {
    padding: 10px 20px;
    background: var(--color-primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.edc-placeholder-btn:hover {
    background: var(--color-primary-dark, #4a5fd9);
    transform: translateY(-1px);
}

/* Disabled tabs in edit mode */
.event-card-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.event-card-tab.disabled:hover {
    background: none;
    color: var(--color-text-muted);
}

/* Edit section container */
.event-card-edit-section {
    gap: 20px;
}

/* Edit actions at top of details tab */
.edc-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-border-light);
}

/* Required field indicator */
.edc-required {
    color: var(--color-status-error);
    margin-left: 2px;
}

/* Date inputs row */
.edc-date-inputs {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}

.edc-date-inputs[data-birth-date-locked="true"] {
    cursor: default;
}

.edc-date-inputs[data-birth-date-locked="true"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

.edc-date-inputs[data-birth-date-locked="true"] .edc-select,
.edc-date-inputs[data-birth-date-locked="true"] .edc-input {
    background: var(--panel-surface-muted, var(--color-surface-4));
    color: var(--color-text-muted);
    border-color: var(--color-border-light);
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

.edc-date-inputs[data-birth-date-locked="true"] .edc-select:disabled {
    opacity: 1;
    -webkit-text-fill-color: var(--color-text-muted);
}

.edc-select {
    -webkit-appearance: none;
    appearance: none;
    padding: 8px 12px;
    min-height: 36px;
    line-height: 1.2;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-secondary);
    background-image: none;
    color: var(--color-text-primary);
    font-size: 0.95em;
    box-shadow: none;
    -webkit-box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.edc-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.edc-select--constrained {
    max-width: 200px;
}

.edc-date-month {
    min-width: 90px;
}

.edc-date-day {
    min-width: 70px;
    max-height: 150px;
}

.edc-date-year {
    width: 80px;
}

/* ── Optional calendar picker (YRH_EVENT_DATE_OPTIONAL_CALENDAR_008) ── */
.edc-calendar-pick-row {
    position: relative;
    margin-top: 2px;
}

.edc-calendar-pick-link {
    all: unset;
    cursor: pointer;
    font-size: 0.8em;
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-ui);
    opacity: 0.8;
    transition: opacity 0.15s;
}

.edc-calendar-pick-link:hover,
.edc-calendar-pick-link:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

/* The native input is visually hidden but positioned so its picker
   anchors near the link text — no layout shift.
   On iPhone the input is stretched over the link so the direct tap
   opens the native date picker (iOS blocks programmatic showPicker). */
.edc-calendar-pick-native {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    opacity: 0;
    border: none;
    padding: 0;
    pointer-events: none;
}

@media (max-width: 459.98px) {
    /* On iPhone: stretch native input over the link text so
       the user's tap directly opens the OS date picker. */
    .edc-calendar-pick-native {
        width: 100%;
        height: 100%;
        pointer-events: auto;
    }
}

html.yrh-tier-tablet #upgradeModal .upgrade-modal-scroll-body {
    padding: 24px clamp(28px, 4vw, 40px) 28px;
}

html.yrh-tier-desktop[data-layout-input="touch"] #accountModal .modal-content,
html.yrh-tier-desktop[data-layout-input="touch"] #youModal .modal-content,
html.yrh-tier-desktop[data-layout-input="touch"] #profileModal .modal-content,
html.yrh-tier-desktop[data-layout-input="touch"] #deleteAccountModal .modal-content,
html.yrh-tier-desktop[data-layout-input="touch"] #changePasswordModal .modal-content,
html.yrh-tier-desktop[data-layout-input="touch"] #filterModal .modal-content,
html.yrh-tier-desktop[data-layout-input="touch"] #report-user-modal .modal-content {
    width: var(--yrh-secondary-modal-width, min(800px, calc(100vw - 88px)));
    max-width: var(--yrh-secondary-modal-width, min(800px, calc(100vw - 88px)));
    max-height: var(--yrh-primary-modal-height, min(860px, calc(100dvh - 88px)));
}

html.yrh-tier-desktop[data-layout-input="touch"] #accountModal .modal-content,
html.yrh-tier-desktop[data-layout-input="touch"] #youModal .modal-content {
    height: min(760px, calc(100dvh - (104px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
    max-height: min(760px, calc(100dvh - (104px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
}

html.yrh-tier-desktop[data-layout-input="touch"] #libraryModal .modal-content {
    width: min(620px, calc(100vw - 88px));
    max-width: min(620px, calc(100vw - 88px));
}

html.yrh-tier-desktop[data-layout-input="touch"] #event-details-card-overlay .event-details-card,
html.yrh-tier-desktop[data-layout-input="touch"] #timelineModal .modal-content.c-modal-size-lg-scroll,
html.yrh-tier-desktop[data-layout-input="touch"] #editTimelineModal .modal-content,
html.yrh-tier-desktop[data-layout-input="touch"] #timelineInfoModal .modal-content,
html.yrh-tier-desktop[data-layout-input="touch"] .event-library-content,
html.yrh-tier-desktop[data-layout-input="touch"] .timeline-library-content {
    width: var(--yrh-primary-modal-width, min(980px, calc(100vw - 88px)));
    max-width: var(--yrh-primary-modal-width, min(980px, calc(100vw - 88px)));
    max-height: var(--yrh-primary-modal-height, min(860px, calc(100dvh - 88px)));
}

html.yrh-tier-desktop[data-layout-input="touch"] #timelineLibraryModal .timeline-library-content,
html.yrh-tier-desktop[data-layout-input="touch"] #timelineLibraryModal .tl-modal-content,
html.yrh-tier-desktop[data-layout-input="touch"] #eventManagerModal .event-library-content,
html.yrh-tier-desktop[data-layout-input="touch"] #eventManagerModal .event-manager-content,
html.yrh-tier-desktop[data-layout-input="touch"] #userDocumentsModal .attachments-manager-content.modal-content.c-modal-size-lg-scroll {
    height: var(--yrh-primary-modal-height, min(860px, calc(100dvh - 88px)));
    max-height: var(--yrh-primary-modal-height, min(860px, calc(100dvh - 88px)));
}

html.yrh-tier-desktop[data-layout-input="touch"] .event-manager-modal.show,
html.yrh-tier-desktop[data-layout-input="touch"] .event-library-modal.show,
html.yrh-tier-desktop[data-layout-input="touch"] .timeline-library-modal.show {
    padding: calc(28px + env(safe-area-inset-top, 0px)) var(--yrh-shell-inline-gutter, 28px) calc(28px + env(safe-area-inset-bottom, 0px));
}

html.yrh-tier-desktop[data-layout-input="touch"] #accountModal .account-tabs {
    gap: 16px;
}

html.yrh-tier-desktop[data-layout-input="touch"] #accountModal .account-tab-btn {
    padding: 14px 18px;
}

html.yrh-tier-desktop[data-layout-input="touch"] .account-modal-body {
    padding-top: 16px;
    padding-bottom: 28px;
}

html.yrh-tier-tablet #accountModal {
    --account-modal-inline-pad: var(--yrh-shell-inline-gutter, clamp(24px, 4vw, 32px));
}

html.yrh-tier-tablet #accountModal .modal-content,
html.yrh-tier-tablet #youModal .modal-content,
html.yrh-tier-tablet #event-details-card-overlay .event-details-card,
html.yrh-tier-tablet #timelineModal .modal-content.c-modal-size-lg-scroll,
html.yrh-tier-tablet #editTimelineModal .modal-content,
html.yrh-tier-tablet #timelineInfoModal .modal-content {
    height: var(--yrh-centered-modal-height, min(640px, calc(100dvh - (96px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))));
    max-height: var(--yrh-centered-modal-height, min(640px, calc(100dvh - (96px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))));
}

html.yrh-tier-tablet #youModal .modal-content,
html.yrh-tier-tablet #timelineModal .modal-content.c-modal-size-lg-scroll,
html.yrh-tier-tablet #editTimelineModal .modal-content,
html.yrh-tier-tablet #timelineInfoModal .modal-content {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

html.yrh-tier-tablet #accountModal .account-modal-body,
html.yrh-tier-tablet #profileModal .c-modal-body,
html.yrh-tier-tablet #report-user-modal .c-modal-body {
    padding-left: var(--yrh-shell-inline-gutter, clamp(24px, 4vw, 32px));
    padding-right: var(--yrh-shell-inline-gutter, clamp(24px, 4vw, 32px));
}

html.yrh-tier-tablet #event-details-card-overlay .c-modal-header,
html.yrh-tier-tablet #timelineModal .c-modal-header,
html.yrh-tier-tablet #editTimelineModal .c-modal-header,
html.yrh-tier-tablet #timelineInfoModal .c-modal-header,
html.yrh-tier-tablet #timelineModal .tm-edit-panel-tabs,
html.yrh-tier-tablet #editTimelineModal .tm-edit-panel-tabs,
html.yrh-tier-tablet #timelineInfoModal .tm-edit-panel-tabs {
    padding-left: var(--yrh-shell-inline-gutter, clamp(24px, 4vw, 32px));
    padding-right: var(--yrh-shell-inline-gutter, clamp(24px, 4vw, 32px));
}

html.yrh-tier-tablet #event-details-card-overlay .c-modal-footer,
html.yrh-tier-tablet #timelineModal .c-modal-footer,
html.yrh-tier-tablet #editTimelineModal .c-modal-footer,
html.yrh-tier-tablet #timelineInfoModal .c-modal-footer {
    padding-left: var(--yrh-shell-inline-gutter, clamp(24px, 4vw, 32px));
    padding-right: var(--yrh-shell-inline-gutter, clamp(24px, 4vw, 32px));
}

html.yrh-tier-tablet .event-manager-modal.show,
html.yrh-tier-tablet .event-library-modal.show,
html.yrh-tier-tablet .timeline-library-modal.show {
    padding: calc(32px + env(safe-area-inset-top, 0px)) var(--yrh-shell-inline-gutter, 32px) calc(32px + env(safe-area-inset-bottom, 0px));
}

@media (max-height: 760px) {
    html.yrh-shell-desktop #youModal.modal.show,
    html.yrh-shell-desktop #timelineModal.modal.show,
    html.yrh-shell-desktop #timelineInfoModal.modal,
    html.yrh-shell-desktop #editTimelineModal.modal {
        padding: calc(24px + env(safe-area-inset-top, 0px)) 0 calc(24px + env(safe-area-inset-bottom, 0px));
    }

    html.yrh-shell-desktop #youModal .modal-content,
    html.yrh-shell-desktop #timelineModal .modal-content.c-modal-size-lg-scroll,
    html.yrh-shell-desktop #editTimelineModal .modal-content,
    html.yrh-shell-desktop #timelineInfoModal .modal-content,
    html.yrh-shell-desktop #event-details-card-overlay .event-details-card {
        height: min(680px, calc(100dvh - (48px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
        max-height: min(680px, calc(100dvh - (48px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
    }

    html.yrh-shell-desktop #youModal .c-modal-header,
    html.yrh-shell-desktop #timelineModal .c-modal-header,
    html.yrh-shell-desktop #editTimelineModal .c-modal-header,
    html.yrh-shell-desktop #timelineInfoModal .c-modal-header {
        padding: 16px 18px 12px;
    }

    html.yrh-shell-desktop #timelineInfoModal .c-modal-header {
        min-height: 76px;
        max-height: 76px;
    }

    html.yrh-shell-desktop #youModal .you-tabs,
    html.yrh-shell-desktop #timelineModal .tm-edit-panel-tabs,
    html.yrh-shell-desktop #editTimelineModal .tm-edit-panel-tabs,
    html.yrh-shell-desktop #timelineInfoModal .tm-edit-panel-tabs {
        padding-left: 18px;
        padding-right: 18px;
    }

    html.yrh-shell-desktop #youModal .you-tab-btn,
    html.yrh-shell-desktop #timelineModal .tm-tab-btn,
    html.yrh-shell-desktop #editTimelineModal .tm-tab-btn,
    html.yrh-shell-desktop #timelineInfoModal .tm-tab-btn {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    html.yrh-shell-desktop #youModal .you-modal-body,
    html.yrh-shell-desktop #canvasCreateTimelineTabContent,
    html.yrh-shell-desktop #canvasTimelineTabContent,
    html.yrh-shell-desktop #timelineInfoTabContent,
    html.yrh-shell-desktop #event-details-card-overlay .event-card-body {
        padding: 18px 20px;
    }

    html.yrh-shell-desktop #youModal .you-modal-body {
        scrollbar-gutter: auto;
    }

    html.yrh-shell-desktop #youModal .c-modal-sticky-footer,
    html.yrh-shell-desktop #event-details-card-overlay .event-card-footer {
        padding: 10px 20px;
    }

    html.yrh-shell-desktop #event-details-card-overlay .event-card-header {
        padding: 18px 20px 12px;
        gap: 12px;
    }

    html.yrh-shell-desktop #event-details-card-overlay .event-card-title {
        font-size: 1.35em;
    }

    html.yrh-shell-desktop #timelineInfoModal .c-modal-header-with-photo .c-modal-title {
        font-size: 1.18rem;
    }

    html.yrh-shell-desktop #youModal .you-about-tab,
    html.yrh-shell-desktop #youModal .you-about-tab.you-about-tab--editing {
        padding: 20px 20px;
        gap: 12px;
    }

    html.yrh-shell-desktop #youModal .you-about-photo {
        width: 96px;
        height: 96px;
    }

    html.yrh-shell-desktop #youModal .you-about-edit-form {
        gap: 8px;
    }
}

.edc-input {
    padding: 8px 12px;
    min-height: 36px;
    line-height: 1.2;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.95em;
    transition: border-color 0.2s;
}

.edc-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Time inputs row */
.edc-time-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.edc-time-separator {
    font-weight: 600;
    color: var(--color-text-muted);
}

.edc-time-hour, .edc-time-minute {
    min-width: 65px;
}

.edc-time-ampm {
    min-width: 60px;
}

/* Chip input container for timelines/tags */
.edc-chip-input-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
}

.edc-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
}

.edc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px 7px 14px;
    background: var(--color-alert-info-bg);
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.85em;
    color: var(--color-text-muted);
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}

.edc-chip:hover {
    background: var(--color-brand-primary-15);
    border-color: var(--color-brand-primary-30);
}

.edc-chip-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selected timelines in event details card: allow longer names to show.
   Tags can stay compact, but timelines are often sentence-length. */
#edc-timelines-chips .edc-chip {
    max-width: 100%;
}

#edc-timelines-chips .edc-chip-text {
    display: inline-block;
    max-width: min(50ch, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edc-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--color-text-muted);
    opacity: 0.5;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s;
}

.edc-chip-remove:hover {
    opacity: 1;
}

.edc-chip-input-wrapper {
    display: flex;
    gap: 6px;
    max-width: 312px;
}

.edc-chip-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.95em;
    min-width: 120px;
}

.edc-chip-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.edc-chip-add-btn {
    padding: 8px 14px;
    background: var(--color-primary);
    border: none;
    border-radius: 6px;
    color: var(--color-text-inverse);
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.edc-chip-add-btn:hover {
    background: var(--color-primary-dark, #4a5fd9);
}

/* Notes textarea */
.edc-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.95em;
    font-family: inherit;
    line-height: 1.5;
    resize: none;
    min-height: 100px;
    transition: border-color 0.2s, background 0.2s;
}

.edc-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
}

/* Read-only textarea: white background, still scrollable */
.edc-textarea[readonly] {
    background: var(--color-bg-primary);
    cursor: default;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .event-details-card {
        width: 95%;
        max-height: 90vh;
        border-radius: 16px;
    }
    
    .event-card-header {
        padding: 20px 20px 14px;
    }
    
    .event-card-header-edit {
        padding: 16px 16px 12px;
    }
    
    .event-card-name-input {
        font-size: 1.1em;
        padding: 8px 12px;
    }
    
    .event-card-header-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .event-card-title {
        font-size: 1.3em;
    }
    
    .event-card-tabs {
        padding: 0 12px;
        justify-content: flex-start;
        gap: 1px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .event-card-tab {
        padding: 12px 14px;
        font-size: 0.85em;
    }
    
    .event-card-body {
        padding: 20px;
    }
    
    .event-card-edit-btn {
        padding: 6px 12px;
        font-size: 0.85em;
    }
    
    .edc-date-inputs,
    .edc-time-inputs {
        flex-wrap: wrap;
    }
    
    .edc-chip-input-wrapper {
        flex-wrap: wrap;
    }
    
    .edc-chip-input {
        min-width: 100%;
        flex: 1 1 100%;
    }
    
    .edc-chip-add-btn {
        flex: 0 0 auto;
    }
}

/* ========================================
   EVENT CARD ATTACHMENTS TAB STYLES
   ======================================== */

/* Attachments tab outer container */
.edc-attachments-tab {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border-light, #e0e0e0);
    border-radius: 12px;
    padding: 16px;
    gap: 12px;
}

/* Attachments header title */
.edc-attachments-header {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--color-text-primary, #333);
    text-align: left;
    margin-bottom: 4px;
}

/* Sub-tabs row (photos / documents) */
.edc-attachments-subtabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light, #e0e0e0);
}

/* Individual sub-tab button */
.edc-attachments-subtab-btn {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color-text-secondary, #666);
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-transform: lowercase;
}

.edc-attachments-subtab-btn:hover {
    background: var(--color-bg-secondary, #f5f5f5);
    color: var(--color-text-primary, #333);
}

/* Active sub-tab */
.edc-attachments-subtab-btn.attachments-subtab-active {
    background: var(--color-brand-primary-10);
    color: var(--color-primary, #5c6bc0);
    font-weight: 600;
}

/* Attachments content area */
.edc-attachments-content {
    margin-top: 8px;
    min-height: 100px;
}

/* Remove redundant styling from nested photo/doc tabs inside attachments */
.edc-attachments-content .edc-photos-tab,
.edc-attachments-content .edc-docs-tab {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}

/* Responsive adjustments for attachments tab */
@media (max-width: 480px) {
    .edc-attachments-tab {
        padding: 12px;
        border-radius: 8px;
    }
    
    .edc-attachments-subtabs {
        gap: 4px;
    }
    
    .edc-attachments-subtab-btn {
        padding: 6px 12px;
        font-size: 0.85em;
    }
}

/* ========================================
   EVENT CARD PHOTOS TAB STYLES
   ======================================== */

/* Photos tab container */
.edc-photos-tab,
.edc-documents-tab {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gap to prevent sticky issues */
    max-width: 100%;
    overflow-x: hidden;
    min-height: 0;
}

/* Photos tab should own scrolling, not the card body */
.edc-photos-tab {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Only the photo list should scroll (prevents header overlap + scrollbar-on-tiles) */
.edc-photos-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 8px;
    padding-right: 12px; /* keep scrollbar off the tiles */
    padding-bottom: 8px;
    scrollbar-gutter: stable;
}

/* Photos/Documents header with add button and count */
.edc-photos-header,
.edc-documents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
}

/* Photos header stays visible because only the grid scrolls */
.edc-photos-header {
    flex: 0 0 auto;
}

/* Add photos button */
.edc-add-photos-btn,
.edc-add-documents-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    color: var(--color-text-primary);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.edc-add-photos-btn:hover:not(:disabled),
.edc-add-documents-btn:hover:not(:disabled) {
    background: var(--color-bg-tertiary, rgba(0,0,0,0.02));
    border-color: var(--color-border-secondary);
}

.edc-add-photos-btn:disabled,
.edc-add-documents-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.edc-btn-icon {
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1;
}

/* Photos count badge */
.edc-photos-count {
    font-size: 0.9em;
    color: var(--color-text-muted);
}

/* Uploading indicator */
.edc-photos-uploading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    background: #eef1fd;
    border: 1px solid #667eea;
    border-radius: 10px;
    color: #333;
    font-size: 0.95em;
    font-weight: 500;
    margin-bottom: 10px;
}

/* Spinner animation */
.edc-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid #d0d5f2;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: edc-spin 0.8s linear infinite;
}

@keyframes edc-spin {
    to { transform: rotate(360deg); }
}

/* Small spinner for inside upload tiles */
.edc-spinner--tile {
    width: 14px;
    height: 14px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

/* Photo grid layout */
.edc-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-width: 100%;
    width: 100%;
}

/* Event Details SIDEBAR: keep photo tiles compact and stable (3 across)
   so photos never push the sidebar wider and don't balloon in size. */
#eventDetailsSidebar .edc-photos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* When photos tab is active, prevent the card body from scrolling */
#event-details-card-overlay[data-active-tab="photos"] .event-card-body,
#event-details-card-overlay[data-active-tab="photos"] .event-card-body--modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Sidebar variant (if data-active-tab is present on sidebar) */
#eventDetailsSidebar[data-active-tab="photos"] .event-card-body {
    overflow: hidden;
}

/* Individual photo item */
.edc-photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-secondary);
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.edc-photo-item:hover {
    box-shadow: 0 4px 12px var(--color-overlay-dark-15);
}

/* Photo thumbnail */
.edc-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.edc-photo-item:hover img {
    transform: none;
}

/* Progressive loading skeleton placeholder */
.edc-photo-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg-secondary);
    animation: edc-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
    z-index: 1;
}

@keyframes edc-skeleton-shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Upload progress tile styling */
.edc-upload-progress-tile {
    pointer-events: auto;
    border: 2px dashed #667eea;
}

.edc-upload-cancel-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.edc-upload-cancel-button:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Solid placeholder for upload tiles (no shimmer/blink) */
.edc-upload-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #eef1fd;
    border-radius: 6px;
    z-index: 1;
}

/* Kill shimmer animation on upload tiles — solid bg, not blinking */
.edc-upload-progress-tile .edc-photo-skeleton {
    animation: none;
    opacity: 1;
    background: #eef1fd;
}

.edc-upload-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    background: #667eea;
    transition: width 0.3s ease;
    z-index: 4;
    border-radius: 0 0 6px 6px;
}

/* Centered percentage — dark pill, visible on any background */
.edc-upload-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    padding: 5px 14px;
    border-radius: 20px;
    z-index: 3;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Upload done tile styling */
.edc-upload-done-tile {
    opacity: 1;
    border: 2px solid #27ae60;
}

.edc-upload-done-tile .edc-upload-progress-text {
    background: rgba(39, 174, 96, 0.9);
    color: white;
    font-size: 18px;
}

.edc-upload-done-check {
    font-weight: bold;
}

/* Upload error tile styling */
.edc-upload-error-tile {
    pointer-events: none;
    border: 2px solid #e74c3c;
}

.edc-upload-error-tile .edc-photo-skeleton,
.edc-upload-error-tile .edc-upload-placeholder {
    background: #fdf0ef;
    animation: none;
}

.edc-upload-error-text {
    background: rgba(231, 76, 60, 0.9) !important;
    color: white !important;
    font-weight: bold;
    font-size: 18px !important;
}

/* Document list skeleton row */
.edc-doc-skeleton {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--color-bg-secondary);
    border-radius: 6px;
    margin-bottom: 8px;
    animation: edc-skeleton-shimmer 1.5s ease-in-out infinite;
}

.edc-doc-skeleton-icon {
    width: 32px;
    height: 32px;
    background: var(--color-border-light);
    border-radius: 4px;
    margin-right: 12px;
}

.edc-doc-skeleton-content {
    flex: 1;
}

.edc-doc-skeleton-line {
    height: 12px;
    background: var(--color-border-light);
    border-radius: 3px;
    margin-bottom: 6px;
}

.edc-doc-skeleton-line:last-child {
    width: 60%;
    margin-bottom: 0;
}

/* Upload progress for document rows */
.edc-doc-upload-progress {
    opacity: 0.7;
}

.edc-doc-progress-bar {
    height: 3px;
    background: var(--color-primary);
    transition: width 0.3s ease;
    margin-top: 4px;
    border-radius: 2px;
}

/* Photo actions (match document tile styling) */
.edc-photo-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.edc-photo-item:hover .edc-photo-actions,
.edc-artifact-doc-tile:hover .edc-photo-actions {
    opacity: 1;
}

.edc-photo-action,
.edc-photo-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    color: var(--color-text-muted);
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.edc-photo-action:hover,
.edc-photo-remove:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.edc-photo-remove:hover {
    color: var(--color-status-error);
}

/* Back-compat: legacy photo remove button (match doc styling) */
.edc-photo-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    color: var(--color-text-muted);
    font-size: 0.9em;
    cursor: pointer;
    opacity: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    z-index: 2;
}

.edc-photo-item:hover .edc-photo-remove-btn {
    opacity: 1;
}

.edc-photo-remove-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--color-border-secondary);
    color: var(--color-status-error);
}

/* Photo info overlay */
/* Photo filename overlay — hidden; names removed from artifact tiles */
.edc-photo-info {
    display: none;
}

.edc-photo-item:hover .edc-photo-info {
    display: none;
}

.edc-photo-name {
    display: none;
}

/* Responsive adjustments for photos */
@media (max-width: 600px) {
    .edc-photos-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .edc-add-photos-btn,
    .edc-add-documents-btn {
        justify-content: center;
    }
    
    .edc-photos-count {
        text-align: center;
    }
    
    .edc-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    
    .edc-photo-actions {
        opacity: 1; /* Always show on mobile */
    }

    .edc-photo-action,
    .edc-photo-remove {
        width: 24px;
        height: 24px;
        font-size: 1.1em;
    }

    .edc-photo-remove-btn {
        opacity: 1;
        width: 24px;
        height: 24px;
        font-size: 1.1em;
    }
    
    .edc-photo-info {
        opacity: 1; /* Always show on mobile */
    }
}

/* ========================================
   EVENT CARD DOCUMENTS TAB STYLES
   ======================================== */

/* Documents tab container */
.edc-docs-tab {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Only the documents list should scroll (keeps header visible) */
.edc-docs-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 12px; /* keep scrollbar off tiles */
    padding-bottom: 8px;
    scrollbar-gutter: stable;
}

/* Documents header with add button and count */
.edc-docs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light);
}

/* Add documents button */
.edc-add-docs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    color: var(--color-text-primary);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.edc-add-docs-btn:hover:not(:disabled) {
    background: var(--color-bg-tertiary, rgba(0,0,0,0.02));
    border-color: var(--color-border-secondary);
}

.edc-add-docs-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Documents count badge */
.edc-docs-count {
    font-size: 0.9em;
    color: var(--color-text-muted);
}

/* Uploading indicator for documents */
.edc-docs-uploading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 0.95em;
}

/* Upgrade notice for free users */
.edc-docs-upgrade-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-alert-warning-bg);
    border: 1px solid var(--color-warning);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 0.9em;
}

.edc-upgrade-icon {
    font-size: 1.1em;
}

.edc-upgrade-text {
    font-weight: 500;
}

/* Documents list container */
.edc-docs-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gap; use borders for dividers */
}

/* Documents grid layout (photos-parity rhythm) */
.edc-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-width: 100%;
    width: 100%;
}

/* When documents tab is active, prevent the card body from scrolling */
#event-details-card-overlay[data-active-tab="documents"] .event-card-body,
#event-details-card-overlay[data-active-tab="documents"] .event-card-body--modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Event Details SIDEBAR: keep doc tiles compact (3 across), matching photos */
#eventDetailsSidebar .edc-docs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.edc-doc-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    transition: background 0.15s, border-color 0.15s;
}

.edc-doc-tile:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-medium, var(--color-border-light));
}

.edc-doc-tile-preview {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14px;
    color: var(--color-text-muted);
}

.edc-doc-tile-type {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--color-border-light);
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

/* Type colors (muted) */
.edc-doc-tile-type--excel {
    background: rgba(200, 230, 201, 0.95); /* muted green */
    border-color: rgba(46, 125, 50, 0.25);
    color: rgba(27, 94, 32, 0.9);
}

.edc-doc-tile-type--word {
    background: rgba(187, 222, 251, 0.95); /* muted light blue */
    border-color: rgba(30, 136, 229, 0.25);
    color: rgba(13, 71, 161, 0.9);
}

.edc-doc-tile-type--pdf {
    background: rgba(198, 40, 40, 0.92); /* Acrobat-ish red */
    border-color: rgba(198, 40, 40, 0.35);
    color: rgba(255, 255, 255, 0.95);
}

.edc-doc-tile-type--ppt {
    background: rgba(229, 115, 115, 0.92); /* muted red */
    border-color: rgba(183, 28, 28, 0.18);
    color: rgba(255, 255, 255, 0.95);
}

.edc-doc-tile-type--other {
    background: rgba(120, 120, 120, 0.2); /* soft gray fill */
    border-color: rgba(120, 120, 120, 0.35);
    color: rgba(70, 70, 70, 0.95);
}

.edc-doc-tile-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 10px;
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    /* Fixed block: 4 lines name + 1 line size (include padding so size never clips) */
    --edc-doc-info-pad-y: 8px;
    --edc-doc-name-lines: 4;
    --edc-doc-name-font-size: 0.9rem;
    --edc-doc-name-line-height: 1.2;
    --edc-doc-size-font-size: 0.75rem;
    --edc-doc-size-line-height: 1.2;
    --edc-doc-gap: 0.25rem;
    height: calc(
        (var(--edc-doc-name-font-size) * var(--edc-doc-name-line-height) * var(--edc-doc-name-lines))
        + (var(--edc-doc-size-font-size) * var(--edc-doc-size-line-height))
        + var(--edc-doc-gap)
        + (var(--edc-doc-info-pad-y) * 2)
    );
}

.edc-doc-tile-name {
    font-weight: 500;
    font-size: var(--edc-doc-name-font-size, 0.9rem);
    color: var(--color-text-primary);
    text-decoration: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--edc-doc-name-lines, 4);
    line-clamp: var(--edc-doc-name-lines, 4);
    -webkit-box-orient: vertical;
    line-height: var(--edc-doc-name-line-height, 1.2);
    max-height: calc(var(--edc-doc-name-font-size, 0.9rem) * var(--edc-doc-name-line-height, 1.2) * var(--edc-doc-name-lines, 4));
    margin-bottom: 0;
    flex: 0 1 auto;
}

.edc-doc-tile-name:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.edc-doc-tile-size {
    font-size: var(--edc-doc-size-font-size, 0.75rem);
    color: var(--color-text-muted);
    white-space: nowrap;
    line-height: var(--edc-doc-size-line-height, 1.2);
    height: calc(var(--edc-doc-size-font-size, 0.75rem) * var(--edc-doc-size-line-height, 1.2));
    flex-shrink: 0;
    margin-top: auto;
    overflow: hidden;
}

/* Actions: subtle, secondary, appear on hover */
.edc-doc-tile-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.edc-doc-tile:hover .edc-doc-tile-actions {
    opacity: 1;
}

.edc-doc-tile-action,
.edc-doc-tile-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    color: var(--color-text-muted);
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.edc-doc-tile-action:hover,
.edc-doc-tile-remove:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.edc-doc-tile-action--remove:hover,
.edc-doc-tile-remove:hover {
    color: var(--color-status-error);
}

/* Upload progress indicator */
.edc-doc-tile--upload {
    opacity: 0.85;
}

.edc-doc-tile-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background: var(--color-primary);
}

/* Loading skeleton tiles */
.edc-doc-tile--skeleton .edc-doc-tile-preview {
    background: var(--color-bg-secondary);
    animation: edc-skeleton-shimmer 1.5s ease-in-out infinite;
    font-size: 0;
}

.edc-doc-tile-skeleton-line {
    height: 10px;
    border-radius: 6px;
    background: var(--color-bg-tertiary, rgba(0,0,0,0.06));
    animation: edc-skeleton-shimmer 1.5s ease-in-out infinite;
}

.edc-doc-tile-skeleton-line.is-short {
    width: 55%;
}

/* ========================================
   DOCUMENT LIST ROWS (events + timelines)
   ======================================== */

.edc-doc-row-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.edc-doc-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border-bottom: 1px solid var(--color-border-light, #e5e7eb);
    transition: background 0.12s ease;
}

.edc-doc-row:hover {
    background: var(--color-surface-4);
}

.edc-doc-row-type {
    width: 32px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Documents tab: use the archival PDF sheet thumbnail + optional caption */
.edc-docs-tab .edc-doc-row {
    cursor: pointer;
}

.edc-docs-tab .edc-doc-row-type {
    width: 76px;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
}

.edc-docs-tab .edc-doc-row-type .yrh-pdf-sheet {
    width: 76px;
    height: 76px;
    background: var(--color-surface-1, #ffffff);
    border-radius: var(--radius-xl, 12px);
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--color-border-lightest);
    overflow: hidden;
    position: relative;
}

.edc-docs-tab .edc-doc-row-type .yrh-pdf-sheet-embed {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--color-surface-1, #ffffff);
    pointer-events: none;
    object-fit: contain;
}

.edc-docs-tab .edc-doc-row-type .yrh-pdf-unavailable {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.edc-docs-tab .yrh-pdf-caption {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edc-docs-tab .yrh-pdf-caption:empty {
    display: none;
}

.edc-docs-tab .edc-doc-row-name:empty {
    display: none;
}

/* Reuse the doc tile type pill, but make it flow inline for rows */
.edc-doc-row .edc-doc-tile-type {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    padding: 0;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.68em;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.edc-doc-row-type-skeleton {
    width: 24px;
    height: 17px;
    border-radius: 7px;
    background: var(--color-bg-tertiary, rgba(0,0,0,0.06));
    animation: edc-skeleton-shimmer 1.5s ease-in-out infinite;
}

.edc-doc-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edc-doc-row-name {
    font-weight: 500;
    font-size: 1em;
    color: var(--color-text-primary, #333);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edc-doc-row-name:hover {
    color: var(--color-primary, #5b6fd8);
    text-decoration: underline;
}

.edc-doc-row-sub {
    font-size: 0.78em;
    color: var(--color-text-muted, #888);
    line-height: 1.3;
}

.edc-doc-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Upload progress indicator for row uploads */
.edc-doc-row--upload {
    border: 2px dashed #667eea;
    pointer-events: none;
}

.edc-doc-row-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #667eea;
}

@media (max-width: 600px) {
    .edc-doc-row {
        padding: 10px 10px;
    }

    .edc-doc-row-type {
        width: 29px;
        height: 25px;
    }
}

/* Individual document item - Professional list-row style (Google Drive inspired) */
.edc-doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px; /* Slightly increased vertical padding for better spacing */
    background: transparent;
    border-radius: 0;
    border-left: none;
    border-bottom: 1px solid var(--color-border-light, #e5e7eb);
    transition: background 0.12s ease;
}

.edc-doc-item:hover {
    background: var(--color-surface-4);
}

/* Document icon - Hidden for cleaner look */
.edc-doc-icon {
    display: none; /* Removed to focus on filename and actions */
}

/* Document info container - Grows to fill space */
.edc-doc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Clearer visual separation between filename and metadata */
}

/* Document name/link - Primary focus */
.edc-doc-name {
    font-weight: 500;
    font-size: 0.95em;
    color: var(--color-text-primary, #333);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.edc-doc-name:hover {
    color: var(--color-primary, #5b6fd8);
    text-decoration: underline;
}

/* Document metadata row - Groups size and tags inline */
.edc-doc-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Document metadata (size) - Secondary info */
.edc-doc-meta {
    font-size: 0.78em;
    color: var(--color-text-muted, #888);
    line-height: 1.3;
    font-weight: 400;
}

/* Attachment tags in Event Details Card documents list */
.edc-attachment-tags {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.edc-tag-overflow {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: var(--color-border-lighter);
    border-radius: 12px;
    font-size: 0.75em;
    color: var(--color-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

/* Attachment tags pills container - Inline with metadata */
.edc-attachment-tags-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.edc-tag-pill-small {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: var(--color-alert-info-bg);
    border-radius: 10px;
    font-size: 0.68em;
    color: var(--color-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.edc-tag-overflow-small {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: var(--color-border-lighter);
    border-radius: 10px;
    font-size: 0.68em;
    color: var(--color-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.edc-tag-empty {
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
    font-size: 0.68em;
    color: var(--color-text-muted);
    font-style: italic;
    font-weight: 500;
    white-space: nowrap;
}

/* Document actions - Grouped on the right */
.edc-doc-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0.5; /* Subtle at rest */
    transition: opacity 0.15s ease;
}

.edc-doc-item:hover .edc-doc-actions {
    opacity: 1; /* Fully visible on hover */
}

/* ========================================
   DOCUMENT CARDS - Lightweight card style for Event Details Card
   ======================================== */

.edc-docs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 480px;
}

.edc-doc-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    transition: background 0.15s, border-color 0.15s;
}

.edc-doc-card:hover {
    background: var(--color-surface-4);
    border-color: var(--color-border-medium, var(--color-border-light));
}

.edc-doc-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edc-doc-card-name {
    font-weight: 500;
    font-size: 0.95em;
    color: var(--color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}

.edc-doc-card-name:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.edc-doc-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
    color: var(--color-text-muted);
}

.edc-doc-card-size {
    color: var(--color-text-muted);
}

.edc-doc-card-divider {
    color: var(--color-text-muted);
    opacity: 0.5;
}

.edc-doc-card-tag {
    color: var(--color-text-secondary);
}

.edc-doc-card-tag-more {
    color: var(--color-text-muted);
    font-size: 0.9em;
}

.edc-doc-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.edc-doc-card:hover .edc-doc-card-actions {
    opacity: 1;
}

.edc-doc-card-edit,
.edc-doc-card-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--color-text-muted);
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.edc-doc-card-edit:hover {
    background: var(--color-bg-secondary);
    color: var(--color-primary);
}

.edc-doc-card-remove:hover {
    background: var(--color-bg-secondary);
    color: var(--color-status-error);
}

/* Edit tags button - Refined compact style */
.edc-edit-tags-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.85em;
    color: var(--color-text-muted, #888);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    pointer-events: auto; /* Re-enable clicks for button inside non-interactive overlay */
}

.edc-edit-tags-btn:hover {
    background: var(--color-brand-primary-10);
    border-color: var(--color-primary, #5b6fd8);
    color: var(--color-primary, #5b6fd8);
}

.edc-edit-tags-btn:active {
    transform: scale(0.96);
}

/* Remove document button - Refined compact style */
.edc-doc-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.85em;
    color: var(--color-text-muted, #888);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.edc-doc-remove-btn:hover {
    background: var(--color-status-error-bg);
    border-color: var(--color-status-error);
    color: var(--color-status-error);
}

/* Responsive adjustments for documents */
@media (max-width: 600px) {
    .edc-docs-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .edc-add-docs-btn {
        justify-content: center;
    }
    
    .edc-docs-count {
        text-align: center;
    }
    
    .edc-docs-upgrade-notice {
        flex-direction: column;
        text-align: center;
    }
    
    .edc-doc-item {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .edc-doc-icon {
        font-size: 1.3em;
        width: 28px;
    }
    
    .edc-doc-name {
        font-size: 0.95em;
    }
    
    .edc-doc-remove-btn {
        opacity: 1; /* Always show on mobile */
    }
}

/* ========================================
   SHARED SEARCH/DROPDOWN TAB STYLES
   (Used by timeline editing, attachment manager, bulk upload)
   ======================================== */

/* Shared tab container */
.edc-connected-tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ========================================
   TAGS LIBRARY MODAL (uses connected-list row style)
   ======================================== */


@media (max-width: 820px) {

}

/* ========================================
   TAG ASSOCIATIONS MODAL
   (opened from Tags Library -> open)
   Tabs live under the header; content scrolls below.
   ======================================== */


/* Inline tag name editing */
.tag-assoc-name-input {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    padding: 4px 8px;
    margin: -4px 0;
    color: var(--color-text-primary);
    min-width: 150px;
    max-width: 300px;
}

.tag-assoc-name-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-brand-primary-15);
}


/* Search section */
.edc-connected-search-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0;
    margin-bottom: 16px;
    position: relative;
    flex-shrink: 0;
}

/* When dropdown is open, visually merge input + dropdown (no gap) */


/* Search input wrapper */
.edc-connected-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Search input */
.edc-connected-search-input {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.95em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.edc-connected-search-section.is-open .edc-connected-search-input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.edc-connected-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-15);
}

.edc-connected-search-input::placeholder {
    color: var(--color-text-muted);
}

/* Dropdown arrow */
.edc-connected-dropdown-arrow {
    position: absolute;
    right: 12px;
    color: var(--color-text-muted);
    font-size: 0.7em;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
    user-select: none;
}

.edc-connected-dropdown-arrow:hover {
    color: var(--color-text-primary);
}

/* Clear search button */
.edc-connected-search-clear {
    position: absolute;
    right: 30px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.3em;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

.edc-connected-search-clear:hover {
    color: var(--color-text-primary);
}

.edc-connected-search-clear.is-hidden {
    display: none;
}

/* Search results dropdown */
.edc-connected-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2000;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-top: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 10px 24px var(--color-overlay-dark-15);
    overflow: hidden;
    max-height: 240px;
    margin-top: 0;
}



/* Inner scrolling wrapper - this is where scroll events fire */
.edc-connected-search-results-inner {
    max-height: 240px;
    overflow-y: auto;
}

/* No results message */
.edc-connected-no-results {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9em;
}

/* More results indicator */
.edc-connected-more-results {
    padding: 10px 14px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85em;
    font-style: italic;
    border-top: 1px solid var(--color-border-light);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}

.edc-connected-more-results:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* Individual search result */
.edc-connected-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.15s;
}

.edc-connected-search-result:last-child {
    border-bottom: none;
}

.edc-connected-search-result:hover {
    background: var(--color-bg-secondary);
}

.edc-connected-search-result.is-selected {
    background: var(--color-brand-primary-10);
}

.edc-connected-search-result.is-selected .edc-connected-result-name {
    color: var(--color-primary);
    font-weight: 500;
}

/* ========================================
   EVENT LIBRARY TIMELINE DROPDOWN (connections-style)
   ======================================== */

.em-timeline-dropdown-anchor {
    position: relative;
    display: inline-block;
}

.em-timeline-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2000;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: 0 10px 24px var(--color-overlay-dark-15);
    overflow: hidden;
    margin-top: 6px;
    min-width: 240px;
}

.em-timeline-dropdown.is-hidden {
    display: none;
}

.em-timeline-dropdown-search-wrapper {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-primary);
}

.em-timeline-dropdown-search {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.95em;
}

.em-timeline-dropdown-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-15);
}

.em-timeline-dropdown-clear {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2em;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.em-timeline-dropdown-clear:hover {
    color: var(--color-text-primary);
}

.em-timeline-dropdown-clear.is-hidden {
    display: none;
}

.em-timeline-dropdown-list {
    max-height: 240px;
    overflow-y: auto;
}

.em-timeline-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.15s;
}

.em-timeline-dropdown-item:last-child {
    border-bottom: none;
}

.em-timeline-dropdown-item:hover {
    background: var(--color-bg-secondary);
}

.em-timeline-dropdown-item.is-active {
    background: var(--color-brand-primary-08);
}

.em-timeline-dropdown-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-text-primary);
    flex: 0 0 28px;
    overflow: hidden;
}

.em-timeline-dropdown-icon.has-photo {
    background-size: cover;
    background-position: center;
}

.em-timeline-dropdown-name {
    font-size: 0.95em;
    color: var(--color-text-primary);
}

.em-timeline-dropdown-empty {
    padding: 14px 12px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9em;
}

/* ========================================
   TIMELINE MODAL: EVENTS TAB ADD-EVENT DROPDOWN (connections-style)
   ======================================== */

/* Search section container */
.tm-events-search-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0;
    margin-bottom: 16px;
    position: relative;
    flex-shrink: 0;
}

/* Timeline Info modal: no horizontal rule under the add-event control */
#timelineInfoTabContent .tm-events-search-section {
    margin-bottom: 0;
    border-bottom: none;
}

/* When dropdown is open, visually merge input + dropdown */


/* Search input wrapper */
.tm-events-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Search input */
.tm-events-search-input {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.95em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tm-events-search-section.is-open .tm-events-search-input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tm-events-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-15);
}

.tm-events-search-input::placeholder {
    color: var(--color-text-muted);
}

/* Dropdown arrow */
.tm-events-dropdown-arrow {
    position: absolute;
    right: 12px;
    color: var(--color-text-muted);
    font-size: 0.7em;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
    user-select: none;
}

.tm-events-dropdown-arrow:hover {
    color: var(--color-text-primary);
}

/* Clear search button */
.tm-events-search-clear {
    position: absolute;
    right: 30px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.3em;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

.tm-events-search-clear:hover {
    color: var(--color-text-primary);
}

/* Search results dropdown */
.tm-events-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2000;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-top: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 10px 24px var(--color-overlay-dark-15);
    overflow: hidden;
    max-height: 240px;
    margin-top: 0;
}

/* Inner scrolling wrapper - this is where scroll events fire */
.tm-events-search-results-inner {
    max-height: 240px;
    overflow-y: auto;
}

/* No results message */
.tm-events-search-no-results {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9em;
}

/* Individual search result */
.tm-events-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.15s;
}

.tm-events-search-result:last-child {
    border-bottom: none;
}

.tm-events-search-result:hover {
    background: var(--color-bg-secondary);
}

.tm-events-search-result-info {
    flex: 1;
    min-width: 0;
}

.tm-events-search-result-name {
    font-size: 0.95em;
    color: var(--color-text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-events-search-result-meta {
    font-size: 0.78em;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.15;
}

/* Timeline tags inside dropdown results (small pillbox) */
.edc-timeline-dropdown-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    max-height: 38px; /* ~2 rows of tags */
    overflow: hidden;
}

.tm-events-search-result-add-btn {
    flex: 0 0 auto;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.tm-events-search-result-add-btn:hover {
    background: var(--color-primary-hover);
}

/* "More events..." message at bottom of dropdown */
.tm-events-search-more {
    padding: 10px 14px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85em;
    cursor: pointer;
    background: var(--color-bg-secondary);
    transition: background 0.15s, color 0.15s;
}

.tm-events-search-more:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* Result info */
.edc-connected-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.edc-connected-result-name {
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edc-connected-result-meta {
    font-size: 0.8em;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Add/Connect button in search results */
.edc-connected-result-add-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-primary);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.edc-connected-result-add-btn:hover {
    background: var(--color-primary-dark, #4a5fd9);
}

/* Saving indicator */
.edc-connected-saving {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 0.95em;
}

/* Connected events list */
.edc-connected-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
}

/* Timelines tab container */
.edc-timelines-tab {
    --edc-scrollbar-gutter: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.edc-timelines-tab.edc-timelines-tab--dropdown-open {
    overflow: visible;
}

/* Event Details Card: Timelines tab - INFORMATIONAL ROWS (not clickable) */
.edc-timelines-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-right: var(--edc-scrollbar-gutter);
}

/* Timeline row - informational, not interactive */
.edc-timeline-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px calc(20px - var(--edc-scrollbar-gutter)) 12px 20px;
    background: var(--color-bg-primary);
    cursor: default;
    transition: background-color 0.15s;
}

.edc-timeline-row::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--color-border-light);
    pointer-events: none;
}

.edc-timeline-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.edc-timeline-row-photo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface-4);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Make it as large as possible without changing row height (transform doesn't affect layout) */
    transform: scale(1.28);
    transform-origin: center;
}

.edc-timeline-row-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.edc-timeline-row-photo-fallback {
    font-size: 0.75em;
    font-weight: 700;
    color: var(--color-text-muted);
    line-height: 1;
    user-select: none;
}

.edc-timeline-row:first-child {
    border-top: none;
}

.edc-timeline-row:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--color-border-light);
    pointer-events: none;
}

.edc-timeline-row:hover {
    background-color: var(--color-bg-secondary);
}

.edc-timeline-row-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.edc-timeline-row-name {
    font-size: 0.95em;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edc-timeline-row-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.edc-timeline-tag {
    display: inline-flex;
    align-items: center;
    background: var(--color-alert-info-bg);
    border: 1px solid var(--color-brand-primary-30);
    color: var(--color-text-muted);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.edc-timeline-tag-more {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    background: transparent;
    border: 1px dashed var(--color-border-light);
    font-size: 0.75em;
    color: var(--color-text-muted);
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
}

.edc-timeline-no-tags {
    font-size: 0.75em;
    color: var(--color-text-muted);
    font-style: italic;
}

.edc-timeline-row-label {
    font-size: 0.78em;
    color: var(--color-text-muted);
}

/* Remove button - secondary, visible on hover/focus only */
.edc-timeline-row-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    margin-left: 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--color-text-muted);
    font-size: 0.85em;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.edc-timeline-row:hover .edc-timeline-row-remove,
.edc-timeline-row-remove:focus {
    opacity: 1;
}

.edc-timeline-row-remove:hover {
    color: var(--color-status-error);
}

/* Non-phone associated-list tabs: rows should run full width with no edge gaps. */
html:not(.yrh-shell-phone) #timelineInfoModal[data-active-tab="events"] #timelineInfoTabContent {
    padding-left: 0;
    padding-right: 0;
}

html:not(.yrh-shell-phone) #event-details-card-overlay[data-active-tab="timelines"] .event-card-body.event-card-body--modal {
    padding-left: 0;
    padding-right: 0;
}

html:not(.yrh-shell-phone) #timelineInfoModal[data-active-tab="events"] .yrh-associated-list-controls,
html:not(.yrh-shell-phone) #event-details-card-overlay[data-active-tab="timelines"] .yrh-associated-list-controls {
    padding: 0 20px 16px;
    margin-bottom: 0;
}

html:not(.yrh-shell-phone) #timelineInfoModal[data-active-tab="events"] .yrh-associated-list-surface .edc-timelines-list,
html:not(.yrh-shell-phone) #event-details-card-overlay[data-active-tab="timelines"] .yrh-associated-list-surface .edc-timelines-list {
    padding-right: 0;
    scrollbar-gutter: auto;
}

@media (hover: hover) and (pointer: fine) {
    .edc-timelines-list::-webkit-scrollbar {
        width: 10px;
    }

    .edc-timelines-list::-webkit-scrollbar-track {
        background: transparent;
        object-fit: cover;

    .edc-timelines-list::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.18);
        border-radius: 10px;
        border: 3px solid transparent;
        background-clip: content-box;
    }
}

/* (timelines count removed) */

/* Connected events list - constrained width */
.edc-connected-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    flex: 1;
    overflow-y: auto;
}

/* Individual connected event item - selectable row, not a hero banner */
.edc-connected-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    transition: background 0.15s;
}

.edc-connected-item:first-child {
    border-top: 1px solid var(--color-border-light);
}

.edc-connected-item:hover {
    background: var(--color-bg-secondary);
}

/* Clickable content area */
.edc-connected-item-content {
    flex: 1;
    min-width: 0;
    cursor: default;
}

/* Event info */
.edc-connected-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.edc-connected-item-name {
    font-weight: 500;
    font-size: 0.95em;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tags row inside connections-style dropdown items (Attachments timelines dropdown) */
.edc-connected-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    max-height: 38px; /* ~2 rows of tags */
    overflow: hidden;
}


/* Select button (styled like remove - subtle text action) */
.edc-connected-select-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.85em;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    border-radius: 4px;
}

.edc-connected-item:hover .edc-connected-select-btn {
    opacity: 1;
}

.edc-connected-select-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-primary);
}

.edc-connected-select-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.edc-connected-item-meta {
    font-size: 0.78em;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta line: date + tags */
.edc-connected-item-meta-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
    color: var(--color-text-muted);
    min-width: 0;
    overflow: hidden;
}

.edc-connected-date {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Timeline modals: Events tab date styling */
#timelineInfoModal .edc-connected-date,
#timelineModal .edc-connected-date,
#editTimelineModal .edc-connected-date {
    font-style: italic;
    font-size: 0.95em;
}

/* Event rows rendered with the Timelines-tab row structure */
.tm-event-row-date {
    font-style: italic;
    font-size: 0.82em;
}

.edc-meta-divider {
    flex-shrink: 0;
    opacity: 0.5;
}

.edc-connected-tags-container {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.edc-connected-tag {
    display: inline-flex;
    align-items: center;
    background: var(--color-alert-info-bg);
    border: 1px solid var(--color-brand-primary-30);
    color: var(--color-text-muted);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.edc-connected-tags-overflow {
    white-space: nowrap;
    flex-shrink: 0;
    font-style: italic;
    opacity: 0.8;
}

/* Action buttons container */
.edc-connected-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Remove connection button */
.edc-connected-remove-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.85em;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    border-radius: 4px;
}

.edc-connected-item:hover .edc-connected-remove-btn {
    opacity: 1;
}

.edc-connected-remove-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-status-error);
}

/* (connections count removed) */

/* Filtered out notice for connected events */
.edc-connected-filtered-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(var(--color-warning-rgb, 255, 193, 7), 0.1);
    border: 1px solid rgba(var(--color-warning-rgb, 255, 193, 7), 0.3);
    border-radius: 8px;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

.edc-connected-filtered-icon {
    font-size: 1.1em;
}

.edc-connected-filtered-text {
    flex: 1;
}

/* Filtered connected event item styling */
.edc-connected-item-filtered {
    opacity: 0.6;
    background: var(--color-bg-tertiary);
    border-style: dashed;
}

.edc-connected-item-filtered:hover {
    opacity: 0.8;
}

/* Filtered badge */
.edc-filtered-badge {
    display: inline-block;
    font-size: 0.7em;
    padding: 2px 6px;
    margin-left: 6px;
    background: var(--color-text-muted);
    color: var(--color-bg-primary);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* Responsive adjustments for connected events */
@media (max-width: 600px) {
    .edc-connected-search-input {
        padding: 10px 36px 10px 12px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .edc-connected-search-results {
        max-height: 200px;
    }
    
    .edc-connected-search-result {
        padding: 10px 12px;
        flex-wrap: wrap;
    }
    
    .edc-connected-result-add-btn {
        padding: 8px 14px;
        font-size: 0.9em;
    }
    
    .edc-connected-item {
        padding: 10px 12px;
        gap: 8px;
    }
    
    .edc-connected-item-name {
        font-size: 0.95em;
    }
    
    .edc-connected-remove-btn {
        opacity: 1; /* Always show on mobile */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CANONICAL VISIBILITY SELECTOR
   
   A unified, role-aware visibility selection component used throughout the app.
   Visibility is a first-class decision - never represented as a dropdown or toggle.
   
   Structure:
   - Vertical radio-style selection list
   - One option selected at all times
   - Icons + text labels
   - Same layout, spacing, and copy everywhere
   
   Options (in order):
   1. 🔒 only me
   2. 🌐 public (ADMIN ONLY - not rendered for non-admins)
   ═══════════════════════════════════════════════════════════════════════════ */

.c-visibility-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.c-visibility-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    position: relative;
}

.c-visibility-option:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-4);
}

.c-visibility-option:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb, 76, 175, 80), 0.08);
}

.c-visibility-option:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.c-visibility-option:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.c-visibility-option:has(input:disabled):hover {
    border-color: var(--color-border-light);
    background: var(--color-bg-primary);
}

.c-visibility-option input[type="radio"] {
    /* Presentation replacement: keep native radio semantics, hide browser UI.
       Do NOT use display:none; preserve keyboard + screen reader behavior. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.c-visibility-option input[type="radio"]:disabled {
    cursor: not-allowed;
}

/* Apple-style checkmark indicator (selected row only)
   - No circular/radio-style affordances
   - Keep native radio semantics (input remains in DOM)
*/
.c-visibility-option:has(input:checked)::after {
    content: '';
    width: 10px;
    height: 6px;
    margin-left: auto;
    border-left: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(-45deg);
    align-self: center;
}

.c-visibility-icon {
    font-size: 1.2em;
    line-height: 1;
    flex-shrink: 0;
}

.c-visibility-label {
    font-size: 0.95em;
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
}

.c-visibility-option:has(input:checked) .c-visibility-label {
    color: var(--color-primary);
}

/* Unchanged option styling for bulk edit */
.c-visibility-option--unchanged .c-visibility-icon {
    color: var(--color-text-muted);
}

.c-visibility-option--unchanged .c-visibility-label {
    color: var(--color-text-muted);
    font-style: italic;
}

.c-visibility-option--unchanged:has(input:checked) {
    border-color: var(--color-border-medium);
    background: var(--color-surface-4);
}


.c-visibility-option--unchanged:has(input:checked) .c-visibility-label {
    color: var(--color-text-secondary);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .c-visibility-option {
        padding: 10px 14px;
        gap: 10px;
    }
    
    .c-visibility-icon {
        font-size: 1.1em;
    }
    
    .c-visibility-label {
        font-size: 0.9em;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAG PICKER COMPONENT
   Shared tag selection with popover dropdown, grid layout, and create-new
   ═══════════════════════════════════════════════════════════════════════════ */

.tag-picker-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-bottom: 16px; /* Space above sticky footer */
}

/* Tray mode: no dropdown arrow, always visible tray */
.tag-picker-tray-mode .tag-picker-dropdown-arrow {
    display: none;
}

/* Selected tag chips */
.tag-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
    margin-top: 2px; /* Space below header */
    margin-bottom: 2px; /* Space between chips and input */
}

.tag-picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px 5px 12px;
    background: var(--color-alert-info-bg, #e3f2fd);
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 0.85em;
    color: var(--color-text-muted, #666);
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}

.tag-picker-chip:hover {
    background: var(--color-brand-primary-15, #e8eaff);
    border-color: var(--color-brand-primary-30, #c5caff);
}

.tag-picker-chip-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-picker-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--color-text-muted, #666);
    opacity: 0.6;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}

.tag-picker-chip-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

/* Input wrapper */
.tag-picker-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    margin-top: 6px; /* Space between selected tags and input */
}

.tag-picker-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border-light, #ddd);
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    background: var(--color-bg-secondary, #f8f9fa);
    color: var(--color-text-primary, #333);
    font-size: 0.9em;
    min-width: 160px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tag-picker-input:focus {
    outline: none;
    border-color: var(--color-primary, #5c6bc0);
    box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.15);
}

.tag-picker-input::placeholder {
    color: var(--color-text-muted, #999);
}

.tag-picker-dropdown-arrow {
    position: absolute;
    right: 10px;
    font-size: 0.65em;
    color: var(--color-text-muted, #999);
    cursor: pointer;
    transition: transform 0.15s;
    user-select: none;
    display: none; /* Hidden in tray mode */
}

.tag-picker-dropdown.is-open + .tag-picker-dropdown-arrow,
.tag-picker-input-wrapper:has(.tag-picker-dropdown.is-open) .tag-picker-dropdown-arrow {
    transform: rotate(180deg);
}

/* DEPRECATED: Dropdown popover (kept for backwards compat) */
.tag-picker-dropdown {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAG PICKER TRAY - Always visible, fixed height with internal scroll
   ═══════════════════════════════════════════════════════════════════════════ */
.tag-picker-tray {
    /* Fixed height: ~3 rows of pills (gap 8px + padding 12px top/bottom) */
    /* 3 rows ~= 3 * 32px + 2 * 8px (gaps) + 24px (padding) = ~136px */
    height: 136px;
    max-height: 136px;
    min-height: 136px;
    overflow-y: auto;
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-light, #ddd);
    border-radius: 0 0 8px 8px;
}

.tag-picker-tray::-webkit-scrollbar {
    width: 6px;
}

.tag-picker-tray::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary, #f5f5f5);
    border-radius: 3px;
}

.tag-picker-tray::-webkit-scrollbar-thumb {
    background: var(--color-border-medium, #ccc);
    border-radius: 3px;
}

.tag-picker-tray::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted, #999);
}

.tag-picker-dropdown.is-open {
    display: block;
}

/* Remove the old form-group margin hack (no longer needed in tray mode) */

/* Create new tag option */
.tag-picker-create-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    background: var(--color-brand-primary-10, #f0f2ff);
    border: none;
    border-bottom: 1px solid var(--color-border-lighter, #eee);
    color: var(--color-primary, #5c6bc0);
    font-size: 0.9em;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.tag-picker-create-option:hover,
.tag-picker-create-option.is-focused {
    background: var(--color-brand-primary-10, #f0f2ff);
}

.tag-picker-create-option strong {
    font-weight: 600;
}

/* Tag grid */
.tag-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
}

/* Tag pills in dropdown */
.tag-picker-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-bg-tertiary, #f0f0f0);
    border: 1px solid transparent;
    border-radius: 16px;
    font-size: 0.85em;
    color: var(--color-text-secondary, #555);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    /* iOS Safari applies native button styling that overrides border-radius */
    -webkit-appearance: none;
    appearance: none;
}

.tag-picker-pill:hover {
    background: var(--color-brand-primary-10, #f0f2ff);
    border-color: var(--color-brand-primary-30, #c5caff);
}

.tag-picker-pill.is-focused {
    outline: 2px solid var(--color-primary, #5c6bc0);
    outline-offset: 1px;
}

.tag-picker-pill.is-selected {
    background: var(--color-primary, #5c6bc0);
    color: var(--color-text-inverse, #fff);
    border-color: var(--color-primary, #5c6bc0);
}

.tag-picker-pill.is-selected:hover {
    background: var(--color-primary-dark, #4a5fd9);
    border-color: var(--color-primary-dark, #4a5fd9);
}

.tag-picker-pill-check {
    font-size: 0.85em;
    margin-right: 2px;
}

/* Empty state */
.tag-picker-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted, #999);
    font-size: 0.9em;
    font-style: italic;
}

/* Responsive */
@media (max-width: 480px) {
    .tag-picker-tray {
        height: 120px;
        max-height: 120px;
        min-height: 120px;
    }
    
    .tag-picker-grid {
        gap: 6px;
        padding: 10px;
    }
    
    .tag-picker-pill {
        padding: 5px 10px;
        font-size: 0.8em;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCOPED TAG TRAY COMPONENT
   Scope-aware tag selection with tagIds API
   Uses same visual style as TagPicker but with scope-aware data binding
   ═══════════════════════════════════════════════════════════════════════════ */

.scoped-tag-tray-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-bottom: 16px; /* Space above sticky footer */
}

/* Selected tag chips */
.scoped-tag-tray-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.scoped-tag-tray-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px 5px 12px;
    background: var(--color-alert-info-bg, #e3f2fd);
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 0.85em;
    color: var(--color-text-muted, #666);
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}

.scoped-tag-tray-chip:hover {
    background: var(--color-brand-primary-15, #e8eaff);
    border-color: var(--color-brand-primary-30, #c5caff);
}

.scoped-tag-tray-chip.is-archived {
    background: var(--color-bg-tertiary, #f5f5f5);
    border: 1px dashed var(--color-border-medium, #ccc);
    color: var(--color-text-disabled, #aaa);
}

.scoped-tag-tray-chip-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scoped-tag-tray-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--color-text-muted, #666);
    opacity: 0.6;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}

.scoped-tag-tray-chip-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

/* Input wrapper */
.scoped-tag-tray-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    margin-top: 6px;
}

.scoped-tag-tray-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border-light, #ddd);
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    background: var(--color-bg-secondary, #f8f9fa);
    color: var(--color-text-primary, #333);
    font-size: 0.9em;
    min-width: 160px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.scoped-tag-tray-input:focus {
    outline: none;
    border-color: var(--color-primary, #5c6bc0);
    box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.15);
}

.scoped-tag-tray-input::placeholder {
    color: var(--color-text-muted, #999);
}

/* Tag Tray - Always visible, ~3 rows tall with internal scroll */
.scoped-tag-tray {
    height: 136px;
    max-height: 136px;
    min-height: 136px;
    overflow-y: auto;
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-light, #ddd);
    border-radius: 0 0 8px 8px;
}

.scoped-tag-tray::-webkit-scrollbar {
    width: 6px;
}

.scoped-tag-tray::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary, #f5f5f5);
    border-radius: 3px;
}

.scoped-tag-tray::-webkit-scrollbar-thumb {
    background: var(--color-border-medium, #ccc);
    border-radius: 3px;
}

.scoped-tag-tray::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted, #999);
}

/* Loading state */
.scoped-tag-tray-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-muted, #999);
    font-size: 0.9em;
}

/* Error state */
.scoped-tag-tray-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-alert-error-text, #d32f2f);
    font-size: 0.9em;
}

/* Create new tag option */
.scoped-tag-tray-create-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    background: var(--color-brand-primary-10, #f0f2ff);
    border: none;
    border-bottom: 1px solid var(--color-border-lighter, #eee);
    color: var(--color-primary, #5c6bc0);
    font-size: 0.9em;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.scoped-tag-tray-create-option:hover,
.scoped-tag-tray-create-option.is-focused {
    background: var(--color-brand-primary-15, #e8eaff);
}

.scoped-tag-tray-create-option strong {
    font-weight: 600;
}

/* Tag grid */
.scoped-tag-tray-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
}

/* Tag pills */
.scoped-tag-tray-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-bg-tertiary, #f0f0f0);
    border: 1px solid transparent;
    border-radius: 16px;
    font-size: 0.85em;
    color: var(--color-text-secondary, #555);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.scoped-tag-tray-pill:hover {
    background: var(--color-brand-primary-10, #f0f2ff);
    border-color: var(--color-brand-primary-30, #c5caff);
}

.scoped-tag-tray-pill.is-focused {
    outline: 2px solid var(--color-primary, #5c6bc0);
    outline-offset: 1px;
}

.scoped-tag-tray-pill.is-selected {
    background: var(--color-primary, #5c6bc0);
    color: var(--color-text-inverse, #fff);
    border-color: var(--color-primary, #5c6bc0);
}

.scoped-tag-tray-pill.is-selected:hover {
    background: var(--color-primary-dark, #4a5fd9);
    border-color: var(--color-primary-dark, #4a5fd9);
}

.scoped-tag-tray-pill-check {
    font-size: 0.85em;
    margin-right: 2px;
}

/* Empty state */
.scoped-tag-tray-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted, #999);
    font-size: 0.9em;
    font-style: italic;
}

/* Responsive */
@media (max-width: 480px) {
    .scoped-tag-tray {
        height: 120px;
        max-height: 120px;
        min-height: 120px;
    }
    
    .scoped-tag-tray-grid {
        gap: 6px;
        padding: 10px;
    }
    
    .scoped-tag-tray-pill {
        padding: 5px 10px;
        font-size: 0.8em;
    }
}

/* ========================================
   TAG DETAIL MODAL (SCOPED)
   Single tag editing: rename, archive, merge, delete
   ======================================== */

#tagDetailModal .modal-content {
    max-width: 480px;
    width: 90vw;
}

.tag-detail-section {
    margin-bottom: 20px;
}

.tag-detail-section:last-child {
    margin-bottom: 0;
}

.tag-detail-label {
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tag-detail-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tag-detail-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-brand-primary-15);
}

.tag-detail-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Usage counters */
.tag-detail-counters {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.tag-detail-counter {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

.tag-detail-counter-value {
    font-weight: 600;
    color: var(--color-text-primary);
}

.tag-detail-counter-icon {
    font-size: 1em;
    opacity: 0.7;
}

/* Status section */
.tag-detail-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tag-detail-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.85em;
    font-weight: 500;
}

.tag-detail-status-badge.is-active {
    background: var(--color-success-light, #e8f5e9);
    color: var(--color-success, #2e7d32);
}

.tag-detail-status-badge.is-archived {
    background: var(--color-warning-light, #fff8e1);
    color: var(--color-warning-dark, #f57c00);
}

.tag-detail-status-toggle {
    font-size: 0.85em;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.tag-detail-status-toggle:hover {
    background: var(--color-bg-primary);
    border-color: var(--color-primary);
}

/* Actions area */
.tag-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tag-detail-action-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tag-detail-action-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tag-detail-select {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.9em;
    cursor: pointer;
    transition: border-color 0.2s;
}

.tag-detail-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.tag-detail-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tag-detail-merge-btn {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--color-warning, #f57c00);
    background: var(--color-warning-light, #fff8e1);
    color: var(--color-warning-dark, #e65100);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.tag-detail-merge-btn:hover:not(:disabled) {
    background: var(--color-warning, #f57c00);
    color: #fff;
}

.tag-detail-merge-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tag-detail-hint {
    font-size: 0.8em;
    color: var(--color-text-muted);
    font-style: italic;
    line-height: 1.4;
}

.tag-detail-delete-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--color-danger, #d32f2f);
    background: transparent;
    color: var(--color-danger, #d32f2f);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.tag-detail-delete-btn:hover:not(:disabled) {
    background: var(--color-danger, #d32f2f);
    color: #fff;
}

.tag-detail-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* Responsive Tag Detail */
@media (max-width: 480px) {
    .tag-detail-counters {
        flex-direction: column;
        gap: 8px;
    }
    
    .tag-detail-action-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .tag-detail-select {
        width: 100%;
    }
}