/* Demo mode banner.
 *
 * Inert in the real app: nothing here matches until js/demo-mode.js appends
 * #demo-banner and puts .demo-mode on <body>.
 *
 * Fixed to the bottom rather than the top. A top bar would sit over the header
 * and shift every screenshot and printout by its own height; the bottom is
 * always visible to the room, never in the way of what is being demonstrated,
 * and print styles drop it entirely. */

#demo-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  padding:4px 12px;
  background:var(--fortava-navy,#061b4f);
  color:#fff;
  font-size:11px; line-height:1.25;
  box-shadow:0 -2px 12px rgba(0,0,0,0.18);
}

#demo-banner strong{
  letter-spacing:0.07em; font-size:9px; font-weight:600;
  background:var(--amber,#F59E0B); color:#3b2600;
  padding:2px 6px; border-radius:999px; flex:none;
}

#demo-banner .demo-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--amber,#F59E0B); flex:none;
}

#demo-banner .demo-text{
  opacity:0.92;
  /* nowrap now, so the longest element must be the one that gives way rather
   * than pushing the bar to a second line. */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}

#demo-banner .demo-count{
  margin-left:auto;
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:10px; opacity:0.7; white-space:nowrap;
}

#demo-banner button{
  font:inherit; font-size:11px; font-weight:500;
  padding:3px 9px; border-radius:6px; white-space:nowrap; flex:none;
  border:1px solid rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.1); color:#fff;
  cursor:pointer;
}
#demo-banner button:hover{ background:rgba(255,255,255,0.2); }
#demo-banner button:focus-visible{ outline:2px solid var(--amber,#F59E0B); outline-offset:2px; }

#demo-banner #demo-abc-btn{
  background:var(--fortava-green,#8cc63f); border-color:var(--fortava-green,#8cc63f);
  color:#16250a; font-weight:600;
}
#demo-banner #demo-abc-btn:hover{ filter:brightness(1.08); }

/* Clear the bar so the last row of any scrolled list stays reachable. */
body.demo-mode{ padding-bottom:34px; }

/* A printed planner or report should carry no demo chrome, but it should still
 * be obvious on paper that the contents are not real. */
@media print{
  #demo-banner{ display:none; }
  body.demo-mode{ padding-bottom:0; }
  body.demo-mode::before{
    content:'DEMO DATA — fictional residents';
    display:block; margin-bottom:8px;
    font-size:10pt; font-weight:600; letter-spacing:0.04em;
  }
}

@media (max-width:640px){
  #demo-banner{ font-size:12px; padding:8px 12px; gap:8px; }
  #demo-banner .demo-count{ display:none; }
  #demo-banner .demo-text{ flex:1 1 100%; order:3; }
}

/* ── "View demo" on the sign-in screen ────────────────────────────────────
 * Lives here rather than in auth.css because it belongs to demo mode: if the
 * demo is ever removed, this file goes with it and the sign-in screen is
 * left as it was. Deliberately quieter than the Sign in button — it is a
 * secondary route, not a competing call to action. */

.auth-demo{
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--border,rgba(0,0,0,0.07));
  text-align:center;
}

.auth-demo-or{
  display:block; margin-bottom:10px;
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-subtle,#9A9A94);
}

.auth-demo-btn{
  width:100%;
  font:inherit; font-size:14px; font-weight:500;
  padding:9px 14px;
  border-radius:var(--radius-sm,8px);
  border:1px solid var(--border-md,rgba(0,0,0,0.13));
  background:var(--surface,#fff);
  color:var(--text,#18181A);
  cursor:pointer;
}
.auth-demo-btn:hover{ background:var(--fortava-green-soft,#edf7e4); border-color:var(--fortava-green,#8cc63f); }
.auth-demo-btn:focus-visible{ outline:2px solid var(--fortava-green,#8cc63f); outline-offset:2px; }

.auth-demo-note{
  margin:8px 0 0;
  font-size:12px; line-height:1.4;
  color:var(--text-muted,#64645E);
}