/* Feedback button and panel (Chris, 2026-10-21). IDENTICAL in every Select app; see feedback.js.
   Everything is scoped under .sfb so it cannot restyle the page. Colours fall back to the Select
   palette when the page has no --accent / --ink variables.
   z-index 19: above page content and sticky 3D stages (Synergy uses 10), below full-screen
   modals (Synergy's .modal is 20; FPS and UNIFI use <dialog>, which sits in the top layer). */
.sfb{--sfb-accent:var(--accent,#bf533d);--sfb-ink:var(--ink,#242622);--sfb-muted:var(--muted,#6b6c67);--sfb-line:#bfc4bb;
  position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:19;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  font-family:inherit;font-size:14px;line-height:1.45;color:var(--sfb-ink);pointer-events:none}
.sfb>*{pointer-events:auto}
.sfb [hidden]{display:none!important}
.sfb-trigger{position:relative;min-height:36px;padding:0 15px;border:1px solid var(--sfb-line);border-radius:999px;background:#fff;color:var(--sfb-ink);
  font:inherit;font-weight:600;font-size:13px;letter-spacing:.2px;box-shadow:0 2px 8px #0000001f;cursor:pointer;transition:opacity .15s,visibility .15s}
.sfb-trigger:hover{border-color:var(--sfb-ink)}
.sfb-trigger[aria-expanded=true]{border-color:var(--sfb-accent)}
.sfb-trigger:focus-visible,.sfb button:focus-visible,.sfb textarea:focus-visible,.sfb input:focus-visible{outline:3px solid var(--sfb-accent);outline-offset:2px}
/* Stepped aside while it would cover a key control (feedback.js keepClear). Hidden from clicks
   too, and visibility:hidden keeps it out of the tab order so focus never lands on it unseen. */
.sfb.sfb-tucked .sfb-trigger{opacity:0;visibility:hidden}
/* Ghost state (feedback.js sets .sfb-over-text on phones while the pill is over words): the pill fades so the text under it can be read
   through it. It stays visible and tappable. Hover, keyboard focus or an open panel bring it back to full strength. */
.sfb.sfb-over-text .sfb-trigger:not(:hover):not(:focus-visible):not([aria-expanded=true]){opacity:.38}
.sfb-panel{box-sizing:border-box;width:330px;max-width:calc(100vw - 32px);max-height:calc(100vh - 90px);overflow:auto;padding:14px 16px 16px;
  background:#fff;border:1px solid #dddfda;box-shadow:0 10px 30px #00000029;text-align:left}
.sfb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.sfb-title{margin:0;font:inherit;font-size:16px;font-weight:600;letter-spacing:0;color:var(--sfb-ink)}
.sfb-x{border:0;background:none;color:var(--sfb-muted);font-size:22px;line-height:1;padding:0 4px;margin:-4px -6px 0 0;cursor:pointer;min-width:32px;min-height:32px}
.sfb-x:hover{color:var(--sfb-ink)}
.sfb-sub{margin:4px 0 10px;color:var(--sfb-muted);font-size:12.5px}
.sfb-sent:empty,.sfb-err:empty{display:none}
.sfb-sent{margin:0 0 10px;padding:7px 10px;background:#eef6ee;color:#1d5d2a;font-size:13px}
.sfb-kinds{display:flex;gap:2px;padding:2px;border:1px solid var(--sfb-line);background:#f4f5f2}
.sfb-kinds button{flex:1;min-height:32px;padding:4px 6px;border:0;background:transparent;color:var(--sfb-muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.sfb-kinds button[aria-pressed=true]{background:var(--sfb-accent);color:#fff}
.sfb-text,.sfb-input{box-sizing:border-box;width:100%;border:1px solid var(--sfb-line);border-radius:0;background:#fff;color:var(--sfb-ink);font:inherit;font-size:16px;padding:8px 10px}
.sfb-text{display:block;margin-top:8px;min-height:96px;resize:vertical}
.sfb-who{border:0;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:0}
.sfb-who legend{padding:0;margin-bottom:4px;font-size:12px;color:var(--sfb-muted)}
.sfb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.sfb-ts:empty{display:none}
.sfb-ts{margin-top:8px}
.sfb-err{margin:6px 0 0;color:#a43a25;font-size:13px}
.sfb-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.sfb-btn{min-height:36px;padding:0 14px;border:1px solid var(--sfb-line);background:#fff;color:var(--sfb-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.sfb-btn:hover{border-color:var(--sfb-ink)}
.sfb-send{background:var(--sfb-accent);border-color:var(--sfb-accent);color:#fff}
.sfb-send:hover{filter:brightness(.92);border-color:var(--sfb-accent)}
.sfb-btn:disabled{opacity:.55;cursor:not-allowed}
/* Touch target: the pill is 36 px tall to stay small, but an invisible ring around it makes the
   tappable area 44 px tall (Apple and WCAG touch-target guidance). inset is measured from the
   padding box, which is 1 px inside the 1 px border on each side, so -5px gives 34 + 10 = 44. */
.sfb-trigger::before{content:"";position:absolute;inset:-5px -6px}
/* Reserved room at the end of the page (Chris, 2026-10-21): feedback.js adds html.sfb-reserve, so
   the last content and the footer scroll clear of the button. Size = button height (36) + its
   offset from the screen edge (16) + a gap (8), plus the iPhone home-indicator inset. */
html.sfb-reserve{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
/* Phones (Chris, 2026-10-21: "on a 375 px phone it covers page content"; 2026-10-23 audit: on the UNIFI
   Conference finish and cut-in pages at 390 px it still sat on the last words of lines): a smaller pill,
   30 px tall instead of 36, tucked 6 px from the corner (plus the safe area), so it covers about 40 percent
   less of the page. feedback.js also steps it aside over a page's key controls. The invisible tap ring below
   keeps the tappable area at 44 px (30 + 2 x 7). The page reserve at the end grows to pill height (30) +
   offset (6) + a clear gap (20) = 56 px, so the last line and the footer scroll fully clear of the pill. */
@media (max-width:600px){
  .sfb{right:calc(6px + env(safe-area-inset-right,0px));bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  .sfb-trigger{min-height:30px;padding:0 11px;font-size:12px;box-shadow:0 1px 6px #0000001f}
  .sfb-trigger::before{inset:-7px -8px}
  .sfb-panel{width:min(330px,calc(100vw - 16px));max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px)}
  .sfb-who{grid-template-columns:1fr}
  html.sfb-reserve{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.sfb-trigger{transition:none}}
@media print{.sfb{display:none!important}}