/* Config guided tours — dim via highlight box-shadow (no JS-positioned hole panels) */

body[data-config-bookmarks-tour-active]:not(.config-bookmarks-tour-ready) .config-bookmarks-tour-card,
body[data-config-finders-tour-active]:not(.config-finders-tour-ready) .config-finders-tour-card,
body[data-config-stats-tour-active]:not(.config-stats-tour-ready) .config-stats-tour-card,
body[data-config-categories-tour-active]:not(.config-categories-tour-ready) .config-categories-tour-card,
body[data-config-tags-tour-active]:not(.config-tags-tour-ready) .config-tags-tour-card,
body[data-config-pages-tour-active]:not(.config-pages-tour-ready) .config-pages-tour-card,
body[data-config-collections-tour-active]:not(.config-collections-tour-ready) .config-collections-tour-card,
body[data-config-theme-tour-active]:not(.config-theme-tour-ready) .config-theme-tour-card {
    visibility: hidden;
}

.config-general-tour-card,
.config-bookmarks-tour-card,
.config-finders-tour-card,
.config-stats-tour-card,
.config-categories-tour-card,
.config-tags-tour-card,
.config-pages-tour-card,
.config-collections-tour-card,
.config-theme-tour-card {
    position: fixed;
    z-index: 12700;
    width: min(640px, 96vw);
    max-height: min(55vh, calc(100vh - 12rem - env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-primary);
    background: var(--background-modal, var(--background-primary));
    color: var(--text-primary);
    padding: 1rem;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-success) 22%, transparent),
        0 18px 48px rgba(0, 0, 0, 0.28);
    pointer-events: auto;
}

/* Default: anchored to bottom center (also for oversized highlights) */
.config-general-tour-card:not(.is-docked),
.config-bookmarks-tour-card:not(.is-docked),
.config-finders-tour-card:not(.is-docked),
.config-stats-tour-card:not(.is-docked),
.config-categories-tour-card:not(.is-docked),
.config-tags-tour-card:not(.is-docked),
.config-pages-tour-card:not(.is-docked),
.config-collections-tour-card:not(.is-docked),
.config-theme-tour-card:not(.is-docked) {
    left: 50%;
    right: auto;
    top: auto;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
}

.config-general-tour-progress {
    display: block;
    font-size: var(--font-size-controls, 0.875rem);
    color: var(--text-tertiary, var(--text-secondary));
    margin-bottom: 0.35rem;
}

.config-general-tour-title {
    display: block;
    font-size: var(--font-size-category, 1.125rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.35;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
}

.config-general-tour-body {
    display: block;
    font-size: var(--font-size-text, 0.875rem);
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
}

.config-general-tour-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.config-general-tour-btn {
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-controls, 0.875rem);
}

.config-general-tour-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Cutout dim + green frame — moves with the element, no separate overlay sync */
.config-general-tour-highlight,
.config-bookmarks-tour-highlight,
.config-finders-tour-highlight,
.config-stats-tour-highlight,
.config-categories-tour-highlight,
.config-tags-tour-highlight,
.config-pages-tour-highlight,
.config-collections-tour-highlight,
.config-theme-tour-highlight {
    position: relative !important;
    z-index: 12550 !important;
    scroll-margin: 5rem 1rem 18rem;
    outline: 3px solid var(--accent-success) !important;
    outline-offset: 3px;
    background-color: var(--background-primary) !important;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.58) !important;
}

/* Bookmarks editor: extra bottom scroll margin for the viewport-bottom tour card */
.config-bookmarks-tour-highlight {
    scroll-margin: 5rem 1rem min(22rem, calc(100vh - 12rem));
}

/* Tags tour — Tags field step on Bookmarks tab (detail form scroll) */
body[data-config-tags-tour-bookmarks-phase] .config-tags-tour-highlight {
    scroll-margin: 5rem 1rem min(22rem, calc(100vh - 12rem));
}

/* Docked beside a target — top/left set via inline styles in JS */
.config-general-tour-card.is-docked,
.config-bookmarks-tour-card.is-docked,
.config-finders-tour-card.is-docked,
.config-stats-tour-card.is-docked,
.config-categories-tour-card.is-docked,
.config-tags-tour-card.is-docked,
.config-pages-tour-card.is-docked,
.config-collections-tour-card.is-docked,
.config-theme-tour-card.is-docked {
    right: auto;
    bottom: auto;
    transform: none;
}

.modal-overlay.show .config-bookmarks-tour-highlight {
    position: relative !important;
    z-index: 12551 !important;
}

/* Tags tour on Bookmarks tab: keep tour card above detail panel + dirty sticky bar */
body[data-config-tags-tour-active] .config-tags-tour-card,
body[data-config-tags-tour-active] #config-tour-portal .config-tags-tour-card {
    z-index: 2147483000 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

body[data-config-tags-tour-active] .config-save-sticky,
body[data-config-tags-tour-bookmarks-phase] .config-save-sticky {
    pointer-events: none !important;
}

body[data-config-tags-tour-bookmarks-phase] .tag-ac-dropdown {
    pointer-events: none !important;
    visibility: hidden !important;
}

body[data-config-bookmarks-tour-active] #app-modal.modal-overlay.show {
    z-index: 2147483100 !important;
}

body[data-config-bookmarks-tour-active] #app-modal.modal-overlay.show,
body[data-config-bookmarks-tour-active] #app-modal.modal-overlay.show * {
    pointer-events: auto !important;
}

body[data-config-general-tour-active] .config-general-tour-card,
body[data-config-general-tour-active] [data-config-tour-card].config-general-tour-card {
    pointer-events: auto !important;
    visibility: visible !important;
    z-index: 2147483000 !important;
}

