/* ============================================================
   Mission Metrics Marketing Engine — in-page help ("?")
   Same pattern as the All is Well dashboard help, dressed in this app's
   own warm paper tokens (lib/app.css), so it follows light and dark mode
   and each client's brand colour (--accent) with no extra rules.
   ============================================================ */

/* ---- the "?" button ---- */
.help-trigger{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin-left:10px;border-radius:50%;
  background:var(--bg-raised,#F6F4F0);color:var(--ink,#1A1917);
  border:1.5px solid var(--line,#D6D1C7);
  font-family:inherit;font-size:13px;font-weight:700;line-height:1;letter-spacing:0;text-transform:none;
  cursor:pointer;vertical-align:middle;user-select:none;-webkit-user-select:none;flex-shrink:0;
  transition:background var(--t1,.2s),color var(--t1,.2s),border-color var(--t1,.2s),transform var(--t1,.2s);
  position:relative;top:-.1em;
}
/* Big display titles get a slightly bigger "?", still a quiet one. */
h1 > .help-trigger{width:28px;height:28px;font-size:15px}
/* A thumb needs 44px; the ring stays small, the hit area does not. */
.help-trigger::after{content:"";position:absolute;inset:-10px;border-radius:50%}
.help-trigger:hover{background:var(--accent,#1A1917);color:var(--accent-ink,#fff);border-color:var(--accent,#1A1917);transform:scale(1.06)}
.help-trigger:focus-visible{outline:2px solid var(--accent,#1A1917);outline-offset:2px}

/* ---- the popup ---- */
.help-backdrop{
  position:fixed;inset:0;z-index:9500;
  background:rgba(20,19,15,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:help-fade .18s ease-out;
}
@keyframes help-fade{from{opacity:0}to{opacity:1}}
.help-modal{
  background:var(--bg-raised,#F6F4F0);color:var(--ink,#1A1917);
  border-radius:var(--r-lg,24px);border:1px solid var(--line,#D6D1C7);border-top:4px solid var(--accent,#1A1917);
  width:100%;max-width:680px;max-height:86vh;overflow-y:auto;position:relative;
  box-shadow:var(--shadow-lift,0 24px 60px rgba(26,25,23,.12));
  animation:help-rise .26s var(--ease,cubic-bezier(.22,1,.36,1));
  font-family:inherit;
}
@keyframes help-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.help-backdrop,.help-modal{animation:none}}
.help-head{
  position:sticky;top:0;z-index:1;background:var(--bg-raised,#F6F4F0);
  display:flex;align-items:center;gap:12px;padding:18px 24px 14px;
  border-bottom:1px solid var(--line-soft,#E2DED6);
}
.help-head .help-icon{
  width:36px;height:36px;flex-shrink:0;border-radius:12px;
  background:var(--accent,#1A1917);color:var(--accent-ink,#fff);
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;
}
.help-head h3{flex:1;margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink,#1A1917);line-height:1.3}
.help-head .help-kicker{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2,#55524C);margin-bottom:2px}
.help-close{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:var(--bg,#EDEAE4);border:1px solid var(--line,#D6D1C7);
  color:var(--ink-2,#55524C);font-size:20px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.help-close:hover{color:var(--ink,#1A1917);border-color:var(--ink-3,#8B867D)}
.help-body{padding:18px 24px 24px;font-size:15px;line-height:1.65;color:var(--ink,#1A1917)}
.help-body h4{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-2,#55524C);margin:20px 0 6px;
}
.help-body h4:first-child{margin-top:0}
.help-body p{margin:0 0 10px}
/* How-to video at the top of a popup (help/videos.js, made by tools/videos/) */
.help-video{display:block;width:100%;aspect-ratio:16/9;margin:0 0 16px;border-radius:12px;background:#0B2343}
.help-body ul,.help-body ol{margin:6px 0 12px 22px}
.help-body li{margin-bottom:5px}
.help-body strong,.help-body b{font-weight:650}
.help-body code{background:var(--bg-sunken,#E4E0D8);padding:1px 6px;border-radius:4px;font-size:13px}
.help-body .help-callout{
  background:var(--bg,#EDEAE4);border-left:3px solid var(--accent,#1A1917);
  padding:10px 14px;border-radius:0 10px 10px 0;margin:12px 0;font-size:14px;
}
.help-body .help-callout.warn{border-left-color:var(--warn,#9A7B3F)}
.help-body .help-callout.danger{border-left-color:var(--stop,#9A4B42)}
.help-body .help-callout.ok{border-left-color:var(--ok,#3F7D5C)}
.help-body table{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 14px}
.help-body th{background:var(--bg-sunken,#E4E0D8);color:var(--ink,#1A1917);text-align:left;padding:8px 10px;font-weight:650;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.help-body td{padding:8px 10px;border-bottom:1px solid var(--line-soft,#E2DED6);vertical-align:top}
.help-body .help-task{border:1px solid var(--line-soft,#E2DED6);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--bg,#EDEAE4)}
.help-body .help-task ol{margin:6px 0 0 20px}
.help-body .help-qa{margin:10px 0;padding:10px 14px;border-left:3px solid var(--line,#D6D1C7);background:var(--bg,#EDEAE4);border-radius:0 10px 10px 0}
.help-body .help-qa b{display:block;margin-bottom:4px}
.help-kbd{display:inline-block;border:1px solid var(--line,#D6D1C7);border-bottom-width:2px;border-radius:4px;padding:0 6px;font-size:12px;background:var(--bg-raised,#F6F4F0)}
.help-foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 24px 18px;border-top:1px solid var(--line-soft,#E2DED6);background:var(--bg,#EDEAE4);
  font-size:13px;color:var(--ink-2,#55524C);
}
.help-foot .help-links{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.help-foot a{color:var(--ink,#1A1917);font-weight:600;text-decoration:none}
.help-foot a:hover{text-decoration:underline}
.help-foot .help-manual-btn{
  display:inline-block;padding:10px 16px;border-radius:999px;background:var(--accent,#1A1917);color:var(--accent-ink,#fff);
}
.help-foot .help-manual-btn:hover{text-decoration:none;filter:brightness(1.08)}

/* ---- floating "Help" button (pages with no header "?") ---- */
.help-fab{
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:9000;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:10px 16px;border-radius:999px;border:none;cursor:pointer;
  background:var(--ink,#1A1917);color:var(--bg,#EDEAE4);
  font-family:inherit;font-size:14px;font-weight:600;
  box-shadow:var(--shadow-lift,0 12px 30px rgba(0,0,0,.2));
}
.help-fab .q{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--bg,#EDEAE4);color:var(--ink,#1A1917);font-weight:700;font-size:14px}
@media print{.help-trigger,.help-fab,.help-backdrop{display:none!important}}
@media (max-width:600px){
  .help-backdrop{padding:10px;align-items:flex-end}
  .help-modal{border-radius:20px;max-height:90vh}
  .help-head{padding:14px 16px 12px}
  .help-body{padding:16px 16px 20px;font-size:15px}
  .help-foot{padding:12px 16px 16px}
  .help-fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:9px 13px;font-size:13px}
}