/* "Demo tools" floating pill and its popover (demotools.js). Linked after each page's own <style>, so equal-specificity rules here win.
   Sean, 2026-11-01, Option A: the pill is fixed bottom-right (above the tab bar on phones), not a sidebar row.
   Edge rule (Sean, 2026-10-30): labels truncate on one line, trailing icons never shrink and keep the leading inset. */
:root{--test:#b7791f}
:root[data-kt=dark],:root[data-kt=dim]{--test:#f0c04a}
.dt-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;font-size:14px;line-height:20px;color:var(--text2)}
@media(max-width:860px){.dt-fab{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 74px)}}   /* clears the 64px tab bar (.mtab, 12px up) */
[data-kind=brand] .dt-fab,[data-env=production] .dt-fab,.dt-hide .dt-fab{display:none!important}   /* brand accounts, production box, presenting */
html:not(.dt-hide):not([data-kind=brand]):not([data-env=production]) body:has(.dt-fab) .plfb-btn{display:none!important}   /* feedback lives in the menu while the pill shows; hidden pill (above) leaves the button alone */
.dt .l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt svg.i{flex:none}
.dt-trig{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 10px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font:inherit;font-size:11.5px;font-weight:500;line-height:16px;box-shadow:0 6px 18px rgb(20 18 30/22%);cursor:pointer;white-space:nowrap}
.dt-trig b{font-weight:700;color:var(--test)}
.dt-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--test)}
.dt-trig .l{flex:none}
.dt-pop{display:none;position:absolute;right:0;bottom:calc(100% + 8px);width:268px;max-width:calc(100vw - 32px);z-index:30;background:var(--sheet);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgb(20 18 30/18%);padding:6px}
.dt.open .dt-pop{display:block}
.dt-hd{display:flex;align-items:center;gap:8px;min-width:0;padding:4px 10px 3px;font-size:10.5px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dt-chip{flex:none;font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;background:color-mix(in srgb,var(--test) 14%,transparent);color:var(--test);border-radius:999px;padding:1px 8px;white-space:nowrap}
.dt .dt-pop a{display:flex;align-items:center;gap:9px;min-width:0;height:30px;padding:0 10px;border-radius:8px;font-size:13px;line-height:18px;font-weight:400;color:var(--text2);text-decoration:none;background:none;box-shadow:none;white-space:nowrap;cursor:pointer}
.dt .dt-pop a:hover{background:var(--soft);color:var(--ink)}
.dt .dt-pop a.on{background:none;box-shadow:none;color:var(--text2);font-weight:400}   /* Logins picks up .on from the dashboard router; only views show it */
.dt .dt-pop a.vw.on{color:var(--ink);font-weight:600}
.dt .dt-pop svg.i{width:15px;height:15px}
.dt .dt-pop .chk{display:none;color:var(--accent);stroke-width:2.2}
.dt .dt-pop a.vw.on .chk{display:block}
.dt .dt-pop a.bad{color:var(--danger)}
.dt .dt-pop a.bad:hover{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger)}
.dt-sep{height:1px;background:var(--line);margin:5px 4px}
.dt-tog{display:flex;align-items:flex-start;gap:9px;width:100%;min-width:0;min-height:36px;padding:6px 10px;border:0;border-radius:8px;background:none;color:var(--text2);font:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}
.dt-tog:hover{background:var(--soft);color:var(--ink)}
.dt-tog .l{flex:1 1 auto;min-width:0;white-space:normal;overflow:visible;text-overflow:unset}
.dt-sw{flex:none;width:28px;height:16px;border-radius:999px;background:var(--line-2);position:relative;margin-top:1px}
.dt-sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--sheet);box-shadow:0 0 0 1px var(--line);transition:left .15s}
.dt-tog.on .dt-sw{background:var(--good)}
.dt-tog.on .dt-sw::after{left:14px}
.dt .dt-pop a:focus-visible,.dt-trig:focus-visible,.dt-tog:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dt-hint{padding:5px 10px 3px;font-size:11px;line-height:16px;color:var(--faint)}
.dt .dt-pop [hidden]{display:none}