/* New-user help, using the existing PhotoFlow design tokens. */
.help-launcher { white-space: nowrap; }
.onboarding-backdrop { position: fixed; inset: 0; z-index: 110; background: var(--color-overlay); pointer-events: none; }
.onboarding-backdrop[data-spotlight] { inset: var(--spotlight-top) auto auto var(--spotlight-left); width: var(--spotlight-width); height: var(--spotlight-height); background: transparent; border-radius: var(--radius-control); box-shadow: 0 0 0 100vmax var(--color-overlay); }
.onboarding-panel { position: fixed; z-index: 111; right: var(--page-gutter); bottom: var(--space-4); width: min(360px, calc(100% - 32px)); max-height: min(520px, 75dvh); overflow: auto; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-dialog); color: var(--color-ink); }
.onboarding-backdrop[hidden], .onboarding-panel[hidden], .help-launcher[hidden] { display: none; }
.onboarding-heading, .onboarding-actions, .onboarding-modes { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.onboarding-heading { color: var(--color-muted); font-size: var(--text-caption); }
.onboarding-modes { justify-content: flex-start; margin: var(--space-3) 0 var(--space-4); }
.onboarding-modes [aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }
.onboarding-panel h2 { font-size: var(--text-section); font-weight: var(--weight-medium); margin: 0 0 var(--space-2); }
.onboarding-panel p { line-height: 1.65; margin: 0 0 var(--space-4); }
.onboarding-panel .guide-footnote { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: var(--text-caption); }
.guide-destination { display: inline-block; margin-bottom: var(--space-4); text-underline-offset: 3px; }
.guide-destination[hidden] { display: none; }
.guide-highlight { outline: 2px solid var(--color-focus); outline-offset: 4px; scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.context-help { display: inline-block; position: relative; vertical-align: middle; margin-inline-start: var(--space-1); text-align: left; }
.context-help > summary { list-style: none; display: grid; place-items: center; width: var(--control-height); height: var(--control-height); cursor: help; color: var(--color-muted); border-radius: var(--radius-control); }
.context-help > summary::-webkit-details-marker { display: none; }
.context-help > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.context-help-copy { display: none; position: absolute; z-index: 40; top: 100%; left: 0; width: min(280px, calc(100vw - 64px)); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-panel); color: var(--color-ink); font-size: var(--text-small); font-weight: var(--weight-regular); }
.context-help:not([data-dismissed]):is([open], :hover, :focus-within) > .context-help-copy { display: block; }
.context-help:not([data-dismissed]):is([open], :hover, :focus-within)::details-content { content-visibility: visible; opacity: 1; transition: none; }
.context-help-copy p { margin: var(--space-2) 0 0; line-height: 1.65; }
.context-help-copy { left: var(--help-offset, 0px); }
.handoff-checklist { margin-top: var(--space-5); }
.outdoor-project-detail .outdoor-completion-button { width: auto; display: inline-flex; }
.outdoor-project-detail .outdoor-completion-entry { margin: var(--space-4) 0; padding: 0; }
.field-validation-error { margin: var(--space-1) 0 0; font-size: var(--text-caption); color: var(--color-danger); }
.optional-fields::details-content { transition: none; }
.section-with-help { display: flex; align-items: center; gap: var(--space-1); }
.section-with-help h2, .section-with-help h3 { margin: 0; }
.optional-fields { margin-top: var(--space-5); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.optional-fields > summary { cursor: pointer; font-weight: var(--weight-medium); padding: var(--space-2) 0; min-height: var(--control-height); }
.optional-fields > summary small { color: var(--color-muted); font-weight: var(--weight-regular); margin-left: var(--space-2); }
.next-action { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: var(--space-4) 0; }
.next-action p { margin: var(--space-1) 0 0; color: var(--color-muted); }
.next-action .button-group { flex-shrink: 0; }
.walkin-steps li { color: var(--color-muted); }
.walkin-steps li[data-step-state="done"] { color: var(--color-success); }
.walkin-steps li[aria-current="step"] { color: var(--color-ink); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 5px; }
.walkin-steps small { margin-left: var(--space-1); font-weight: var(--weight-regular); }
.order-action-links { display: grid; gap: var(--space-2); }
.order-action-links small { color: var(--color-muted); }
.booking-essential-note { max-width: 65ch; }
@media (max-width: 767px) {
  .onboarding-panel { bottom: var(--space-2); right: var(--space-2); width: calc(100% - 16px); max-height: 46dvh; padding: var(--space-4); }
  .onboarding-actions .button { min-height: var(--control-height); }
  .next-action { align-items: stretch; flex-direction: column; }
  .next-action .button-group { flex-wrap: wrap; }
  .topbar .help-launcher { margin-left: auto; padding-inline: var(--space-2); }
}