/* Interactive Help mode (public/js/admin/help/engine.js): outline + "?" markers on every control, the popover / bottom sheet, the "Help for this page"
   drawer, the "Exit help mode" pill. Tokens from admin.css only; logical properties (RTL); light + dark follow the tokens; works from 375 px. */
:root { --hp-ring: color-mix(in srgb, var(--accent-solid) 78%, transparent); --hp-z: 5000; }

/* ---- top bar button + user menu row */
.hp-toggle.on { background: var(--accent-solid); color: var(--accent-on); }
.hp-toggle.on:hover:not(:disabled) { background: var(--accent-d); }
.hp-menu-row .grow { flex: 1; }
.hp-menu-row .hp-menu-kbd { padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 700; }
.hp-menu-row[aria-checked="true"] { color: var(--accent-solid); }

/* ---- while help mode is on: a dashed outline on every control (an outline never moves the layout) */
body.help-mode [data-hp] { outline: 1.5px dashed var(--hp-ring); outline-offset: 1px; cursor: help; }
body.help-mode [data-hp]:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
body.help-mode [data-hp-cur] { outline: 2.5px solid var(--accent-solid); outline-offset: 2px; }

.hp-root { font-family: var(--font); font-size: 14px; line-height: 1.55; color: var(--ink); }
.hp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- the "?" markers (one overlay: nothing in the page moves) */
.hp-markers { position: fixed; inset: 0; pointer-events: none; z-index: var(--hp-z); overflow: hidden; }
.hp-q { --hp-d: 18px; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--hp-d); height: var(--hp-d); margin: calc(var(--hp-d) / -2) 0 0 calc(var(--hp-d) / -2);
  padding: 0; border: 0; border-radius: 50%; background: var(--accent-solid); color: var(--accent-on); font: 800 11px/1 var(--font); cursor: help; pointer-events: auto; box-shadow: 0 0 0 2px var(--panel), 0 1px 4px rgba(0, 0, 0, .3); }
.hp-q::after { content: ""; position: absolute; inset: -7px; }
@media (pointer: coarse) { .hp-q::after { inset: -11px; } }   /* a 44 px tap area around the 22 px marker */
.hp-q:hover { background: var(--accent-d); }
.hp-q-lg { position: static; --hp-d: 28px; margin: 0 !important; transform: none !important; flex: 0 0 auto; font-size: 15px; pointer-events: none; box-shadow: none; }
.hp-q-lg::after { display: none; }

/* ---- the "Exit help mode" pill */
.hp-pill { position: fixed; inset-inline: 12px; bottom: 16px; margin-inline: auto; width: fit-content; max-width: calc(100vw - 24px); z-index: calc(var(--hp-z) + 50); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px;
  background: var(--ink); color: var(--bg); border-radius: 999px; box-shadow: var(--shadow-lg); }
:root[dir="rtl"] .hp-pill { padding: 8px 12px 8px 8px; }
.hp-pill[hidden] { display: none; }
.hp-pill-q { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-solid); color: var(--accent-on); font-weight: 800; flex: 0 0 auto; }
.hp-pill-txt { display: grid; line-height: 1.3; min-width: 0; }
.hp-pill-txt small { opacity: .75; font-size: 12px; }
.hp-pill-x { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 13px var(--font); cursor: pointer; white-space: nowrap; }
.hp-pill-x:hover { filter: brightness(.94); }

/* ---- popover (desktop) / bottom sheet (phone) */
.hp-pop { position: fixed; z-index: calc(var(--hp-z) + 100); box-sizing: border-box; display: flex; flex-direction: column; padding: 14px 16px 14px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
  max-height: min(72vh, 580px); outline: 0; opacity: 0; transform: translateY(5px); transition: opacity .14s ease, transform .14s ease; overscroll-behavior: contain; }
.hp-pop[data-side="above"] { transform: translateY(-5px); }
.hp-pop.in { opacity: 1; transform: none; }
.hp-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hp-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 2px; }
.hp-head h2 { margin: 0; flex: 1; min-width: 0; font-size: 16.5px; line-height: 1.3; font-weight: 750; }
.hp-head small { display: block; font-size: 11.5px; font-weight: 650; color: var(--muted); }
.hp-x { flex: 0 0 auto; width: 34px; height: 34px; margin-inline-end: -6px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
.hp-x:hover { background: var(--panel-3); color: var(--ink); }
.hp-sec h3 { margin: 14px 0 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hp-sec p { margin: 0; }
.hp-steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 5px; }
.hp-steps li::marker { color: var(--accent-solid); font-weight: 750; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent-d); font-weight: 650; text-decoration: none; cursor: pointer; }
:root[data-theme="dark"] .hp-chip { color: var(--ink); }
.hp-chip:hover { border-color: var(--accent-solid); }
.hp-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--ink); font: 700 13.5px var(--font); cursor: pointer; }
.hp-btn:hover { background: var(--panel-3); }
.hp-btn-main { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--accent-on); }
.hp-btn-main:hover { background: var(--accent-d); }
.hp-note { color: var(--muted); }
.hp-pop button:focus-visible, .hp-drawer button:focus-visible, .hp-chip:focus-visible, .hp-flow-a:focus-visible, .hp-pill-x:focus-visible, .hp-q:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-solid) 60%, transparent); outline-offset: 2px; }

