/* The setup guide, the help button and guided tours (templates/onboarding/_shell.html). */

/* ---------- The dock: bottom right, above the phone's bottom bar ---------- */
.gd-dock { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 1023px) { .gd-dock { bottom: calc(var(--space-20) + env(safe-area-inset-bottom)); right: var(--space-3); } }
/* Beside the right panel, not over its footer (its Save button). */
@media (min-width: 901px) {
  .gd-dock { transition: right var(--dur-slow) var(--ease-drawer); }
  body.rpanel-open .gd-dock { right: calc(var(--rpanel-w) + var(--space-4)); }
}
/* Phones: the panel covers the page, so the page's help steps aside. */
@media (max-width: 900px) { body.rpanel-open .gd-dock { display: none; } }
@media (prefers-reduced-motion: reduce) { .gd-dock { transition: none; } }
.gd-pill, .gd-help-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-min); border: 1px solid hsl(var(--border)); border-radius: var(--radius-full); background: hsl(var(--surface)); color: hsl(var(--fg)); box-shadow: var(--shadow-card-hover); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.gd-pill { padding: 0 var(--space-4) 0 var(--space-2); }
.gd-help-btn { width: var(--tap-min); padding: 0; }
.gd-help-btn svg { width: var(--space-5); height: var(--space-5); }
.gd-pill:active, .gd-help-btn:active { transform: scale(0.97); }
.gd-pill:focus-visible, .gd-help-btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .gd-pill:hover, .gd-help-btn:hover { box-shadow: var(--shadow-popover); } }
.gd-pill__n { font-variant-numeric: tabular-nums; color: hsl(var(--fg-muted)); }
/* Progress as a ring: one conic gradient, no image. */
.gd-ring { width: var(--space-7); height: var(--space-7); border-radius: var(--radius-full); background: conic-gradient(hsl(var(--accent)) calc(var(--p) * 1%), hsl(var(--chart-track)) 0); -webkit-mask: radial-gradient(circle, transparent 52%, hsl(0 0% 0%) 53%); mask: radial-gradient(circle, transparent 52%, hsl(0 0% 0%) 53%); }

/* ---------- Panels ---------- */
.gd-panel { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + var(--tap-min) + var(--space-3) + env(safe-area-inset-bottom)); z-index: 61; width: min(24rem, calc(100vw - var(--space-8))); max-height: min(36rem, calc(100dvh - var(--space-20) * 2)); overflow: auto; overscroll-behavior: contain; padding: var(--space-4); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--surface)); box-shadow: var(--shadow-popover); transform-origin: bottom right; }
@media (max-width: 1023px) { .gd-panel { right: var(--space-3); bottom: calc(var(--space-20) + var(--tap-min) + var(--space-3) + env(safe-area-inset-bottom)); max-height: calc(100dvh - var(--space-20) * 2 - var(--space-8)); } }
@media (prefers-reduced-motion: no-preference) {
  .gd-panel:not([hidden]) { animation: gd-in 180ms var(--ease-out); }
}
@keyframes gd-in { from { opacity: 0; transform: scale(0.97) translateY(var(--space-1)); } }
.gd-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.gd-panel__title { margin: 0; font-size: var(--text-lg); }
.gd-panel__sub { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: hsl(var(--fg-muted)); }
.gd-panel__foot { margin-top: var(--space-3); text-align: center; }
.gd-bar { height: var(--space-1-5); margin: var(--space-3) 0; border-radius: var(--radius-full); background: hsl(var(--chart-track)); overflow: hidden; }
.gd-bar > span { display: block; height: 100%; border-radius: inherit; background: hsl(var(--accent)); }

