/* Help button and ticket form. Self-contained so it looks right on the marketing pages, the dashboard and the board app. */
:root { --hp-ink: #1d1d1f; --hp-ink2: #515158; --hp-paper: #fff; --hp-field: #f3f3f6; --hp-line: rgba(20,20,40,.1); --hp-accent: #5b4bff; --hp-bad: #c8262d; --hp-btn: #1d1d1f; --hp-btn-ink: #fff; --hp-primary-ink: #fff; --hp-danger-ink: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hp-ink: #f5f8fc; --hp-ink2: #b9c3d2; --hp-paper: #141b25; --hp-field: #1f2833; --hp-line: rgba(196,214,240,.16); --hp-accent: #c3baff; --hp-bad: #ff7b81; --hp-btn: #f5f8fc; --hp-btn-ink: #0b0f15; --hp-primary-ink: #0b0f15; --hp-danger-ink: #0b0f15; } }
:root[data-theme="dark"] { --hp-ink: #f5f8fc; --hp-ink2: #b9c3d2; --hp-paper: #141b25; --hp-field: #1f2833; --hp-line: rgba(196,214,240,.16); --hp-accent: #c3baff; --hp-bad: #ff7b81; --hp-btn: #f5f8fc; --hp-btn-ink: #0b0f15; --hp-primary-ink: #0b0f15; --hp-danger-ink: #0b0f15; }

.hp-open { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--hp-btn); color: var(--hp-btn-ink); font: 600 14.5px/1 var(--font, system-ui, sans-serif); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 28px -10px rgba(0,0,0,.45); transition: transform .15s, box-shadow .15s; }
.hp-open:hover { transform: translateY(-2px); }
.hp-open:focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 3px; }
@media (max-width: 560px) { .hp-open { padding: 0 14px; } .hp-open span { display: none; } .hp-open { width: 48px; height: 48px; padding: 0; justify-content: center; } }
@media print { .hp-open { display: none; } }

.hp-dlg { width: min(480px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 0; border: 0; border-radius: 26px; background: var(--hp-paper); color: var(--hp-ink); box-shadow: 0 0 0 1px var(--hp-line), 0 40px 80px -30px rgba(0,0,0,.55); overflow: auto; font: 400 15px/1.45 var(--font, system-ui, sans-serif); }
.hp-dlg::backdrop { background: rgba(10,10,20,.5); backdrop-filter: blur(6px); }
.hp-form { position: relative; display: grid; gap: 14px; padding: 26px 26px 24px; }
.hp-form h2 { margin: 0 44px 0 0; font-size: 22px; letter-spacing: -.02em; }
.hp-lede, .hp-who, .hp-hint { margin: 0; color: var(--hp-ink2); font-size: 14.5px; }
.hp-who { padding: 10px 12px; border-radius: 12px; background: var(--hp-field); }
.hp-hint { font-size: 13.5px; }
.hp-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--hp-field); color: var(--hp-ink2); cursor: pointer; }
.hp-x:hover { color: var(--hp-ink); } .hp-x:focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 2px; }
.hp-field { display: grid; gap: 6px; } .hp-field > span { font-size: 13.5px; font-weight: 600; color: var(--hp-ink2); }
.hp-input { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1.5px solid transparent; border-radius: 14px; background: var(--hp-field); color: var(--hp-ink); font: inherit; resize: vertical; }
.hp-input:focus { outline: 0; border-color: var(--hp-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hp-accent) 18%, transparent); }
.hp-input[readonly] { opacity: .75; }
.hp-msg { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; } .hp-err { background: color-mix(in srgb, var(--hp-bad) 13%, transparent); color: var(--hp-bad); }
.hp-btns { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.hp-btn { height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--hp-field); color: var(--hp-ink); font: 600 14.5px/1 inherit; font-family: inherit; cursor: pointer; }
.hp-primary { background: var(--hp-accent); color: var(--hp-primary-ink); } .hp-danger { background: var(--hp-bad); color: var(--hp-danger-ink); }
.hp-btn:disabled { opacity: .6; cursor: default; } .hp-btn:focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 2px; }
.hp-discard { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--hp-field); font-weight: 600; }
/* On the board the bottom-right corner belongs to the zoom and tile tools, so the
   Help launcher moves to the opposite corner instead of covering them. */
.hp-open.on-board { left: max(16px, env(safe-area-inset-left)); right: auto; bottom: max(88px, calc(76px + env(safe-area-inset-bottom))); width: 44px; padding: 0; justify-content: center; }
.hp-open.on-board span { display: none; }