/* ============================================================
   MagpieToolbox - help.css
   Shared help / onboarding layer (used by every tool):
   A) inline info tips   B) guided tour
   C) how-it-works strip D) help panel
   Driven by help.js + a per-page window.MPT_HELP config.
   ============================================================ */

/* A - inline info tips ---------------------------------------- */
.mpt-help-dot{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:6px; padding:0; border:1px solid color-mix(in srgb, var(--brand) 45%, transparent); border-radius:50%; background:var(--brand-soft); color:var(--brand); cursor:pointer; vertical-align:middle; flex:0 0 auto; transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.mpt-help-dot:hover, .mpt-help-dot.is-open{ background:var(--brand); color:var(--on-accent,#fff); border-color:var(--brand); }
.mpt-help-dot:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.mpt-help-dot svg{ width:12px; height:12px; }
.mpt-pop{ position:fixed; z-index:240; width:250px; background:var(--surface); border:1px solid var(--border-default); border-radius:12px; box-shadow:var(--shadow-lg); padding:12px 13px; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity var(--dur-fast), transform var(--dur-fast); }
.mpt-pop.is-open{ opacity:1; transform:none; pointer-events:auto; }
.mpt-pop__t{ font-size:var(--text-sm); font-weight:700; color:var(--text-strong); margin:0 0 3px; }
.mpt-pop__b{ font-size:var(--text-xs); line-height:1.5; color:var(--text-muted); margin:0; }
.mpt-pop__b b{ color:var(--text-strong); font-weight:600; }

/* C - how-it-works strip -------------------------------------- */
.mpt-strip{ display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-4) var(--space-5) var(--space-5); margin-bottom:var(--space-5); border:1px solid color-mix(in srgb,var(--brand) 22%, var(--border-default)); border-radius:var(--r-ctrl); background:var(--brand-soft); }
.mpt-strip[hidden]{ display:none; }
.mpt-strip__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.mpt-strip__eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--brand); font-weight:700; }
.mpt-strip__eyebrow svg{ width:15px; height:15px; }
.mpt-strip__steps{ display:flex; align-items:flex-start; gap:var(--space-3); }
.mpt-strip__x{ width:28px; height:28px; border:none; border-radius:8px; background:transparent; color:var(--text-subtle); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mpt-strip__x:hover{ background:color-mix(in srgb,var(--text-muted) 14%, transparent); color:var(--text-strong); }
.mpt-strip__x svg{ width:15px; height:15px; }
.mpt-step{ flex:1; display:flex; gap:10px; align-items:flex-start; min-width:0; }
.mpt-step__n{ flex:0 0 auto; width:26px; height:26px; border-radius:9px; background:var(--brand-soft); color:var(--brand); font-family:var(--font-display); font-size:var(--text-sm); font-weight:700; display:flex; align-items:center; justify-content:center; }
.mpt-step__t{ font-size:var(--text-sm); font-weight:700; color:var(--text-strong); margin:2px 0; }
.mpt-step__b{ font-size:var(--text-sm); line-height:1.5; color:var(--text-muted); margin:0; }
.mpt-step__arrow{ align-self:center; color:color-mix(in srgb,var(--brand) 55%, transparent); flex:0 0 auto; }
.mpt-step__arrow svg{ width:16px; height:16px; }
.mpt-strip__acts{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.mpt-strip__show{ display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border-default); border-radius:var(--radius-pill); padding:7px 13px; font:inherit; font-size:var(--text-sm); font-weight:700; color:var(--brand); cursor:pointer; white-space:nowrap; transition:border-color var(--dur-fast), background var(--dur-fast); }
.mpt-strip__show:hover{ border-color:var(--brand); }
.mpt-strip__show svg{ width:15px; height:15px; }
.mpt-reopen{ display:inline-flex; align-items:center; gap:6px; margin-bottom:var(--space-5); }
.mpt-reopen[hidden]{ display:none; }
.mpt-strip__foot{ display:flex; justify-content:flex-start; }
.mpt-strip__toggle{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex:1; min-width:0; background:transparent; border:none; cursor:pointer; padding:0; text-align:left; }
.mpt-strip__help{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--border-default); border-radius:var(--radius-pill); padding:5px 13px; font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; color:var(--text-strong); cursor:pointer; transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.mpt-strip__help svg{ width:14px; height:14px; }
.mpt-strip__help:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.mpt-strip__chev{ display:inline-flex; color:var(--text-subtle); transition:transform var(--dur-fast) var(--ease-out); }
.mpt-strip__chev svg{ width:16px; height:16px; }
.mpt-strip__toggle[aria-expanded="true"] .mpt-strip__chev{ transform:rotate(180deg); }
.mpt-strip__x svg{ transition:transform var(--dur-fast) var(--ease-out); }
.mpt-strip.is-collapsed .mpt-strip__x svg{ transform:rotate(45deg); }
.mpt-strip__panel{ display:flex; flex-direction:column; gap:var(--space-4); }
.mpt-strip.is-collapsed{ gap:0; padding-bottom:var(--space-4); }
.mpt-strip.is-collapsed .mpt-strip__panel{ display:none; }

@media (max-width:760px){ .mpt-strip__steps{ flex-direction:column; } .mpt-step__arrow{ display:none; } }

/* B - guided tour --------------------------------------------- */
.mpt-tour-catch{ position:fixed; inset:0; z-index:10000; background:transparent; }
.mpt-tour-catch[hidden]{ display:none; }
.mpt-ring{ position:fixed; z-index:10001; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 3px var(--brand), 0 0 0 9999px color-mix(in srgb, var(--ink-950,#0b1220) 58%, transparent);
  animation:mptRingBlink 1.15s var(--ease-in-out, ease-in-out) infinite; }
.mpt-ring[hidden]{ display:none; }
@keyframes mptRingBlink{
  0%, 100%{ box-shadow:0 0 0 3px var(--brand), 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent), 0 0 0 9999px color-mix(in srgb, var(--ink-950,#0b1220) 58%, transparent); }
  50%{ box-shadow:0 0 0 3px var(--brand), 0 0 0 7px color-mix(in srgb, var(--brand) 30%, transparent), 0 0 0 9999px color-mix(in srgb, var(--ink-950,#0b1220) 58%, transparent); }
}
.mpt-spot{ position:relative; z-index:10001; border-radius:12px;
  box-shadow:0 0 0 3px var(--brand), 0 0 0 9999px color-mix(in srgb, var(--ink-950,#0b1220) 58%, transparent);
  transition:box-shadow var(--dur-base) var(--ease-out); }
.mpt-tourpop{ position:fixed; z-index:10002; width:300px; max-width:calc(100vw - 24px); background:var(--surface); border:1px solid var(--border-default); border-radius:14px; box-shadow:var(--shadow-xl); padding:16px; opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity var(--dur-base), transform var(--dur-base); }
.mpt-tourpop.on{ opacity:1; pointer-events:auto; transform:none; }
.mpt-tourpop[hidden]{ display:none; }
.mpt-tourpop__step{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--brand); }
.mpt-tourpop__t{ font-family:var(--font-display); font-size:var(--text-md); font-weight:600; color:var(--text-strong); margin:4px 0 5px; }
.mpt-tourpop__b{ font-size:var(--text-sm); line-height:1.5; color:var(--text-muted); margin:0 0 14px; }
.mpt-tourpop__nav{ display:flex; align-items:center; gap:8px; }
.mpt-tourpop__dots{ display:flex; gap:5px; margin-right:auto; }
.mpt-tourpop__dot{ width:6px; height:6px; border-radius:50%; background:var(--border-strong); }
.mpt-tourpop__dot.on{ background:var(--brand); }
.mpt-tourpop__caret{ position:absolute; top:-6px; width:12px; height:12px; background:var(--surface); border-left:1px solid var(--border-default); border-top:1px solid var(--border-default); transform:translateX(-50%) rotate(45deg); }
.mpt-tourpop__caret.is-below{ top:auto; bottom:-6px; transform:translateX(-50%) rotate(225deg); }

/* D - help panel (modal) -------------------------------------- */
.mpt-modal{ position:fixed; inset:0; z-index:260; }
.mpt-modal[hidden]{ display:none; }
.mpt-modal__back{ position:absolute; inset:0; background:rgba(7,11,20,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.mpt-modal__panel{ position:relative; margin:8vh auto 0; width:min(560px, calc(100vw - 32px)); max-height:84vh; overflow:auto; background:var(--surface); border:1px solid var(--border-default); border-radius:16px; box-shadow:var(--shadow-xl); animation:mptModalIn .18s var(--ease-out); }
@keyframes mptModalIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.mpt-modal__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:16px 18px; border-bottom:1px solid var(--border-default); position:sticky; top:0; background:var(--surface); }
.mpt-modal__head h3{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; letter-spacing:-0.02em; color:var(--text-strong); margin:0; }
.mpt-modal__x{ width:34px; height:34px; border:1px solid var(--border-default); border-radius:10px; background:transparent; color:var(--text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mpt-modal__x:hover{ color:var(--text-strong); border-color:var(--text-subtle); }
.mpt-modal__x svg{ width:16px; height:16px; }
.mpt-modal__body{ padding:18px; }
.mpt-modal__body h4{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); margin:0 0 var(--space-3); }
.mpt-modal__body h4:not(:first-child){ margin-top:var(--space-6); }
.mpt-hsteps{ display:flex; flex-direction:column; gap:11px; }
.mpt-hstep{ display:flex; gap:10px; align-items:flex-start; }
.mpt-hstep__n{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--brand); color:var(--on-accent,#fff); font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:700; display:flex; align-items:center; justify-content:center; }
.mpt-hstep p{ margin:0; font-size:var(--text-sm); line-height:1.5; color:var(--text-muted); }
.mpt-hstep b{ color:var(--text-strong); }
.mpt-glo{ display:grid; grid-template-columns:170px 1fr; gap:9px 16px; }
.mpt-glo dt{ font-size:var(--text-sm); font-weight:700; color:var(--text-strong); }
.mpt-glo dd{ font-size:var(--text-sm); line-height:1.5; color:var(--text-muted); margin:0; }
.mpt-glo dd b{ color:var(--text-strong); font-weight:600; }
@media (max-width:560px){ .mpt-glo{ grid-template-columns:1fr; gap:2px 0; } .mpt-glo dd{ margin-bottom:9px; } }

/* the Help quick button reuses .btn; nothing extra needed */
@media (prefers-reduced-motion: reduce){
  .mpt-pop, .mpt-tourpop, .mpt-spot, .mpt-modal__panel{ transition:none; animation:none; }
  .mpt-ring{ animation:none; }
}