/* The UAT indicator (Plan 11): a stripe on every page of every environment but
   PRD's, at the top of the sticky header (templates/_env_stripe.html). Its own
   file because the Django admin, which does not load app.css, shows it too; linked
   only when there is a badge, so PRD's pages are exactly as before. */
.env-stripe{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  min-height:30px;padding:4px 12px;box-sizing:border-box;
  background:repeating-linear-gradient(-45deg,#f5b800 0 14px,#ffd34d 14px 28px);
  color:#1c1b19;font-weight:700;font-size:calc(13px * var(--fs, 1));
  letter-spacing:.01em;text-align:center;border-bottom:2px solid #1c1b19}
.env-stripe .env-tag{background:#1c1b19;color:#ffd34d;border-radius:4px;padding:1px 8px;
  font-size:calc(12px * var(--fs, 1));letter-spacing:.08em}

/* Below 1024 the header scrolls away with the page (the desktop shell keeps it
   on screen), so the stripe leaves it: one slim, ellipsised line fixed at the
   top (Plan 16, spec 2026-10-17 §6). The page starts under it, and the sticky
   bars that stop at the top of the screen stop under it: --env-top (the
   dashboard's title row, the cards' day bar, the action bar). The admin keeps
   its own fixed 32px stripe and undoes the padding (admin_screens.css, linked
   after this file). */
/* registered, so it computes to a length (what a script or a test reads) */
@property --env-top{syntax:"<length>";inherits:true;initial-value:0px}
:root{--env-h:calc(26px * var(--fs, 1))}
@media screen and (max-width:1023.98px){
  html:has(.env-stripe){--env-top:var(--env-h)}
  body:has(.env-stripe){padding-top:var(--env-h)}
  .env-stripe{position:fixed;top:0;left:0;right:0;z-index:45;height:var(--env-h);min-height:0;
    flex-wrap:nowrap;padding:0 12px;white-space:nowrap;overflow:hidden}
  .env-stripe .env-tag{flex:0 0 auto}
  .env-stripe .env-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}