/* Sample dashboard (/caresolve/demo/): a slim notice above the real Arrivals board. */
.demo-strip{display:flex;align-items:center;gap:14px;min-height:44px;padding:8px 20px;background:#0D1D29;color:#D2DEE4;font:500 13px/1.45 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;border-bottom:1px solid #1B3243}
.demo-strip p{margin:0;flex:1 1 auto;min-width:0}
.demo-strip strong{color:#F2F6F8;font-weight:600}
.demo-chip{flex:none;padding:3px 9px;border:1px solid #34546A;border-radius:999px;color:#9ED7ED;font:600 11px/1.3 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.demo-strip nav{display:flex;align-items:center;gap:6px;flex:none}
.demo-strip nav a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:8px;color:#D2DEE4;text-decoration:none;white-space:nowrap}
.demo-strip nav a:hover{color:#fff;background:#13283A}
.demo-strip nav a.demo-strip-cta{background:#8CC7DC;color:#0D1D29;font-weight:600}
.demo-strip nav a.demo-strip-cta:hover{background:#A6D6E7;color:#0D1D29}
.demo-strip a:focus-visible,.demo-note button:focus-visible{outline:2px solid #8CC7DC;outline-offset:2px}
.demo-note{position:fixed;left:50%;bottom:24px;z-index:80;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 32px));padding:12px 8px 12px 16px;border-radius:12px;background:#0D1D29;color:#E6EEF2;font:500 14px/1.45 "IBM Plex Sans",system-ui,sans-serif;box-shadow:0 12px 32px rgba(13,29,41,.35)}
.demo-note[hidden]{display:none}
.demo-note button{flex:none;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#A7BAC5;font-size:20px;line-height:1;cursor:pointer}
.demo-note button:hover{background:#13283A;color:#fff}
@media (max-width:760px){
  .demo-strip{flex-wrap:wrap;gap:8px 12px;padding:10px 16px}
  .demo-strip-detail{display:none}
  .demo-strip nav{margin-left:auto}
}
/* Phones (2026-10-02): one compact row clear of the notch. The chip says
   "Sample"; the sentence stays available to screen readers. */
@media (max-width:520px){
  .demo-strip{flex-wrap:nowrap;gap:8px;min-height:0;padding:calc(6px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left))}
  .demo-strip p{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .demo-strip nav{gap:4px;margin-left:auto}
  .demo-strip nav a{min-height:44px;padding:0 10px;font-size:13px}
  .demo-note{bottom:calc(12px + env(safe-area-inset-bottom))}
  .demo-note button{width:44px;height:44px}
}
/* 320–359 px: "Website" keeps the strip on one row (aria-label keeps the full name) */
@media (max-width:359px){
  .demo-strip nav a[aria-label]{font-size:0}
  .demo-strip nav a[aria-label]::after{content:"Website";font-size:13px}
}
/* With a top safe-area inset the sticky board bar pads itself clear of the status bar
   (phone.css). The strip already clears it here, so the bar tucks that padding under
   the strip until it sticks. env() is 0 everywhere else. */
@media (max-width:720px) and (orientation:portrait),(max-width:720px) and (min-height:501px){
  .demo-strip{position:relative;z-index:51}
  .demo-page #ems-light-themes .ab-bar{margin-top:calc(-1 * env(safe-area-inset-top,0px))}
}