/* Send feedback (js/feedback.js): the testers' pink Feedback button, the "point at it" pin and its form, the Skip drawer,
   the toast and "What you've sent". Loaded on every page a tester visits, so it brings its own colours and the pixel
   digits instead of leaning on a page's stylesheet. Small labels are Press Start 2P at 8 px or more (the pixel C call). */
@font-face{font-family:'Px Digits';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/press-start-2p-400.woff2) format('woff2');unicode-range:U+0030-0039;size-adjust:72%}
:root{--fb-teal:#0d5f55;--fb-teal-dark:#083c36;--fb-pink:#ff5fa8;--fb-pink-ink:#c9347d;--fb-plum:#7a1f4a;--fb-coin:#ffd23f;--fb-paper:#fbf6ea;
  --fb-text:#26322f;--fb-muted:#5a625c;--fb-line:#e6dcc4;--fb-pxf:'Px Digits','Pixelify Sans',monospace;--fb-ps:'Press Start 2P',monospace;
  --fb-rim:0 -3px 0 0 var(--fb-teal-dark),0 3px 0 0 var(--fb-teal-dark),-3px 0 0 0 var(--fb-teal-dark),3px 0 0 0 var(--fb-teal-dark)}
.fb-btn,.fb-ui,.fb-ui *{box-sizing:border-box;font-variant-ligatures:none}
.fb-ico{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.fb-ui :focus-visible,.fb-btn:focus-visible{outline:3px dashed var(--fb-teal-dark);outline-offset:4px}

/* the button: bottom right (the pause button and the dashboard's bell own the bottom left) */
.fb-btn{all:unset;box-sizing:border-box;position:fixed;right:calc(22px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:1000;
  display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 16px;cursor:pointer;font:400 10px/1.4 var(--fb-ps);text-transform:uppercase;
  background:var(--fb-pink);color:#fff;text-shadow:2px 2px 0 var(--fb-plum);
  box-shadow:0 -3px 0 0 var(--fb-plum),0 3px 0 0 var(--fb-plum),-3px 0 0 0 var(--fb-plum),3px 0 0 0 var(--fb-plum),0 7px 0 0 var(--fb-plum)}
.fb-btn .fb-ico{width:22px;height:22px}
.fb-btn:hover{filter:brightness(1.08)}
.fb-btn:active{transform:translateY(2px)}
.fb-btn[hidden]{display:none}
/* a phone: the pink bubble alone, above the app's tabs when the screen has them (feedback.js sets the height) */
@media (max-width:700px){
  .fb-btn{right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:48px;height:48px;min-height:0;padding:0;justify-content:center}
  .fb-btn span{display:none}
  .fb-btn .fb-ico{width:24px;height:24px}
}
/* the first-login tour runs without it (tour.js sets html.touring); finishing or skipping reloads the page */
html.touring .fb-btn,html.touring .fb-ui{display:none!important}

/* 1. point at it: the page dims, a bar across the top */
.fb-pick{position:fixed;inset:0;z-index:1001;cursor:crosshair;background:rgba(8,60,54,.18);box-shadow:inset 0 0 0 4px var(--fb-pink)}
.fb-bar{position:fixed;left:50%;top:14px;z-index:1004;transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:calc(100vw - 24px);padding:10px 12px 10px 14px;
  background:var(--fb-paper);box-shadow:var(--fb-rim),6px 8px 0 0 rgba(8,60,54,.2)}
.fb-bt{display:inline-flex;align-items:center;gap:10px}
.fb-bar .fb-ico{width:22px;height:22px;flex:none}
.fb-bar b{font:700 17px/1.2 var(--fb-pxf);color:var(--fb-teal-dark);white-space:nowrap}
.fb-bar button{all:unset;flex:none;cursor:pointer;padding:8px 10px 7px;font:400 8px/1.38 var(--fb-ps);text-transform:uppercase;background:var(--fb-teal);color:var(--fb-coin)}
.fb-bar .fb-cancel{background:#fff;color:var(--fb-teal-dark);box-shadow:0 0 0 2px var(--fb-teal)}
.fb-bar button:focus-visible{outline:3px dashed var(--fb-pink);outline-offset:3px}
@media (max-width:900px){.fb-bar b{white-space:normal}}
.fb-bar.ph{left:12px;right:12px;top:12px;transform:none;justify-content:space-between;gap:10px}
.fb-bar.ph b{font-size:15px}

/* 2. the pin and the dashed box round the part under it */
.fb-shade{position:fixed;inset:0;z-index:1001;background:rgba(8,60,54,.35)}
.fb-shade.dim{background:rgba(8,60,54,.28)}
.fb-box{position:fixed;z-index:1002;outline:3px dashed var(--fb-pink);background:rgba(255,95,168,.12);pointer-events:none}
.fb-box[hidden]{display:none}
.fb-pin{position:fixed;z-index:1003;display:grid;place-items:center;width:26px;height:30px;background:var(--fb-pink);clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);pointer-events:none}
.fb-pin .fb-ico{width:16px;height:16px;margin-bottom:6px}

/* 3. the form beside the pin, and the drawer Skip opens */
.fb-bubble,.fb-drawer{z-index:1004;overscroll-behavior:contain;color:var(--fb-text);font:600 15px/1.45 var(--fb-pxf);background:var(--fb-paper);overflow:auto}
.fb-bubble{position:fixed;width:370px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);padding:20px 20px 16px;box-shadow:var(--fb-rim),8px 10px 0 0 rgba(8,60,54,.25)}
.fb-drawer{position:fixed;right:0;top:0;bottom:0;width:400px;max-width:100vw;padding:26px 26px 24px;box-shadow:-6px 0 0 0 var(--fb-teal-dark)}
.fb-sheet,.fb-bubble.fb-sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;max-height:86vh;max-height:86dvh;padding:22px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -6px 0 0 var(--fb-teal-dark)}
.fb-x{all:unset;cursor:pointer;position:absolute;right:12px;top:10px;padding:6px 8px;font:400 12px/1 var(--fb-ps);color:var(--fb-muted)}
.fb-k{margin:0 0 6px;padding-right:30px;font:400 8px/1.5 var(--fb-ps);text-transform:uppercase;color:var(--fb-pink-ink);overflow-wrap:anywhere}
.fb-ui h2{margin:0 0 12px;font:700 28px/1.1 var(--fb-pxf);color:var(--fb-teal-dark)}
.fb-bubble h2{font-size:24px;margin-bottom:10px}
.fb-sub{margin:-4px 0 14px;font:600 15px/1.45 var(--fb-pxf);color:var(--fb-text)}
.fb-kinds{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.fb-kind{all:unset;cursor:pointer;padding:8px 10px 7px;font:400 8px/1.38 var(--fb-ps);text-transform:uppercase;background:#fff;color:var(--fb-teal-dark);box-shadow:0 0 0 2px var(--fb-teal)}
.fb-kind.on{background:var(--fb-teal);color:var(--fb-coin)}
.fb-l{display:block;margin:0 0 6px;font:700 15px/1.3 var(--fb-pxf);color:var(--fb-teal-dark)}
.fb-text{display:block;width:100%;min-height:96px;margin:0;padding:10px;border:0;border-radius:0;resize:vertical;font:600 15px/1.4 Nunito,system-ui,sans-serif;color:var(--fb-text);background:#fff;box-shadow:0 0 0 3px var(--fb-teal-dark)}
.fb-text:focus-visible{outline:3px dashed var(--fb-pink);outline-offset:3px}
.fb-bubble .fb-text{min-height:70px}
.fb-pic{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;cursor:pointer}
.fb-pic input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--fb-teal)}
.fb-pic b{display:block;font:700 15px/1.3 var(--fb-pxf);color:var(--fb-teal-dark)}
.fb-pic small{display:block;font:600 13px/1.4 var(--fb-pxf);color:var(--fb-muted)}
.fb-sends{margin:14px 0 16px;padding:8px 12px;font:600 13px/1.45 var(--fb-pxf);color:var(--fb-muted);background:#f3efe4}
.fb-bubble .fb-sends{margin:12px 0 14px}
.fb-sends summary{cursor:pointer;font:400 8px/1.6 var(--fb-ps);text-transform:uppercase;color:var(--fb-teal)}
.fb-sends>span{display:block;margin:6px 0 2px}
.fb-law{display:inline-block;margin-top:4px;padding:2px 6px;background:#ffe2e0;border:1px dashed #b3261e;color:#7a1410;font:400 8px/1.5 var(--fb-ps);text-transform:uppercase}
.fb-go{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;width:calc(100% - 8px);min-height:48px;margin:0 4px 12px;
  font:400 12px/1 var(--fb-ps);text-transform:uppercase;background:var(--fb-pink);color:#fff;text-shadow:2px 2px 0 var(--fb-plum);
  box-shadow:0 -4px 0 0 var(--fb-plum),0 4px 0 0 var(--fb-plum),-4px 0 0 0 var(--fb-plum),4px 0 0 0 var(--fb-plum),0 8px 0 0 var(--fb-plum)}
.fb-go:disabled{cursor:not-allowed;opacity:.45}
.fb-go:not(:disabled):hover{filter:brightness(1.08)}
.fb-go.ghost{background:var(--fb-paper);color:var(--fb-teal-dark);text-shadow:none;box-shadow:0 -3px 0 0 var(--fb-teal-dark),0 3px 0 0 var(--fb-teal-dark),-3px 0 0 0 var(--fb-teal-dark),3px 0 0 0 var(--fb-teal-dark),0 6px 0 0 var(--fb-teal-dark)}
.fb-row{display:flex;align-items:center;gap:14px}
.fb-row .fb-go{flex:1;width:auto}
.fb-row .fb-link{flex:none;margin-bottom:12px}
.fb-link{all:unset;cursor:pointer;font:700 14px/1.3 var(--fb-pxf);color:var(--fb-teal);text-decoration:underline;text-underline-offset:3px}
.fb-hist{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;margin:2px 0 0;font:700 15px/1.3 var(--fb-pxf);color:var(--fb-teal);text-decoration:underline;text-underline-offset:3px}
.fb-hist .fb-ico{width:20px;height:20px}

/* 4. "What you've sent": one status word each, and no staff name */
.fb-sent{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px}
.fb-sent li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#fff;box-shadow:0 0 0 2px var(--fb-line)}
.fb-sent b{display:block;font:700 16px/1.25 var(--fb-pxf);color:var(--fb-teal-dark)}
.fb-sent small{display:block;font:600 13px/1.3 var(--fb-pxf);color:var(--fb-muted)}
.fb-st{flex:none;max-width:150px;padding:5px 7px 4px;font:400 8px/1.38 var(--fb-ps);text-transform:uppercase;text-align:right}
.fb-st.sent{background:#f3efe4;color:var(--fb-muted);box-shadow:0 0 0 2px #d9c9a4}
.fb-st.read{background:#e6f2ef;color:var(--fb-teal-dark);box-shadow:0 0 0 2px #9fd1c8}
.fb-st.replied{background:#e3f7e6;color:#127a34;box-shadow:0 0 0 2px #7fd08c}

/* 5. the toast after Send */
.fb-toast{position:fixed;right:calc(22px + env(safe-area-inset-right));bottom:calc(84px + env(safe-area-inset-bottom));z-index:1004;display:flex;gap:10px;align-items:flex-start;width:340px;max-width:calc(100vw - 28px);
  padding:12px 14px;font:600 14px/1.4 var(--fb-pxf);color:var(--fb-text);background:#fff;box-shadow:var(--fb-rim),6px 8px 0 0 rgba(8,60,54,.18)}
.fb-toast .fb-ico{width:20px;height:20px;flex:none;margin-top:1px}
.fb-toast b{color:#127a34}
.fb-toast .fb-link{display:inline;margin-left:2px}
.fb-demo{display:block;margin-top:6px;font:400 8px/1.5 var(--fb-ps);text-transform:uppercase;color:var(--fb-muted)}
@media (max-width:700px){.fb-toast{left:14px;right:14px;width:auto;max-width:none;bottom:calc(80px + env(safe-area-inset-bottom))}}
/* Back-end mode: feedback that could not be sent stays in the box, with the reason under it */
.fb-err{margin:6px 0 0;font:800 13px/1.35 Nunito,system-ui,sans-serif;color:#b3261e}