/* Help: the pill, the "Need a hand?" panel, the bubble, the submit walk's check-ins, the ticket pages and the desk Tickets
   tab. From MacPip's public/style.css (.sp-launch to .sp-cols), walk.css (.wk-help) and rtl.css, in iPip's kit colours
   (public/cleanup.css), so night and CRT follow on their own. site.css has older .sp-form, .sp-err and .sp-note rules
   for the pricing page: every rule here is scoped so neither side changes the other. */
:root{--sp-shadow:3px 3px 0 var(--ink)}

/* ---- the pill: Pip as a little phone, smiling, and the word Help ---- */
.sp-launch{position:fixed;z-index:56;right:18px;bottom:18px;display:flex;align-items:center;gap:8px;height:44px;padding-block:0;padding-inline:9px 17px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:14.5px/1 var(--sans);white-space:nowrap;box-shadow:var(--sp-shadow);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .2s}
@media (hover:hover){.sp-launch:hover{transform:translateY(-2px)}}
.sp-launch.on{transform:translateY(1px);box-shadow:0 3px 10px rgba(29,27,23,.18)}
.sp-launch:focus-visible{outline:0;box-shadow:var(--focus),var(--sp-shadow)}
.sp-launch .sp-ph{width:19px;height:26px}
.sp-tip{display:inline}
.sp-ph{display:block;shape-rendering:crispEdges;flex:none}
.sp-phbody{fill:var(--box);stroke:var(--ink);stroke-width:1.1}
.sp-phscr{fill:var(--paper);stroke:var(--ink);stroke-width:.8}
.sp-phisl,.sp-phface{fill:var(--ink)}
/* Moved into the walk's top bar (public/submit.js adds wk-help): a plain inline pill, nothing fixed, nothing floating. */
.sp-launch.wk-help{position:static;inset:auto;z-index:auto;flex:none;width:auto;height:28px;gap:5px;padding:0 9px 0 6px;border-width:1.5px;border-radius:7px;box-shadow:none;font:12.5px/1 var(--sans);color:var(--ink);transform:none;opacity:1;pointer-events:auto}
.sp-launch.wk-help .sp-ph{width:12px;height:17px}
.sp-launch.wk-help.on{background:var(--box)}
body:has(.sp-launch.wk-help) .sp-panel{top:auto;bottom:16px;right:16px;left:auto}

