/* Help launcher, help panel, guided tour and welcome wizard.
   Tokens only — no raw hex, no primitives. Both [data-theme] values inherit correctly
   because every colour here resolves through the semantic layer. */

/* ---------------------------------------------------------------- launcher */
/* Rectangular, not a circle: pill/16px+ radius is a documented anti-pattern, and a
   labelled button reads as a control rather than as decoration. */
.help-launcher {
  position: fixed; right: var(--space-5); bottom: var(--space-5);
  z-index: var(--z-help-launcher);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-surface-raised); color: var(--text-primary);
  font-size: var(--font-size-sm); font-weight: var(--fw-medium);
  box-shadow: var(--shadow-float); cursor: pointer;
  transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.help-launcher:hover { border-color: var(--accent-default); transform: translateY(-1px); }
.help-launcher[aria-expanded="true"] { border-color: var(--accent-default); }
.help-launcher-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--radius-sm);
  background: var(--accent-tint); color: var(--accent-text);
  font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
}

/* One-time nudge: a dot alone would be colour-as-sole-signal, so it always ships with
   the text bubble beside it. Both disappear together once the page has been offered. */
.help-launcher-dot {
  width: 7px; height: 7px; border-radius: var(--radius-sm);
  background: var(--accent-default);
}
.help-hint {
  position: fixed; right: calc(var(--space-5) + 116px); bottom: calc(var(--space-5) + 4px);
  z-index: var(--z-help-launcher);
  max-width: 210px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent-tint-border); border-radius: var(--radius-md);
  background: var(--accent-tint); color: var(--text-primary);
  font-size: var(--font-size-xs); line-height: var(--lh-normal);
  box-shadow: var(--shadow-panel-current);
}

/* ------------------------------------------------------------------- panel */
.help-panel {
  color: var(--text-primary);
  position: fixed; right: var(--space-5); bottom: calc(var(--space-5) + 46px);
  z-index: var(--z-help-panel);
  width: min(360px, calc(100vw - 2 * var(--space-4)));
  max-height: min(70vh, 640px); overflow-y: auto;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--bg-surface-raised); box-shadow: var(--shadow-float);
  animation: popover-enter var(--motion-base) var(--ease-out) both;
}
.help-panel[hidden] { display: none; }
.help-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  position: sticky; top: 0; background: var(--bg-surface-raised);
}
.help-panel-head h2 { margin: 0; font-size: var(--font-size-md); color: var(--text-primary); }
.help-panel-body { padding: var(--space-3) var(--space-4) var(--space-4); }
.help-panel-body > * + * { margin-top: var(--space-4); }

.help-actions { display: grid; gap: var(--space-2); }
.help-action {
  display: block; width: 100%; text-align: left;
  padding: var(--space-3); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-surface);
  color: var(--text-primary); font-size: var(--font-size-base); cursor: pointer;
}
.help-action:hover { border-color: var(--accent-default); background: var(--bg-hover); }
.help-action.primary {
  border-color: transparent; background: var(--button-primary-bg);
  color: var(--button-primary-text); font-weight: var(--fw-medium);
}
.help-action.primary:hover { background: var(--button-primary-bg-hover); }
.help-action small { display: block; margin-top: 2px; font-size: var(--font-size-xs); opacity: .85; }

.help-group-title {
  margin: 0 0 var(--space-2); font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}
.help-chapters { display: grid; gap: var(--space-1); }
.help-chapter {
  display: flex; align-items: baseline; gap: var(--space-2); width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary);
  font-size: var(--font-size-base); cursor: pointer;
}
.help-chapter:hover { background: var(--bg-hover); }
.help-chapter span { color: var(--text-muted); font-size: var(--font-size-xs); }
.help-chapter[disabled] { cursor: not-allowed; opacity: .6; }

.help-entry { border-top: 1px solid var(--border-default); }
.help-entry:first-of-type { border-top: 0; }
.help-entry > summary {
  padding: var(--space-2) 0; cursor: pointer;
  font-size: var(--font-size-base); color: var(--text-primary);
}
.help-entry > summary::marker { color: var(--text-muted); }
.help-entry p { margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); line-height: var(--lh-normal); }