.gd-steps { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.gd-step { display: grid; grid-template-columns: var(--space-7) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); }
.gd-step.is-next { background: hsl(var(--accent-soft) / .6); }
.gd-step__mark { display: grid; place-items: center; width: var(--space-7); height: var(--space-7); border-radius: var(--radius-full); border: 1.5px solid hsl(var(--border-strong)); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: hsl(var(--fg-muted)); }
.gd-step__mark svg { width: var(--space-4); height: var(--space-4); }
.gd-step.is-done .gd-step__mark { border-color: transparent; background: hsl(var(--success-bg)); color: hsl(var(--success)); }
.gd-step.is-waiting .gd-step__mark { border-color: transparent; background: hsl(var(--warning-bg)); color: hsl(var(--warning)); }
.gd-step.is-next .gd-step__mark { border-color: hsl(var(--accent)); color: hsl(var(--accent-soft-fg)); }
.gd-step__title { margin: var(--space-1) 0 0; font-size: var(--text-sm); font-weight: 600; }
.gd-step.is-done .gd-step__title { color: hsl(var(--fg-muted)); }
.gd-step.is-blocked .gd-step__title, .gd-step.is-blocked .gd-step__mark { color: hsl(var(--fg-subtle)); }
.gd-step.is-blocked .gd-step__after { display: block; }
.gd-step__why { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: hsl(var(--fg-muted)); text-wrap: pretty; }
.gd-step:not(.is-next):not(.is-waiting) .gd-step__why, .gd-step:not(.is-next) .gd-step__actions { display: none; }
.gd-step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.gd-step__actions form { display: contents; }
.gd-opt { margin-left: var(--space-1); font-size: var(--text-xs); font-weight: 500; color: hsl(var(--fg-subtle)); }
.gd-link { display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: var(--tap-min); padding: 0; border: 0; background: none; color: hsl(var(--primary)); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-decoration: none; }
.gd-link svg { width: var(--space-4); height: var(--space-4); }
@media (hover: hover) and (pointer: fine) { .gd-link:hover { text-decoration: underline; } }
.gd-link:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-sm); }

.gd-video { display: block; width: 100%; aspect-ratio: 16 / 10; margin-top: var(--space-3); border-radius: var(--radius-md); background: hsl(var(--surface-sunken)); }
.gd-help__tour { margin-top: var(--space-3); }
.gd-help__links { display: grid; gap: 0; margin-top: var(--space-2); }
.gd-help__links form { display: contents; }

.gd-welcome p { margin: 0 0 var(--space-3); }
.gd-welcome__list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.gd-welcome__small { font-size: var(--text-sm); color: hsl(var(--fg-muted)); }

/* ---------- A guided tour ---------- */
.gd-tour { position: fixed; inset: 0; z-index: 80; }
.gd-spot { position: fixed; top: 0; left: 0; border-radius: var(--radius-md); box-shadow: 0 0 0 100vmax hsl(var(--scrim) / .55); pointer-events: none; }
.gd-spot.is-off { width: 0 !important; height: 0 !important; transform: translate(50vw, 50vh) !important; }
@media (prefers-reduced-motion: no-preference) {
  .gd-spot { transition: transform 260ms var(--ease-out), width 260ms var(--ease-out), height 260ms var(--ease-out); }
  .gd-bubble { transition: top 260ms var(--ease-out), left 260ms var(--ease-out); }
}
.gd-bubble { position: fixed; width: min(22rem, calc(100vw - var(--space-6))); padding: var(--space-4); border-radius: var(--radius-lg); background: hsl(var(--surface)); box-shadow: var(--shadow-popover); outline: none; }
.gd-bubble.is-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.gd-bubble.is-sheet { left: var(--space-3); right: var(--space-3); bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); top: auto; width: auto; }
.gd-bubble__count { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: hsl(var(--accent-soft-fg)); }
.gd-bubble__title { margin: var(--space-1) 0 0; font-size: var(--text-lg); }
.gd-bubble__body { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: hsl(var(--fg-muted)); text-wrap: pretty; }
.gd-bubble__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.gd-bubble__nav { display: flex; gap: var(--space-2); }

@media print { .gd-dock, .gd-panel, .gd-tour, .gd-xp { display: none !important; } }

