/* wtpp-help.css — v3.7.525
 * Styles for the Help popover (navigation tips + toolbar icon key). The shared
 * .wtpp-header-popover frame supplies the border / background / padding; these
 * rules style the button hook and the popover contents only. Token-only colours.
 */

.wtpp-help-icon-btn { position: relative; }

.wtpp-help-popover {
  width: 320px;
  max-width: calc(100vw - 24px);
  /* v3.7.630: cap at the Site menu window's height (~580px), the shared
     main-menu cap, then scroll. Was calc(100vh - 120px), which let the Help
     menu grow well past the cap on tall screens. */
  max-height: min(580px, calc(100vh - 120px));
  overflow-y: auto;
}

.wtpp-help-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin: 0 -14px 4px; padding: 0 14px 6px;
  position: sticky; top: -14px; z-index: 3;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.wtpp-help-tts-btn {
  flex: 0 0 auto; padding: 2px; margin: -1px -2px 0 0;
  line-height: 0; color: var(--ink-soft); cursor: pointer;
}
.wtpp-help-tts-btn svg { width: 16px; height: 16px; display: block; }
.wtpp-help-tts-btn:hover { color: var(--red); }
.wtpp-help-panel-title {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-family: 'Inconsolata', 'Courier New', monospace;
  margin: 2px 0 0;
}
.wtpp-help-panel-title::after {
  content: ""; display: block; width: 26px; height: 2px; margin-top: 6px;
  background: var(--red);
}

.wtpp-help-section { margin-top: 12px; }
.wtpp-help-subhead {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: 'Inconsolata', 'Courier New', monospace;
  margin: 0 0 7px;
}

.wtpp-help-tips { margin: 0; padding: 0 0 0 17px; list-style: disc; }
.wtpp-help-tips li {
  font-size: 12px; line-height: 1.45; color: var(--ink);
  margin: 0 0 6px;
}
.wtpp-help-tips li:last-child { margin-bottom: 0; }

.wtpp-help-key { margin: 0; padding: 0; list-style: none; }
.wtpp-help-key-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--rule);
}
.wtpp-help-key-row:last-child { border-bottom: 0; }
.wtpp-help-key-icon {
  flex: 0 0 auto; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); margin-top: 1px;
}
.wtpp-help-key-icon svg { width: 18px; height: 18px; display: block; }
.wtpp-help-key-text {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.wtpp-help-key-name {
  font-size: 12px; font-weight: 700; color: var(--ink);
  font-family: 'Inconsolata', 'Courier New', monospace;
}
.wtpp-help-key-desc { font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
/* ===== v3.7.608 first-visit welcome coachmark (tokenized) ===== */
.wtpp-coachmark{position:fixed;z-index:80;max-width:268px;background:var(--paper-shade);color:var(--ink);
  border:2px solid var(--ink-muted);border-radius:8px;padding:14px 16px 12px;
  box-shadow:0 8px 30px var(--ov-black-25);
  font-family:Georgia,serif;font-size:13.5px;line-height:1.5;}
.wtpp-coachmark::before{content:"";position:absolute;top:-9px;width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid var(--ink-muted);}
/* v3.7.618: dim + blur the page behind a focused coachmark so the tip stands
   out. Token-only colour (CSS-debt ratchet); the coachmark itself (z-index 80)
   sits above this layer (z-index 79). Swallows clicks so the page can't be
   interacted with mid-tour — the tour is driven by its Skip / Next / close
   controls. */
.wtpp-coachmark-backdrop{position:fixed;inset:0;z-index:79;background:var(--ov-black-25);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.wtpp-coachmark::after{content:"";position:absolute;top:-8px;width:0;height:0;
  border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid var(--paper-shade);}
.wtpp-coachmark[data-arrow="left"]::before,.wtpp-coachmark[data-arrow="left"]::after{left:20px;}
.wtpp-coachmark[data-arrow="right"]::before,.wtpp-coachmark[data-arrow="right"]::after{right:20px;}
.wtpp-coachmark-h{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red);font-weight:700;margin-bottom:5px;}
.wtpp-coachmark-body{margin:0 14px 0 0;}
.wtpp-coachmark-x{position:absolute;top:7px;right:9px;appearance:none;border:none;background:transparent;
  color:var(--ink-muted);cursor:pointer;font-size:17px;line-height:1;padding:2px;}
.wtpp-coachmark-x:hover{color:var(--ink);}
.wtpp-coachmark-dismiss{display:flex;align-items:center;gap:7px;margin-top:10px;background:transparent;border:none;
  color:var(--ink-muted);text-decoration:none;cursor:pointer;font-family:var(--mono);font-size:11px;
  letter-spacing:.03em;padding:0;user-select:none;}
.wtpp-coachmark-dismiss:hover{color:var(--ink);}
.wtpp-coachmark-dismiss-cb{width:14px;height:14px;margin:0;cursor:pointer;accent-color:var(--red);flex:none;}
@media (max-width:480px){.wtpp-coachmark{max-width:min(86vw,268px);}}
/* ===== v3.7.610 guided-tour additions ===== */
.wtpp-coachmark-step{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:4px;}
.wtpp-coachmark-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;}
.wtpp-coachmark-next{appearance:none;border:1px solid var(--red);background:transparent;color:var(--red);cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:6px 14px;border-radius:4px;}
.wtpp-coachmark-next:hover{background:var(--paper-shade);}
.wtpp-coachmark-skip{appearance:none;border:1px solid var(--rule);background:transparent;color:var(--ink-muted);cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-decoration:none;padding:6px 14px;border-radius:4px;}
.wtpp-coachmark-skip:hover{color:var(--ink);border-color:var(--ink-muted);}