.help-keys { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.help-keys td { padding: var(--space-1) 0; border-bottom: 1px solid var(--border-default); vertical-align: top; }
.help-keys td:first-child { width: 38%; padding-right: var(--space-3); color: var(--text-primary); font-weight: var(--fw-medium); }
.help-keys td:last-child { color: var(--text-secondary); }

.help-foot {
  padding-top: var(--space-3); border-top: 1px solid var(--border-default);
  color: var(--text-muted); font-size: var(--font-size-xs); line-height: var(--lh-normal);
}

/* ------------------------------------------------------------- tour layer */
/* One <dialog> for the whole tour. showModal() puts it in the browser top layer — above
   every z-index in the app, including the review modals — and hands us Esc, a focus trap
   and an inert background for free. That inertness is the point: the tour narrates, it
   can never click or submit anything on the user's behalf. */
.tour-layer {
  color: var(--text-primary);
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: visible;
}
.tour-layer::backdrop { background: transparent; }  /* the ring's own shadow is the scrim */

.tour-ring {
  position: absolute; border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px var(--overlay-scrim);
  outline: 2px solid var(--accent-default); outline-offset: 3px;
  pointer-events: none;
  transition: top var(--motion-base) var(--ease-out), left var(--motion-base) var(--ease-out),
              width var(--motion-base) var(--ease-out), height var(--motion-base) var(--ease-out);
}
/* No anchor for this step: dim the whole viewport instead of ringing nothing. */
.tour-ring.is-blank { top: 50%; left: 50%; width: 0; height: 0; outline: 0; }

.tour-card {
  color: var(--text-primary);
  position: absolute; width: min(360px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--bg-surface-raised); box-shadow: var(--shadow-float);
}
.tour-card.is-centered { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-card h2 { margin: 0 0 var(--space-2); font-size: var(--font-size-md); line-height: var(--lh-tight); color: var(--text-primary); }
.tour-card p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-base); line-height: var(--lh-normal); }
.tour-card p + p { margin-top: var(--space-2); }
.tour-card strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.tour-card em { font-style: normal; color: var(--accent-text); }

.tour-meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.tour-chapter { font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.tour-count { font-size: var(--font-size-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.tour-actions {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}
.tour-actions .tour-spacer { flex: 1; }
.tour-skip { border: 0; background: transparent; color: var(--text-muted);
  font-size: var(--font-size-sm); cursor: pointer; padding: var(--space-1) 0; }
.tour-skip:hover { color: var(--text-primary); }

/* --------------------------------------------------------------- wizard */
.tour-wizard {
  width: min(560px, calc(100vw - 2 * var(--space-4)));
  padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--bg-surface-raised); color: var(--text-primary);
  box-shadow: var(--shadow-float);
}
.tour-wizard::backdrop { background: var(--overlay-scrim); }
.wizard-body { padding: var(--space-5) var(--space-5) var(--space-4); }
.wizard-kicker { font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.wizard-body h2 { margin: var(--space-2) 0 var(--space-3); font-size: var(--font-size-lg); line-height: var(--lh-tight); color: var(--text-primary); }
.wizard-body p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-base); line-height: var(--lh-normal); }
.wizard-body strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.wizard-body em { font-style: normal; color: var(--accent-text); font-weight: var(--fw-medium); }

.wizard-foot {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--border-default);
}
.wizard-foot .tour-spacer { flex: 1; }
/* Numbered so progress never depends on colour alone. */
.wizard-dots { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); }
.wizard-dots i { width: 6px; height: 6px; border-radius: var(--radius-sm); background: var(--border-strong); }
.wizard-dots i.on { background: var(--accent-default); }

/* Smooth scrolling and the ring's travel are motion; the global reduced-motion rule
   already flattens transitions, this covers the scroll the engine performs. */
@media (prefers-reduced-motion: reduce) {
  .tour-ring { transition: none; }
}

@media (max-width: 760px) {
  .help-hint { display: none; }
  .help-panel { right: var(--space-3); left: var(--space-3); width: auto; }
  .help-launcher { right: var(--space-3); bottom: var(--space-3); }
}