/* ---- the bubble ---- */
.sp-bub{position:fixed;z-index:57;width:272px;max-width:calc(100vw - 24px);padding-block:14px;padding-inline:16px 34px;border:1.5px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:var(--sp-shadow)}
.sp-btail{position:absolute;bottom:-8px;width:13px;height:13px;background:var(--paper);border:1.5px solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.sp-bub.down .sp-btail{bottom:auto;top:-8px;border-width:1.5px 0 0 1.5px}
.sp-bline{margin:0;font:400 20px/1.15 var(--serif)}
.sp-bacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.sp-blater{border:0;background:none;padding:4px 0;color:var(--mute);font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sp-bx{position:absolute;top:6px;inset-inline-end:6px;width:26px;height:26px;padding:0;border:0;background:none;color:var(--mute);font:17px/1 var(--sans);cursor:pointer}
@keyframes spbin{from{opacity:0;transform:translateY(8px) scale(.92)}}
@keyframes spbind{from{opacity:0;transform:translateY(-8px) scale(.92)}}
@keyframes spbout{to{opacity:0;transform:translateY(8px) scale(.6)}}
@keyframes spboutd{to{opacity:0;transform:translateY(-8px) scale(.6)}}
@keyframes sppin{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:no-preference){.sp-bub{animation:spbin .32s var(--spring)}.sp-bub.out{animation:spbout .24s var(--ease) forwards}.sp-bub.down{animation-name:spbind}.sp-bub.down.out{animation-name:spboutd}}
body:has(.sp-panel:not([hidden])) .sp-bub{display:none}

/* ---- the panel ---- */
.sp-panel{position:fixed;z-index:96;right:18px;bottom:78px;width:330px;max-height:min(620px,calc(100dvh - 100px));display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:9px;box-shadow:4px 4px 0 var(--ink);overflow:hidden;font:14px/1.45 var(--sans)}
.sp-panel[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.sp-panel{animation:sppin .2s var(--ease)}}
.sp-tbar{position:relative;flex:none;height:24px;display:flex;align-items:center;justify-content:center;border-bottom:1.5px solid var(--ink);background:var(--stripes)}
.sp-tbar span{background:var(--paper);padding:0 8px;border-radius:3px;font:10px var(--pixel)}
.sp-close{position:absolute;inset-inline-start:8px;top:0;bottom:0;margin:auto;width:13px;height:13px;padding:0;background:var(--paper);border:1.5px solid var(--ink);cursor:pointer}
.sp-close::after{content:"";position:absolute;inset:-12px}
@media (pointer:coarse){.sp-close::after{inset:-16px}.sp-bx::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}}
.sp-pbody{padding:14px;overflow:auto;overscroll-behavior:contain}
.sp-panel .sp-h,.sp-page .sp-h{font:400 24px/1.1 var(--serif);margin:0 0 4px;outline:0}
.sp-sub{margin:0 0 12px;color:var(--mute);font-size:13px}
.sp-topics,.sp-list{display:flex;flex-direction:column;gap:6px}
.sp-topics button,.sp-list button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:start;padding:8px 10px;border:1.5px solid var(--ink);border-radius:7px;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}
.sp-topics button:hover,.sp-list button:hover{background:var(--box)}
.sp-topics b,.sp-list b{font-weight:normal;font-size:13.5px}
.sp-topics small,.sp-list small{color:var(--mute);font-size:11.5px;overflow-wrap:anywhere}
.sp-list em{font-style:normal;font-size:11.5px;color:var(--b)}
.sp-mine{display:flex;align-items:center;gap:8px;width:100%;margin-top:12px;padding:9px 10px;border:1.5px dashed var(--ink);border-radius:7px;background:none;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.sp-mine span{padding:0 6px;border-radius:9px;background:var(--ink);color:var(--paper);font-size:11px}
.sp-mine em{margin-inline-start:auto;font-style:normal;font-size:11.5px;color:var(--b)}
.sp-back{background:none;border:0;padding:0;margin-bottom:8px;font:inherit;font-size:12.5px;color:var(--mute);cursor:pointer}
.sp-panel .sp-form{display:block}
.sp-field{display:block;margin:10px 0}
.sp-field span{display:block;font-size:12.5px;margin-bottom:4px}
.sp-field textarea,.sp-field input{box-sizing:border-box;width:100%;padding:8px 10px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);font:16px/1.4 var(--sans);resize:vertical}
.sp-field input{height:42px}
.sp-field :is(textarea,input):focus{outline:0;box-shadow:var(--focus)}
.sp-att{font:10px var(--pixel);color:var(--mute);margin:8px 0 5px}
.sp-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.sp-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding-block:2px;padding-inline:8px 4px;border:1px solid var(--line);border-radius:12px;background:var(--box);font-size:11.5px;overflow-wrap:anywhere}
.sp-chip button{border:0;background:none;padding:0 4px;color:var(--mute);font-size:14px;line-height:1;cursor:pointer}
.sp-panel .sp-err{color:var(--r);font-size:13px;font-weight:normal;margin:0 0 10px}
.sp-send{width:100%}
.sp-fine{font-size:11.5px;color:var(--mute);margin:8px 0 0}
.sp-sent{text-align:center;padding:6px 0}
.sp-sent .sp-ph{width:42px;height:59px;margin:0 auto 10px}
.sp-sent p{font-size:13px;color:var(--mute)}
.sp-all{display:block;margin-top:10px;font-size:12.5px;color:var(--ink);text-decoration:underline}
.sp-pill{display:inline-block;padding:1px 7px;border:1px solid currentColor;border-radius:9px;font:9.5px/1.6 var(--pixel);vertical-align:middle;white-space:nowrap}
.sp-pill.open{color:#8a4b00;background:#fff1d6}.sp-pill.answered{color:#1d5fa6;background:#e2efff}.sp-pill.solved{color:#2f6f3f;background:#e3f3e6}
:root[data-theme=dark] .sp-pill.open{color:#f0b24a;background:#2b230c}:root[data-theme=dark] .sp-pill.answered{color:#97b6f6;background:#1b2127}:root[data-theme=dark] .sp-pill.solved{color:#8fc297;background:#1c2418}
:root[data-theme=crt] .sp-pill{color:var(--ink);background:var(--box)}
.sp-msgs{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.sp-msg{max-width:88%;padding:7px 10px;border:1.5px solid var(--ink);border-radius:9px}
.sp-msg p{margin:2px 0 0;font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.sp-msg small{font-size:11px;color:var(--mute)}
.sp-msg.you{align-self:flex-end;background:var(--box)}
.sp-msg.us{align-self:flex-start;background:var(--paper);border-inline-start:5px solid var(--g)}
.sp-btns{display:flex;gap:6px;flex-wrap:wrap}

/* ---- where the pill sits: MacPip's corners, above iPip's phone tab bar ---- */
@media (max-width:1199px){.sp-launch{right:auto;left:max(12px,env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom))}.sp-panel{right:auto;left:max(12px,env(safe-area-inset-left));bottom:calc(70px + env(safe-area-inset-bottom))}}
@media (max-width:760px){.sp-launch{bottom:calc(76px + env(safe-area-inset-bottom))}.sp-panel{bottom:calc(134px + env(safe-area-inset-bottom))}}
@media (max-width:640px){
  .sp-launch{height:40px;padding-inline:8px 14px;font-size:14px}.sp-launch .sp-ph{width:17px;height:24px}
  .sp-panel{left:0!important;right:0!important;bottom:var(--sp-kb,0px)!important;top:auto!important;width:auto;max-height:82dvh;max-height:min(82dvh,calc(var(--sp-vh,100dvh) - 12px));border-width:1.5px 0 0;border-radius:14px 14px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  body>.sp-launch.sp-away{transform:translateY(calc(100% + 90px + env(safe-area-inset-bottom)));opacity:0;pointer-events:none;transition:transform .25s var(--ease),opacity .2s}
  .sp-launch.wk-help .sp-tip{display:none}.sp-launch.wk-help{padding:0 6px}
}
@media (pointer:coarse){.sp-launch:not(.wk-help)::after{content:"";position:absolute;inset:-2px 0}.sp-launch.wk-help{min-height:32px}}
html[dir=rtl] .sp-launch:not(.wk-help){left:18px;right:auto}
html[dir=rtl] .sp-panel{left:18px;right:auto}
@media (max-width:1199px){html[dir=rtl] .sp-launch:not(.wk-help){right:max(12px,env(safe-area-inset-right));left:auto}html[dir=rtl] .sp-panel{right:max(12px,env(safe-area-inset-right));left:auto}}
html[dir=rtl] body:has(.sp-launch.wk-help) .sp-panel{right:auto;left:16px}
@media print{.sp-launch,.sp-panel,.sp-bub,.ck-card{display:none}}

/* ---- the walk's check-ins ---- */
.ck-card{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;margin:12px 0;padding:10px 12px;border:1.5px solid var(--ink);border-radius:9px;background:var(--cream);color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.ck-card{animation:sppin .25s var(--ease)}}
.ck-ph .sp-ph{width:22px;height:31px}
.ck-line{margin:0;font:400 19px/1.2 var(--serif)}
.ck-btns{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ck-x{margin-inline-start:auto;border:0;background:none;padding:4px;color:var(--mute);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer}
.ck-thanks{grid-column:1/-1;margin:0;font-size:13.5px;color:var(--mute)}

/* ---- the ticket pages: /support/<token>, /support/confirm/<code>, /maker/support ---- */
.sp-page{padding-top:28px;padding-bottom:48px}
.sp-body{padding:20px}
.sp-body p{margin:8px 0}
.sp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sp-thread{padding:14px 0;border-top:1px solid var(--line);scroll-margin-top:90px}
.sp-thread:target{background:color-mix(in srgb,var(--y) 12%,transparent);border-radius:8px;padding-inline:10px}
.sp-th{font:400 22px/1.15 var(--serif);margin:0}
.sp-meta{color:var(--mute);font-size:12.5px;margin:4px 0 0}
.sp-reply textarea{min-height:64px}
.sp-page .sp-note,.sp-desk .sp-note{margin:10px 0;padding:8px 12px;border:1.5px solid var(--ink);border-inline-start:5px solid var(--g);border-radius:7px;background:var(--paper);color:var(--ink);font-size:13.5px}
.sp-page .sp-note.bad{border-inline-start-color:var(--r)}
.sp-empty{padding:12px 0}

/* ---- the desk's Tickets tab ---- */
.sp-filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.sp-filters a[aria-current]{background:var(--ink);color:var(--paper)}
.sp-cols{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px}
.sp-inbox{display:flex;flex-direction:column;gap:6px;max-height:70vh;max-height:70dvh;overflow:auto}
.sp-in{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:1.5px solid var(--ink);border-radius:7px;background:var(--paper);color:var(--ink);text-decoration:none}
.sp-in b{font-weight:normal;font-size:13.5px}.sp-in.new b{font-weight:bold}
.sp-in small{color:var(--mute);font-size:11.5px;overflow-wrap:anywhere}
.sp-in.on{background:var(--box);box-shadow:3px 3px 0 var(--box2)}
.sp-pend{margin-bottom:8px}.sp-pend summary{cursor:pointer;font-size:13px}.sp-pend .sp-in{margin-top:6px}
.sp-dhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sp-dhead h2{font:400 26px/1.1 var(--serif);margin:0}
.sp-dhead form{margin:0}
.sp-facts{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.sp-facts span{padding:2px 8px;border-radius:10px;background:var(--box);font-size:12px;overflow-wrap:anywhere}
.sp-facts .bad{color:var(--r)}
.sp-desk .sp-reply{display:grid;gap:10px}
.sp-c{display:flex;align-items:center;gap:6px;font-size:13px}
.sp-state{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px}
.sp-state select{height:32px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);font:13px var(--sans)}
@media (max-width:760px){.sp-cols{grid-template-columns:1fr}.sp-inbox{max-height:none}}