/* Scoped to the presentation overlay. Existing application layout is unchanged. */
.apex-tour {
    --tour-safe-top: max(12px, env(safe-area-inset-top, 0px));
    --tour-safe-right: max(12px, env(safe-area-inset-right, 0px));
    --tour-safe-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    --tour-safe-left: max(12px, env(safe-area-inset-left, 0px));
    --tour-shade: color-mix(in srgb, var(--page) 82%, transparent);
    position: fixed; inset: 0; margin: 0; border: 0;
    padding: var(--tour-safe-top) var(--tour-safe-right) var(--tour-safe-bottom) var(--tour-safe-left);
    width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none;
    overflow: hidden; color: var(--text); background: transparent;
    font-family: inherit; box-sizing: border-box;
}
.apex-tour::backdrop { background: transparent; }
.apex-tour[open][data-anchored="false"] { background: var(--tour-shade); }
.apex-tour-spotlight {
    position: fixed; pointer-events: none; border: 2px solid var(--blue);
    border-radius: 10px; box-shadow: 0 0 0 9999px var(--tour-shade);
    box-sizing: border-box;
}
.apex-tour-spotlight[hidden] { display: none; }
.apex-tour-card {
    position: fixed; box-sizing: border-box; margin: 0; padding: 18px;
    border: 1px solid var(--border-strong); border-radius: 18px;
    background: var(--surface); color: var(--text); box-shadow: var(--shadow);
    overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere;
    max-width: calc(100% - 24px); scrollbar-gutter: stable;
}
.apex-tour-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.apex-tour-count { margin: 0; color: var(--blue); font-size: 12px; font-weight: 700; }
.apex-tour h2 { margin: 8px 0 12px; color: var(--text); font-size: 22px; line-height: 1.25; font-weight: 750; }
.apex-tour-copy > p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text); }
.apex-tour-copy > .apex-tour-note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.apex-tour-note:empty { display: none; }
.apex-tour-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; }
.apex-tour-controls { display: flex; gap: 8px; margin-left: auto; }
.apex-tour button {
    min-height: 44px; min-width: 44px; padding: 9px 13px; border-radius: 9px;
    border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.apex-tour .apex-tour-next { background: var(--text); color: var(--surface); border-color: var(--text); }
.apex-tour .apex-tour-close { font-size: 25px; font-weight: 400; padding: 0; background: transparent; border-color: transparent; }
.apex-tour .apex-tour-skip { padding-left: 0; padding-right: 4px; border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.apex-tour button:disabled { opacity: .55; cursor: default; }
.apex-tour button:focus-visible, .apex-tour h2:focus-visible, [data-start-tour]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.onboarding-strip [data-start-tour] { color: var(--blue); background: transparent; border: 0; padding: 8px 0; min-height: 44px; font: inherit; font-weight: 700; text-align: left; }
@media (max-width: 375px) { .apex-tour-card { padding: 14px; } .apex-tour button { padding-inline: 10px; } }
@media (prefers-reduced-motion: reduce) { .apex-tour, .apex-tour * { scroll-behavior: auto; } }
.onboarding-strip .workspace-tour-launch {
    min-height: 44px; padding: 8px 4px; border: 0; background: transparent;
    color: var(--blue); font: inherit; font-weight: 700; text-align: left;
}
.workspace-tour-launch:focus-visible, .workspace-tour-grid button:focus-visible,
.workspace-tour-chooser > button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.workspace-tour-chooser {
    width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
    margin: auto; padding: 20px; border: 1px solid var(--border-strong); border-radius: 16px;
    background: var(--surface); color: var(--text); overflow: auto; overscroll-behavior: contain;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.workspace-tour-chooser::backdrop { background: color-mix(in srgb, var(--page) 82%, transparent); }
.workspace-tour-chooser h2, .workspace-tour-directory h3 { font-size: 20px; font-weight: 750; margin: 0 0 10px; }
.workspace-tour-chooser p, .workspace-tour-directory > p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 12px 0; }
.workspace-tour-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px; }
.workspace-tour-grid button, .workspace-tour-chooser > button {
    min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 9px;
    background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; text-align: left; overflow-wrap: anywhere;
}
.workspace-tour-directory { padding: 18px 0; margin: 20px 0; border-block: 1px solid var(--border); }
.workspace-tour-chooser > button { position: sticky; top: 0; z-index: 1; }
.apex-tour-scroll-space { pointer-events: none; width: 1px; }