/* ---------- The discovery tour: one stop per page (onboarding/explore.py) ---------- */
/* A card in the dock's corner, not a modal: the page stays readable under it. */
.gd-xp { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: 62; width: min(23rem, calc(100vw - var(--space-8))); padding: var(--space-4); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--surface)); box-shadow: var(--shadow-popover); transform-origin: bottom right; }
@media (max-width: 1023px) { .gd-xp { right: var(--space-3); left: var(--space-3); width: auto; bottom: calc(var(--space-20) + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: no-preference) { .gd-xp { animation: gd-in 220ms var(--ease-out); } }
.gd-dock.is-under-xp { visibility: hidden; }
.gd-xp .gd-bar { margin: var(--space-2) 0 var(--space-3); }
.gd-xp .gd-bubble__title:focus { outline: none; }
.gd-xp .gd-bubble__title:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-sm); }
/* "Well done": the card's text gives way to one line, then the next page loads. */
.gd-xp__bravo { display: none; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-1) 0; font-size: var(--text-base); font-weight: 600; text-wrap: pretty; }
.gd-xp__check { flex-shrink: 0; display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); background: hsl(var(--success-bg)); color: hsl(var(--success)); }
.gd-xp__check svg { width: var(--space-4); height: var(--space-4); }
.gd-xp.is-bravo .gd-xp__body { display: none; }
.gd-xp.is-bravo .gd-xp__bravo { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .gd-xp.is-bravo .gd-xp__bravo { animation: gd-in 200ms var(--ease-out); }
  .gd-xp.is-bravo .gd-xp__check { animation: gd-pop 260ms var(--ease-out); }
}
@keyframes gd-pop { from { transform: scale(0.8); opacity: 0; } }
/* The stop's entry in the menu. */
.gd-xp-here { box-shadow: inset 0 0 0 2px hsl(var(--accent)); border-radius: var(--radius-md); }

/* The guide while the portal is being prepared: one waiting card. */
.gd-wait { display: grid; grid-template-columns: var(--space-7) minmax(0, 1fr); gap: var(--space-3); margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); background: hsl(var(--warning-bg) / .6); }
.gd-wait__mark { display: grid; place-items: center; width: var(--space-7); height: var(--space-7); border-radius: var(--radius-full); background: hsl(var(--warning-bg)); color: hsl(var(--warning)); }
.gd-wait__mark svg { width: var(--space-4); height: var(--space-4); }
.gd-wait .gd-step__title { margin: 0; }
.gd-wait .gd-step__why { display: block; }

/* ---------- A trial's own demo (onboarding/trial_demo.py) ---------- */
.trial-demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: 1px solid hsl(var(--accent) / .35); border-radius: var(--radius-md); background: hsl(var(--accent-soft) / .7); font-size: var(--text-sm); }
.trial-demo-bar.is-own { border-color: hsl(var(--border)); background: hsl(var(--surface-sunken)); }
.trial-demo-bar__tag { flex: none; padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full); background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.trial-demo-bar.is-own .trial-demo-bar__tag { background: hsl(var(--fg-muted)); color: hsl(var(--surface)); }
.trial-demo-bar__text { flex: 1 1 16rem; min-width: 0; color: hsl(var(--fg)); text-wrap: pretty; }
.trial-demo-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.trial-demo-bar__actions form { margin: 0; }
.trial-demo-bar__go, .trial-demo-bar__switch { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); padding: 0 var(--space-2); border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; border-radius: var(--radius-sm); }
.trial-demo-bar__go { color: hsl(var(--accent-soft-fg)); }
.trial-demo-bar__go svg { width: var(--space-4); height: var(--space-4); }
.trial-demo-bar__switch { color: hsl(var(--fg-muted)); }
@media (hover: hover) and (pointer: fine) { .trial-demo-bar__go:hover, .trial-demo-bar__switch:hover { text-decoration: underline; } }
.trial-demo-bar__go:focus-visible, .trial-demo-bar__switch:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }