/* Tour stays in the browser top layer, with room for large type and short screens. */
/* Override shared modal surfaces: the guide must leave the real UI visible. */
body dialog.guided-tour{position:fixed;inset:0;z-index:900;pointer-events:none;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:rgba(2,5,8,.28);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#f3ead9;overflow:hidden}
body dialog.guided-tour::backdrop{background:rgba(2,5,8,.28);backdrop-filter:none;-webkit-backdrop-filter:none}
.tour-spotlight{position:fixed;border:2px solid #e9bb65;border-radius:12px;box-shadow:0 0 26px #e1af4c66;pointer-events:none;z-index:0}
.tour-card{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:min(460px,calc(100% - 48px));max-height:calc(100dvh - 48px);overflow:auto;padding:28px;background:linear-gradient(145deg,#141923,#080c12);border:1px solid #b68a45;border-radius:18px;box-shadow:0 16px 70px #000c;z-index:1}
.tour-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.tour-top .section-kicker{font-size:var(--type-min);color:#e9bb65;line-height:1.5;letter-spacing:.12em}.tour-top button{flex:none;min-width:44px;min-height:44px}.tour-card h2{font:400 32px/1.2 var(--serif,Georgia,serif);margin:16px 0;color:#fff1d8;overflow-wrap:anywhere}.tour-card p{font-size:17px;line-height:1.6;color:#e1e4e9}.tour-card .tour-count{font-size:13px;color:#c6ceda;margin:20px 0 8px}.tour-card progress{width:100%;height:4px;accent-color:#e9bb65;display:block}.tour-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px}.tour-actions button{min-height:48px;max-width:100%;white-space:normal}.tour-replay{margin:0 0 24px}.tour-card button:focus-visible{outline:2px solid #ffe0a1;outline-offset:4px}
html[data-text-size=large] .tour-card p{font-size:20px}html[data-text-size=large] .tour-actions button{font-size:18px;min-height:52px}
@media(max-width:600px){.tour-card{right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:calc(100% - 24px);padding:20px;max-height:calc(100dvh - 24px)}.tour-card h2{font-size:28px}.tour-top .section-kicker{letter-spacing:.06em}.tour-actions{margin-top:18px}}
@media(max-height:500px){.tour-card{right:12px;bottom:12px;width:min(540px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:16px 22px}.tour-card h2{font-size:25px;margin:8px 0}.tour-card p{margin:8px 0}.tour-card .tour-count{margin-top:8px}.tour-actions{margin-top:12px}}
@media(max-width:900px){.tour-card{bottom:calc(var(--mobile-nav-space,70px) + 16px);max-height:calc(100dvh - var(--mobile-nav-space,70px) - 32px)}}
/* The tour moves focus to its heading so screen readers start there; a heading is not a control, so no ring (same as #auth-title). */
#tour-title:focus{outline:none}

/* The tour is non-modal: the dim lets clicks through so the header stays usable; only the card takes input. */
body dialog.guided-tour .tour-card{pointer-events:auto}

/* No dim layer: the guide points at the interface without making it look locked. */
body dialog.guided-tour{background:transparent}
body dialog.guided-tour::backdrop{background:transparent}
.tour-top-actions{display:flex;gap:4px;flex:none}
/* Minimised: a small pill in the corner; nothing else of the guide is drawn. */
body dialog.guided-tour.tour-minimised .tour-card{display:flex;align-items:center;gap:4px;width:auto;max-width:calc(100% - 24px);padding:6px;border-radius:999px}
body dialog.guided-tour.tour-minimised .tour-resume{min-height:44px;padding:10px 18px;gap:8px;font-size:14px;white-space:nowrap}
body dialog.guided-tour.tour-minimised .icon-button{min-width:44px;min-height:44px}