/* Help & feedback: the launcher, the side panel (public/help.js) and the /help page. Colours from public/app.css. */
.help-launch{position:fixed;right:24px;bottom:24px;z-index:40;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--espresso);color:var(--cream);font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 6px 18px rgba(62,52,43,.28);border:2px solid var(--paper)}
.help-launch:hover{background:#2c241d}
.help-launch:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
body.help-open .help-launch{right:432px}

.help-panel{position:fixed;top:0;right:0;bottom:0;z-index:50;width:408px;max-width:100vw;display:flex;flex-direction:column;
  background:var(--paper);border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(62,52,43,.14)}
.help-panel[hidden],.help-panel [hidden]{display:none!important}
.hp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 14px;border-bottom:1px solid var(--line)}
.hp-head .eb{text-transform:none;letter-spacing:.06em;font-size:12px}
.hp-title{font-size:22px;margin-top:2px}
.hp-x{background:none;border:0;font-size:26px;line-height:1;color:var(--brown);cursor:pointer;padding:2px 6px;border-radius:6px}
.hp-x:hover{background:var(--sand)}
.hp-tabs{display:flex;gap:6px;padding:12px 22px 0}
.hp-tab{flex:1;background:transparent;border:1px solid var(--line);border-radius:20px;padding:8px 10px;font:600 11px var(--sans);letter-spacing:.06em;color:var(--brown);cursor:pointer}
.hp-tab.on{background:var(--espresso);border-color:var(--espresso);color:var(--cream)}
.hp-note{margin:12px 22px 0;padding:10px 12px;border-left:3px solid var(--bad);background:var(--white);border-radius:0 8px 8px 0;font-size:13px}
.hp-ask,.hp-team{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 22px 18px}
.hp-team{gap:12px}
.hp-team .muted{font-size:13px;margin:0}
.hp-empty{font-size:14px;color:var(--brown)}
.hp-ideas{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:4px}
.hp-idea{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:7px 12px;font:13px var(--sans);color:var(--espresso);cursor:pointer;text-align:left}
.hp-idea:hover{border-color:var(--taupe)}
.hp-log{list-style:none;margin:0;padding:0 2px 8px 0;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.hp-compose{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.hp-input{width:100%;min-height:72px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--espresso);font:14px/1.5 var(--sans);resize:vertical}
.hp-team .hp-input{min-height:150px}
.hp-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.hp-row .btn{margin-left:auto}
.hp-left{font-size:12px}
.hp-link{background:none;border:0;padding:0;font:600 12px var(--sans);color:var(--brown);text-decoration:underline;cursor:pointer}
.hp-fine{font-size:11px;color:var(--taupe);margin:10px 0 0}
.hp-check{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px;margin:0}
.hp-sent{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:0 10px 10px 0;padding:16px 18px;font-size:14px}
.hp-sent strong{display:block;font-size:16px;margin-bottom:6px}

/* messages (panel and /help page) */
.hm{max-width:88%;font-size:14px;line-height:1.5}
.hm-body{white-space:pre-wrap;overflow-wrap:anywhere;padding:10px 14px;border-radius:14px}
.hm.user{align-self:flex-end}
.hm.user .hm-body{background:var(--espresso);color:var(--cream);border-bottom-right-radius:4px}
.hm.assistant{align-self:flex-start}
.hm.assistant .hm-body{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:4px}
.hm.wait .hm-body{color:var(--taupe);font-style:italic}
.hm.note{align-self:center;max-width:100%}
.hm.note .hm-body{font-size:12px;color:var(--brown);padding:4px 10px;background:transparent}
.hm-rate{display:flex;gap:4px;margin-top:4px}
.hm-thumb{background:transparent;border:1px solid transparent;border-radius:14px;padding:2px 8px;font-size:14px;cursor:pointer;opacity:.7;filter:grayscale(1)}
.hm-thumb:hover{opacity:1;border-color:var(--line)}
.hm-thumb.on{opacity:1;filter:none;border-color:var(--taupe);background:var(--white)}
.hm-offer{font-size:12px;color:var(--brown);margin-top:6px}

/* the /help page without JavaScript */
.help-page .help-log{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:12px}
.help-page .hm-rate{display:flex}
.help-new{margin-top:12px}
label.check{display:flex;align-items:center;gap:8px;font-weight:500;margin-bottom:14px}

/* the Admin card */
.ha-list{list-style:none;margin:0 0 18px;padding:0}
.ha-item{padding:14px 0;border-bottom:1px solid var(--line)}
.ha-item.done{opacity:.7}
.ha-head{font-size:13px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ha-msg,.ha-q{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;margin:8px 0}
.ha-q .eb,.ha-msg .eb{display:block;margin-bottom:2px}
.ha-meta{font-size:12px;margin:0 0 8px}
.ha-chat summary{cursor:pointer;font-size:13px;color:var(--brown);margin-bottom:6px}
.help-admin h3{margin:18px 0 4px}

/* the Admin card "Where people get stuck" (src/stuck.ts) */
.st-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 16px;font-size:13px}
.st-filter label{margin:0;font-weight:600}
.st-filter select{width:auto;padding:6px 10px;font-size:13px}
.st-clear{font-size:13px;color:var(--brown)}
.st-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px}
.st-list{list-style:none;margin:0 0 12px;padding:0}
.st-list>li{padding:12px 0;border-bottom:1px solid var(--line)}
.st-event.done{opacity:.65}
.st-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.st-where{font-size:12px;margin-top:4px}
.st-where a{color:var(--brown)}
.st-detail{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;margin:6px 0 0}
.st-sig{font-size:10px}
.st-sig.question{background:var(--sand)}
.st-sig.long_pause{background:transparent;border:1px dashed var(--taupe);color:var(--brown)}
.st-sig.repeated_change{background:var(--warn);color:#fff}
.st-sig.thumbs_down{background:var(--bad);color:#fff}
.st-rv{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--brown)}
.st-rv.unrev{color:var(--taupe);font-weight:500}
.st-review{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.st-review select,.st-review input[type=text]{width:auto;padding:5px 8px;font-size:12px;border-radius:6px}
.st-review input[type=text]{flex:1;min-width:120px}
.st-pages th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);font-weight:600;padding-bottom:6px}
.st-pages td:first-child{width:auto}