/* Contextual education stays beside the live app, without a modal backdrop.
   Explicit stack order also matches the native popover layer in accessibility scans. */
#onboarding{--hint-accent:var(--theme-accent,#bf9ff1);position:fixed;z-index:100;inset:auto;margin:0;width:316px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:18px 22px 16px;overflow:visible;box-sizing:border-box;border:1px solid var(--ui-border);border-radius:14px;background:var(--theme-surface,#1c1c1e);color:var(--ui-text);font:400 13px/1.55 var(--sans);box-shadow:0 10px 40px var(--theme-shadow-panel,#0004),0 2px 8px var(--theme-shadow-soft,#0001);isolation:isolate}
#onboarding[hidden]{display:none}
#onboarding:popover-open{animation:hint-in .18s ease-out}
#onboarding::backdrop{background:transparent;pointer-events:none}
#onboarding button{font:inherit;cursor:pointer;touch-action:manipulation}
#onboarding :focus-visible{outline:2px solid var(--hint-accent);outline-offset:3px}
.onboarding-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-8px -12px 0 0}
.onboarding-eyebrow{display:flex;align-items:center;gap:8px;color:var(--hint-accent);font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.onboarding-eyebrow>span:first-child{font:23px var(--sans);line-height:1}
#onboarding [data-onboarding-close]{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;padding:0;background:transparent;color:var(--ui-muted)}
#onboarding [data-onboarding-close]:hover{background:var(--theme-accent-wash,#bf9ff10c);color:var(--ui-text)}
#onboarding svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
#onboarding h2{margin:4px 0 9px;font:500 21px/1.28 var(--sans);letter-spacing:-.6px;max-width:250px}
#onboarding h2:focus{outline:none}
#onboarding-copy{margin:0;color:var(--theme-secondary,#b9b9c1);font-size:13px;line-height:1.6}
.onboarding-shortcut{margin:13px 0 0;color:var(--ui-muted);font:10px/1.6 var(--mono)}
.onboarding-shortcut[hidden]{display:none}
.onboarding-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:17px -4px -4px;padding-top:12px;border-top:1px solid var(--ui-border)}
#onboarding [data-onboarding-skip]{min-height:44px;padding:8px 4px;border:0;border-radius:5px;background:transparent;color:var(--ui-muted);font-size:11px;text-align:left}
#onboarding [data-onboarding-skip]:hover{color:var(--ui-text)}
#onboarding [data-onboarding-dismiss]{display:flex;align-items:center;justify-content:center;gap:18px;min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:7px;background:var(--hint-accent);color:var(--theme-on-accent,#141415);font-size:12px;font-weight:500}
#onboarding [data-onboarding-dismiss]:hover{filter:brightness(1.06)}
#onboarding [data-onboarding-account]{min-height:44px;padding:9px 7px;border:0;border-radius:7px;background:transparent;color:var(--hint-accent);font-size:11px;font-weight:500;white-space:nowrap}
#onboarding [data-onboarding-account=signup]{padding:10px 12px;background:var(--hint-accent);color:var(--theme-on-accent,#141415)}
#onboarding [data-onboarding-account]:hover{filter:brightness(1.08)}
#onboarding[data-requires-account=true] .onboarding-footer{gap:4px}
#onboarding[data-requires-account=true] [data-onboarding-skip]{margin-right:auto;font-size:10px}
.onboarding-arrow{position:absolute;width:10px;height:10px;background:inherit;border:inherit;rotate:45deg;z-index:-1;pointer-events:none}
#onboarding[data-arrow=false] .onboarding-arrow{display:none}
#onboarding[data-placement=right] .onboarding-arrow{left:-6px;top:calc(var(--hint-arrow-y) - 5px);border-top:0;border-right:0}
#onboarding[data-placement=left] .onboarding-arrow{right:-6px;top:calc(var(--hint-arrow-y) - 5px);border-bottom:0;border-left:0}
#onboarding[data-placement=top] .onboarding-arrow{bottom:-6px;left:calc(var(--hint-arrow-x) - 5px);border-top:0;border-left:0}
#onboarding[data-placement=bottom] .onboarding-arrow{top:-6px;left:calc(var(--hint-arrow-x) - 5px);border-bottom:0;border-right:0}
.onboarding-anchor-ring{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--hint-accent);border-radius:12px;box-shadow:0 0 0 4px var(--theme-accent-wash,#bf9ff10c)}
.onboarding-anchor-ring[hidden]{display:none}
@keyframes hint-in{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@media(max-width:480px),(max-height:550px){#onboarding{width:292px;padding:14px 18px 12px}#onboarding h2{font-size:19px}#onboarding-copy{font-size:12px}.onboarding-shortcut{margin-top:8px;font-size:9px}.onboarding-footer{margin-top:12px;padding-top:8px}}
@media(max-height:450px) and (min-width:481px){#onboarding{width:420px;padding:10px 16px 8px}.onboarding-header{position:absolute;top:0;right:4px;margin:0}.onboarding-eyebrow,.onboarding-shortcut{display:none}#onboarding h2{max-width:none;margin:0 36px 4px 0;font-size:17px;line-height:1.3}#onboarding-copy{padding-right:16px;font-size:12px;line-height:1.4}.onboarding-footer{margin-top:8px;padding-top:0;border:0}#onboarding [data-onboarding-close]{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){#onboarding:popover-open{animation:none}}