body[data-config-bookmarks-tour-active] .config-bookmarks-tour-card,
body[data-config-bookmarks-tour-active] [data-config-tour-card].config-bookmarks-tour-card {
    pointer-events: auto !important;
    visibility: visible !important;
    z-index: 2147483000 !important;
}

body[data-config-bookmarks-tour-active] .config-bookmarks-tour-card .config-general-tour-btn,
body[data-config-bookmarks-tour-active] [data-config-tour-card].config-bookmarks-tour-card .config-general-tour-btn {
    pointer-events: auto !important;
    cursor: pointer;
}

body[data-config-bookmarks-tour-active] #config-save-sticky,
body[data-config-bookmarks-tour-active].config-is-dirty #config-save-sticky.is-scroll-active {
    pointer-events: none !important;
    z-index: 1 !important;
}

body[data-config-bookmarks-tour-active] .tag-ac-dropdown {
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Legacy: ensure suppressed class never blocks clicks if left behind */
.config-bookmarks-tour-card.is-suppressed-for-dialog:not(.config-bookmarks-tour-card--companion) {
    visibility: visible !important;
    pointer-events: auto !important;
}

/* AppModal (consent / cleanup) above tour layers — keep bottom anchoring only */
body.config-bookmarks-tour-dialog-open #app-modal.modal-overlay.show,
body.config-theme-tour-dialog-open #app-modal.modal-overlay.show {
    z-index: 2147483100 !important;
    pointer-events: auto !important;
    align-items: flex-end;
    justify-content: center;
    padding: 0 1rem max(1rem, env(safe-area-inset-bottom, 0px));
}

body.config-bookmarks-tour-dialog-open #app-modal.modal-overlay.show .modal,
body.config-bookmarks-tour-dialog-open #app-modal.modal-overlay.show .modal-button,
body.config-theme-tour-dialog-open #app-modal.modal-overlay.show .modal,
body.config-theme-tour-dialog-open #app-modal.modal-overlay.show .modal-button {
    pointer-events: auto !important;
}

body.config-bookmarks-tour-dialog-open #app-modal.modal-overlay.show .modal,
body.config-theme-tour-dialog-open #app-modal.modal-overlay.show .modal {
    margin: 0;
    max-height: min(70vh, calc(100vh - 10rem));
}

/* While AppModal is open: backdrop inert; tour card only disabled when modal is actually visible */
body.config-bookmarks-tour-dialog-open:has(#app-modal.modal-overlay.show) .config-tour-backdrop,
body.guided-flow-modal-open:has(#app-modal.modal-overlay.show) .config-tour-backdrop {
    pointer-events: none !important;
    z-index: 2147481990 !important;
}

body.config-bookmarks-tour-dialog-open:has(#app-modal.modal-overlay.show) .config-bookmarks-tour-card,
body.guided-flow-modal-open:has(#app-modal.modal-overlay.show) .config-bookmarks-tour-card {
    pointer-events: none !important;
    z-index: 2147482990 !important;
}

.config-theme-tour-card.is-suppressed-for-dialog {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Quick-add (+) modal: centered, below tour card; display-only during companion steps */
body[data-config-bookmarks-tour-active].config-bookmarks-tour-interactive-modal #new-bookmark-modal.modal-overlay.show {
    z-index: 2147482800 !important;
    pointer-events: none !important;
}

body[data-config-bookmarks-tour-active].config-bookmarks-tour-interactive-modal
    #new-bookmark-modal.modal-overlay.show
    .modal-new-bookmark,
body[data-config-bookmarks-tour-active].config-bookmarks-tour-interactive-modal
    #new-bookmark-modal.modal-overlay.show
    .modal-new-bookmark
    * {
    pointer-events: none !important;
}

body[data-config-bookmarks-tour-active].config-bookmarks-tour-interactive-modal .config-tour-backdrop {
    pointer-events: none !important;
    z-index: 2147482700 !important;
}

body[data-config-bookmarks-tour-active].config-bookmarks-tour-interactive-modal
    .config-bookmarks-tour-card,
body[data-config-bookmarks-tour-active].config-bookmarks-tour-interactive-modal
    .config-bookmarks-tour-card.config-bookmarks-tour-card--companion {
    z-index: 2147483200 !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    max-width: min(640px, calc(100vw - 2rem));
    visibility: visible !important;
    pointer-events: auto !important;
}

body[data-config-bookmarks-tour-active].config-bookmarks-tour-interactive-modal
    .config-bookmarks-tour-card.is-docked {
    top: auto !important;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
}

html.config-general-tour-scroll-lock,
html.config-bookmarks-tour-scroll-lock,
html.config-finders-tour-scroll-lock,
html.config-stats-tour-scroll-lock,
html.config-categories-tour-scroll-lock,
html.config-tags-tour-scroll-lock,
html.config-pages-tour-scroll-lock,
html.config-collections-tour-scroll-lock,
html.config-theme-tour-scroll-lock,
html.config-general-tour-scroll-lock body,
html.config-bookmarks-tour-scroll-lock body,
html.config-finders-tour-scroll-lock body,
html.config-stats-tour-scroll-lock body,
html.config-categories-tour-scroll-lock body,
html.config-tags-tour-scroll-lock body,
html.config-pages-tour-scroll-lock body,
html.config-collections-tour-scroll-lock body,
html.config-theme-tour-scroll-lock body {
    overflow: hidden;
}

html.config-general-tour-scroll-lock body,
html.config-bookmarks-tour-scroll-lock body,
html.config-finders-tour-scroll-lock body,
html.config-stats-tour-scroll-lock body,
html.config-categories-tour-scroll-lock body,
html.config-tags-tour-scroll-lock body,
html.config-pages-tour-scroll-lock body,
html.config-collections-tour-scroll-lock body,
html.config-theme-tour-scroll-lock body {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}