/* Guided-tour popover styling for driver.js. Vendored dist CSS from driver.js v1.8.0 (MIT), copied verbatim below, then re-themed with our semantic token roles so the popover matches the app in both light and dark (the roles flip under html.dark automatically, and the popover mounts on so it inherits that context). Propshaft serves this file from app/assets/stylesheets; the layout links it with stylesheet_link_tag "driver-theme". Keep the vendored block in sync with the pinned driver.js. */ /* ── driver.js v1.8.0 dist/driver.css (verbatim) ─────────────────────────── */ .driver-popover{all:unset;font-family:var(--driver-popover-font-family,"Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif);box-sizing:border-box;color:#2d2d2d;z-index:1000000000;background-color:#fff;border-radius:5px;min-width:250px;max-width:300px;margin:0;padding:15px;position:fixed;top:0;right:0;box-shadow:0 1px 10px #0006}.driver-popover-title{zoom:1;margin:0;font-size:19px;font-weight:700;line-height:1.5;display:block;position:relative}.driver-popover-close-btn{all:unset;cursor:pointer;color:#d2d2d2;z-index:1;text-align:center;width:32px;height:28px;font-size:18px;font-weight:500;transition:color .2s;position:absolute;top:0;right:0}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{zoom:1;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.5}.driver-popover-footer{text-align:right;zoom:1;justify-content:space-between;align-items:center;margin-top:15px;display:flex}.driver-popover-progress-text{color:#727272;zoom:1;font-size:13px;font-weight:400}.driver-popover-footer-btn{all:unset;box-sizing:border-box;color:#2d2d2d;cursor:pointer;zoom:1;background-color:#fff;border:1px solid #ccc;border-radius:3px;outline:0;padding:3px 7px;font-size:12px;line-height:1.3;text-decoration:none;display:inline-block}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}.driver-popover-footer-btn:hover,.driver-popover-footer-btn:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{flex-grow:1;justify-content:flex-end;display:flex}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";border:5px solid #fff;position:absolute}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{border-top-color:#0000;border-bottom-color:#0000;border-right-color:#0000;left:100%}.driver-popover-arrow-side-right{border-top-color:#0000;border-bottom-color:#0000;border-left-color:#0000;right:100%}.driver-popover-arrow-side-top{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;top:100%}.driver-popover-arrow-side-bottom{border-top-color:#0000;border-left-color:#0000;border-right-color:#0000;bottom:100%}.driver-popover-arrow-side-center,.driver-popover-arrow-none{display:none}.driver-active .driver-overlay{pointer-events:none}.driver-active.driver-no-scroll{overflow:hidden}.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in var(--driver-animation-duration,.4s) ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in var(--driver-animation-duration,.4s)}.driver-active-element-parent-no-scroll{overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important} /* ── Token-role overrides: theme the popover to match the app (light + dark) ─ */ .driver-popover { background-color: var(--surface); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .driver-popover-title { color: var(--foreground); } .driver-popover-description { color: var(--muted); } .driver-popover-progress-text { color: var(--muted); } .driver-popover-close-btn { color: var(--muted); } .driver-popover-close-btn:hover, .driver-popover-close-btn:focus { color: var(--foreground); } /* Footer buttons mirror ButtonComponent's quiet (secondary) variant. */ .driver-popover-footer-btn { background-color: var(--surface); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; } .driver-popover-footer-btn:hover, .driver-popover-footer-btn:focus { background-color: var(--surface-muted); } /* Arrow: recolor only the visible side of each variant so it matches the popover fill; the three transparent sides keep the vendored values. */ .driver-popover-arrow-side-left { border-left-color: var(--surface); } .driver-popover-arrow-side-right { border-right-color: var(--surface); } .driver-popover-arrow-side-top { border-top-color: var(--surface); } .driver-popover-arrow-side-bottom { border-bottom-color: var(--surface); } /* "?" tour-replay menu: drop the browser's default disclosure triangle so the trigger is just the circle-help icon (cross-browser). */ #tour-help > summary { list-style: none; } #tour-help > summary::-webkit-details-marker { display: none; }