/* ========================================
   DEMO MODE — pill, panel, hints, toast
   Deliberately restrained: these are testing aids, they must not make the
   product read as fake. Muted amber, small type, low elevation.
   ======================================== */

/* ── the "Use demo …" affordance pages place next to inputs ───────────── */
.demo-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 11px;
  font:500 .78rem/1 var(--sans,inherit);
  color:#8A5100;background:#FDF3E2;
  border:1px solid #F0DCB4;border-radius:999px;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.demo-chip:hover{background:#FAE9D0;border-color:#E5CB9B}
.demo-chip:focus-visible{outline:2px solid #C1611A;outline-offset:2px}
.demo-chip::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#C1611A;flex:none;
}

/* ── inline "Try demo …" helper text under a field ────────────────────── */
.demo-hint{
  display:block;margin-top:6px;
  font-size:.78rem;line-height:1.45;color:#8A5100;
}
.demo-hint code{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.95em;background:#FDF3E2;border:1px solid #F0DCB4;
  border-radius:4px;padding:1px 5px;color:#7A4600;
}

/* ── a slightly larger hint card, for the top of an input-heavy page ──── */
.demo-card{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 15px;margin:16px 0;
  background:#FDF3E2;border:1px solid #F0DCB4;
  border-left:3px solid #C1611A;border-radius:8px;
}
.demo-card-body{flex:1;min-width:0}
.demo-card strong{display:block;font-size:.875rem;color:#7A4600;margin-bottom:3px}
.demo-card p{margin:0 0 9px;font-size:.83rem;line-height:1.5;color:#8A5100}
.demo-card p:last-child{margin-bottom:0}

/* ── the floating pill (bottom-left; Voter Guide owns bottom-right) ───── */
.demo-mode{position:fixed;left:20px;bottom:20px;z-index:70;font-family:inherit}
.demo-mode-pill{
  display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 13px;
  font:500 .78rem/1 inherit;color:#5A4632;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border:1px solid #E2DCD2;border-radius:999px;
  box-shadow:0 2px 10px rgba(20,32,43,.10);
  cursor:pointer;transition:border-color .15s,box-shadow .15s;
}
.demo-mode-pill:hover{border-color:#D0C6B6;box-shadow:0 4px 14px rgba(20,32,43,.14)}
.demo-mode-pill:focus-visible{outline:2px solid #C1611A;outline-offset:2px}
.demo-mode-dot{
  width:7px;height:7px;border-radius:50%;background:#C1611A;flex:none;
}

.demo-mode-panel{
  position:absolute;left:0;bottom:44px;width:290px;
  background:#fff;border:1px solid #E2DCD2;border-radius:12px;
  box-shadow:0 18px 44px -18px rgba(13,33,54,.42);
  padding:15px 16px;
}
.demo-mode-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.demo-mode-head strong{font-size:.9rem;color:#14202B}
.demo-mode-close{
  background:none;border:none;font-size:1.25rem;line-height:1;
  color:#6B7B8D;cursor:pointer;padding:0 2px;
}
.demo-mode-close:hover{color:#14202B}
.demo-mode-intro{margin:5px 0 11px;font-size:.78rem;line-height:1.5;color:#6B7B8D}
.demo-mode-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.demo-mode-list li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.79rem;color:#3A4A5C;
}
.demo-mode-list code{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.78rem;
  background:#FAF7F1;border:1px solid #EDE8DF;border-radius:5px;
  padding:2px 7px;color:#14202B;cursor:pointer;white-space:nowrap;
}
.demo-mode-list code:hover{border-color:#C1611A;color:#7A4600}
.demo-mode-list code:focus-visible{outline:2px solid #C1611A;outline-offset:1px}
.demo-mode-foot{
  margin:12px 0 0;padding-top:10px;border-top:1px solid #EDE8DF;
  font-size:.72rem;line-height:1.45;color:#93A1B0;
}

/* ── toast ────────────────────────────────────────────────────────────── */
.demo-toast{
  position:fixed;left:20px;bottom:66px;z-index:80;
  max-width:min(320px,calc(100vw - 40px));
  padding:10px 14px;
  font-size:.82rem;line-height:1.45;color:#fff;
  background:#16324F;border-radius:8px;
  box-shadow:0 10px 30px -10px rgba(13,33,54,.5);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.demo-toast.show{opacity:1;transform:none}

@media (max-width:640px){
  .demo-mode{left:12px;bottom:12px}
  .demo-mode-panel{width:min(290px,calc(100vw - 28px))}
  .demo-toast{left:12px;bottom:58px}
}

@media (prefers-reduced-motion:reduce){
  .demo-toast{transition:none}
}