/* Portal tour (T35, assets/tour.js): the ? help button and menu in the header, the spotlight, the step
   card, and the "Full tour paused" bar. Colors come from the portal variables, so every portal style
   (classic, midnight, command, editorial, aurora) works; z-index sits above the sticky header and Messages. */

/* ? help button (all widths, phones too: next to the burger) */
.p-help-wrap { position: relative; display: flex; align-items: center; }
.p-help { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--navy); font: inherit; font-size: .95rem; font-weight: 700; line-height: 1; cursor: pointer; }
.p-help:hover { border-color: var(--navy-2); }
.p-help:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pt-command .p-help { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff; }
.pt-midnight .p-help { background: transparent; color: #fff; }
@media (min-width: 1000px) {
  .pt-command body.p-in .p-help-wrap { order: 2; margin: 0 12px 8px; }
}

.p-help-menu { position: fixed; z-index: 10005; display: flex; flex-direction: column; min-width: 210px; margin: 0; padding: 4px 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 25, 40, .18); }
.p-help-menu[hidden] { display: none; }
.p-help-menu > * { display: block; width: 100%; padding: 9px 14px; border: 0; background: none; text-align: left; font: inherit; font-size: .9rem;
  color: var(--ink); text-decoration: none; cursor: pointer; }
.p-help-menu > *:hover, .p-help-menu > *:focus { background: rgba(127, 140, 160, .14); outline: none; }
.p-help-menu > *:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }

/* Overlay: a click blocker, the spotlight hole (its shadow dims the page), and the card */
.p-tour-block { position: fixed; inset: 0; z-index: 10000; background: transparent; }
.p-tour-block.p-tour-dim { background: rgba(15, 25, 40, .55); }
.p-tour-spot { position: fixed; z-index: 10001; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 25, 40, .55), 0 0 0 2px var(--focus) inset; transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
.p-tour-spot[hidden] { display: none; }
.p-tour-pop { position: fixed; z-index: 10002; left: 16px; top: 16px; box-sizing: border-box; width: 340px; max-width: calc(100vw - 32px); padding: 16px 18px 14px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(15, 25, 40, .28);
  animation: p-tour-in .15s ease-out; }
.p-tour-pop:focus { outline: none; }
.p-tour-pop:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.p-tour-pop.p-tour-welcome { padding: 20px 20px 16px; }
@keyframes p-tour-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.p-tour-count { margin: 0 0 4px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.p-tour-title { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; color: var(--navy); padding-right: 18px; }
.p-tour-body { margin: 0 0 10px; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.p-tour-tag { margin: 0 0 10px; font-size: .85rem; color: var(--ink-2); }
.p-tour-tag .p-plan-tag { margin-left: 0; }
.p-tour-upnext { margin: 0 0 -4px; font-size: .78rem; color: var(--muted); }
.p-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.p-tour-left { flex: none; }
.p-tour-left .p-link-btn { white-space: nowrap; }
.p-tour-right .p-btn { white-space: nowrap; }
.p-tour-left, .p-tour-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-tour-right { justify-content: flex-end; }
.p-tour-extra { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.p-tour-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--muted); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.p-tour-close:hover { color: var(--ink); }
.p-tour-close:focus-visible { outline: 3px solid var(--focus); }

/* The arrow: a rotated square in the card's colors, on the side facing the target */
.p-tour-arrow { display: none; position: absolute; width: 12px; height: 12px; background: var(--card); border: 1px solid var(--line); transform: rotate(45deg); }
.p-tour-arrow-below, .p-tour-arrow-above, .p-tour-arrow-right, .p-tour-arrow-left { display: block; }
.p-tour-arrow-below { top: -7px; margin-left: -6px; border-right: 0; border-bottom: 0; }
.p-tour-arrow-above { bottom: -7px; margin-left: -6px; border-left: 0; border-top: 0; }
.p-tour-arrow-right { left: -7px; margin-top: -6px; border-right: 0; border-top: 0; }
.p-tour-arrow-left { right: -7px; margin-top: -6px; border-left: 0; border-bottom: 0; }

/* "Full tour paused" bar */
.p-tour-bar { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 10003; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15, 25, 40, .2); }
.p-tour-bar-text { font-weight: 600; font-size: .9rem; margin-right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .p-tour-spot { transition: none; }
  .p-tour-pop { animation: none; }
}