.hp-scrim { position: fixed; inset: 0; z-index: calc(var(--hp-z) + 90); background: rgba(20, 12, 6, .42); opacity: 0; transition: opacity .16s; }
.hp-scrim.in { opacity: 1; }
.hp-scrim-d { z-index: calc(var(--hp-z) + 190); background: rgba(20, 12, 6, .3); }

/* ---- "Help for this page": drawer from the inline-end edge (--slide is 100% / -100% in RTL) */
.hp-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: calc(var(--hp-z) + 200); width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--panel); color: var(--ink);
  border-inline-start: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateX(var(--slide)); transition: transform .2s cubic-bezier(.4, 0, .2, 1); outline: 0; }
.hp-drawer.in { transform: none; }
.hp-drawer .hp-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.hp-drawer .hp-body { flex: 1; overflow: auto; padding: 4px 18px 18px; overscroll-behavior: contain; }
.hp-drawer .hp-foot { margin: 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel-2); }
.hp-flow { list-style: none; margin: 0; padding: 0; counter-reset: hpf; display: grid; gap: 0; }
.hp-flow-i { position: relative; counter-increment: hpf; padding: 4px 0 14px; padding-inline-start: 38px; }
.hp-flow-i::before { content: counter(hpf); position: absolute; inset-inline-start: 0; inset-block-start: 4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--panel-3); color: var(--ink); font-weight: 750; font-size: 12.5px; border: 1px solid var(--line); }
.hp-flow-i::after { content: ""; position: absolute; inset-inline-start: 12.5px; inset-block: 34px 0; width: 1px; background: var(--line); }
.hp-flow-i:last-child::after { display: none; }
.hp-flow-i.here::before { background: var(--accent-solid); color: var(--accent-on); border-color: var(--accent-solid); }
.hp-flow-i p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.hp-flow-t { font-weight: 700; }
.hp-flow-a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-d); text-decoration: none; font-weight: 700; min-height: 28px; }
:root[data-theme="dark"] .hp-flow-a { color: var(--accent); }
.hp-flow-a:hover .hp-flow-t { text-decoration: underline; }
.hp-here { margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-d); font-style: normal; font-size: 11px; font-weight: 750; }
:root[data-theme="dark"] .hp-here { color: var(--ink); }

/* ---- phone: bottom sheet + full-screen page help, big touch targets */
@media (max-width: 600px) {
  .hp-q { --hp-d: 22px; font-size: 12.5px; }
  .hp-pop.hp-sheet { inset: auto 0 0 0; width: auto; max-height: 84dvh; border-radius: 22px 22px 0 0; border-inline: 0; border-bottom: 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .14s; opacity: 1; }
  .hp-pop.hp-sheet.in { transform: none; }
  .hp-pop.hp-sheet::before { content: ""; display: block; width: 42px; height: 4px; margin: -6px auto 10px; border-radius: 4px; background: var(--line); }
  .hp-sheet .hp-head h2 { font-size: 18px; }
  .hp-sheet .hp-x, .hp-drawer .hp-x { width: 44px; height: 44px; }
  .hp-sheet .hp-sec { font-size: 15px; }
  .hp-sheet .hp-steps { gap: 8px; }
  .hp-sheet .hp-chips { display: grid; }
  .hp-sheet .hp-chip, .hp-drawer .hp-chip { min-height: 48px; justify-content: space-between; font-size: 15px; }
  .hp-sheet .hp-btn, .hp-drawer .hp-btn { min-height: 48px; flex: 1 1 100%; font-size: 15px; }
  .hp-drawer { inset: 0; width: 100%; border-inline-start: 0; }
  .hp-drawer .hp-flow-a { min-height: 44px; }
  .hp-pill { inset-inline: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); width: auto; }
  .hp-pill-txt small { display: none; }
  /* pages with a sticky action bar above the bottom navigation (online order, MO, lead): the pill sits above it, never over Confirm / Dispatch */
  body:has(.ord-bar, .mrp-bar, .crm-mbar) .hp-pill { bottom: calc(var(--bn-h) + 84px); }
}
/* ---- touch tablets (601 to 900 px): the control popover is a bottom sheet here too, centred and capped (the page help stays a side drawer) */
@media (min-width: 601px) and (max-width: 900px) and (pointer: coarse) {
  .hp-q { --hp-d: 22px; font-size: 12.5px; }
  .hp-pop.hp-sheet { inset: auto 0 0 0; width: auto; max-width: 640px; margin-inline: auto; max-height: 80dvh; border-radius: 22px 22px 0 0; border-bottom: 0; padding: 16px 22px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .14s; opacity: 1; }
  .hp-pop.hp-sheet.in { transform: none; }
  .hp-pop.hp-sheet::before { content: ""; display: block; width: 42px; height: 4px; margin: -6px auto 10px; border-radius: 4px; background: var(--line); }
  .hp-sheet .hp-x, .hp-drawer .hp-x { width: 44px; height: 44px; }
  .hp-sheet .hp-chip, .hp-drawer .hp-chip { min-height: 48px; }
  .hp-sheet .hp-btn, .hp-drawer .hp-btn { min-height: 48px; }
  .hp-drawer .hp-flow-a { min-height: 44px; }
  .hp-pill { bottom: calc(74px + env(safe-area-inset-bottom)); }
  body:has(.ord-bar, .mrp-bar, .crm-mbar) .hp-pill { bottom: calc(var(--bn-h) + 84px); }
}
@media (prefers-reduced-motion: reduce) { .hp-pop, .hp-drawer, .hp-scrim { transition: none; } }