/* Help (help.js): the button at the bottom right and its panel. help.js adds this file to every page it runs on. */
.help-bubble { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px 11px 13px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--dark); color: #fff; box-shadow: 0 6px 22px rgba(20, 35, 33, .28);
  font-family: var(--f7, var(--font)); font-size: calc(15px * var(--s7, 1)); font-weight: calc(700 + var(--w7, 0)); }
.help-bubble:hover, .help-bubble.on { background: var(--accent-2, var(--accent)); }
.help-bubble { transition: transform .2s ease, opacity .2s ease; }
.help-bubble.away { opacity: 0; transform: translateY(80px); pointer-events: none; }
.help-panel { position: fixed; right: 18px; bottom: 78px; z-index: 61; width: min(420px, calc(100vw - 36px)); height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column;
  background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 50px rgba(20, 35, 33, .3); overflow: hidden;
  font-family: var(--f4, var(--font)); font-size: calc(15.5px * var(--s4, 1)); line-height: 1.5; }
.help-panel[hidden] { display: none; }
.hp-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; background: var(--light); }
.hp-head h2 { margin: 0; flex: 1; font-family: var(--f2, var(--font)); font-size: calc(19px * var(--s2, 1)); color: var(--dark); }
.hp-head button { border: 0; background: none; cursor: pointer; color: var(--dark); font-family: var(--f7, var(--font)); font-size: calc(14px * var(--s7, 1)); font-weight: 700; }
.hp-manu-btn { text-decoration: underline; }
.hp-close { font-size: 26px !important; line-height: 1; padding: 0 4px; }
.hp-body { flex: 1; overflow-y: auto; padding: 14px 18px; display: grid; align-content: start; gap: 8px; }
.hp-body p { margin: 0; }
.hp-body h3 { margin: 6px 0 0; font-family: var(--f5, var(--font)); font-size: calc(13px * var(--s5, 1)); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.hp-intro { color: var(--c5, var(--muted)); }
.hp-step { background: var(--light); border-radius: 10px; padding: 6px 10px; color: var(--dark); }
.hp-q { border-bottom: 1px solid var(--line); padding: 6px 0; }
.hp-q summary { cursor: pointer; font-weight: 700; color: var(--dark); }
.hp-q p { margin: 6px 0 2px; }
.hp-msgs { display: grid; gap: 8px; }
.hp-msg { border-radius: 14px; padding: 9px 12px; max-width: 92%; overflow-wrap: anywhere; }
.hp-msg p + p { margin-top: 6px; }
.hp-msg.me { background: var(--dark); color: #fff; justify-self: end; }
.hp-msg.bot { background: var(--bg); border: 1px solid var(--light); }
.hp-msg.note, .hp-msg.typing { color: var(--c5, var(--muted)); font-style: italic; background: none; }
.hp-foot { border-top: 1px solid var(--light); padding: 10px 12px 10px; display: grid; gap: 6px; }
.hp-foot:empty { display: none; }
.hp-ask { display: flex; align-items: flex-end; gap: 8px; }
.hp-ask textarea, .hp-manu-text { flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; resize: none; color: var(--text);
  font-family: var(--f4, var(--font)); font-size: calc(15.5px * var(--s4, 1)); }
.hp-manu-text { width: 100%; resize: vertical; }
.hp-att { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: 12px; color: var(--dark); cursor: pointer; }
.hp-foot-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--f5, var(--font)); font-size: calc(13.5px * var(--s5, 1)); color: var(--c5, var(--muted)); }
.hp-foot-row button:not(.btn) { border: 0; background: none; cursor: pointer; color: var(--dark); text-decoration: underline; font: inherit; padding: 0; }
.hp-send-manu { font-weight: 700 !important; }
.hp-shot { flex: 1 1 100%; }
.hp-shot summary { cursor: pointer; }
.hp-shot p { margin: 4px 0 0; }
.hp-grow { flex: 1; }
.hp-pics { display: flex; gap: 6px; flex-wrap: wrap; }
.hp-pics:empty { display: none; }
.hp-pic { position: relative; }
.hp-pic img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.hp-pic button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--dark); color: #fff; cursor: pointer; line-height: 18px; padding: 0; }
.hp-thanks { color: var(--dark); font-weight: 700; padding: 20px 0; }
@media (max-width: 560px) {
  .help-bubble { right: 12px; bottom: 12px; padding: 12px; }
  .help-bubble span { display: none; }
  .help-panel { right: 0; left: 0; bottom: 0; top: 0; width: auto; height: auto; border-radius: 0; border: 0; }
  html.help-open .help-bubble { display: none; }
}
@media print { .help-bubble, .help-panel { display: none !important; } }

.hp-btn { border: 1.5px solid var(--accent); background: var(--accent); color: #fff; border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font-family: var(--f7, var(--font)); font-size: calc(14.5px * var(--s7, 1)); font-weight: calc(700 + var(--w7, 0)); }
.hp-btn:hover { background: var(--accent-2, var(--accent)); border-color: var(--accent-2, var(--accent)); }
.hp-btn.ghost { background: #fff; color: var(--dark); border-color: var(--dark); }
.hp-btn.ghost:hover { background: var(--light); }
.hp-btn:disabled { opacity: .6; cursor: progress; }
.hp-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp-lead { background: var(--light); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; color: var(--text);
  font-family: var(--f4, var(--font)); font-size: calc(16px * var(--s4, 1)); line-height: 1.45; }
.hp-lead strong { color: var(--dark); }
.hp-lead-manu { border: 0; background: none; padding: 0; cursor: pointer; color: var(--accent-2, var(--accent)); text-decoration: underline; font: inherit; font-weight: 700; }