/* The Phoenix beta's strip (10/11, intake/beta.py `faixa_html`). Served only in the beta, on every screen: the classic
   pages (base.html), the sign-in page and the /novo/ (web_novo.index adds the link and the strip). A file and not an
   inline style: Phoenix's CSP takes only files.

   Register app: a neutral grey strip over the navy floor, no orange (it is nobody's turn). Its one point of weight is
   the inverted "Beta" (the DNA's inversion of the chosen option, radius 0), so the eye does not learn to skip it as
   browser chrome. It stays at the top with the /novo/ bar, on the bar's own axis (`--fx`): the bar and what hangs
   from it move down by the strip's height. */

:root { --phx-beta-h: 28px; }

.phx-beta {
  position: sticky; top: 0; z-index: 41;
  display: flex; align-items: center; gap: 16px;
  height: var(--phx-beta-h); box-sizing: border-box;
  padding-inline: var(--fx, max(40px, calc((100vw - 1520px) / 2)));
  background: var(--gle-steel-700);
  color: var(--gle-steel-100);
  font: 400 12px/1 var(--gle-font-body);
}
.phx-beta__rotulo {
  flex: none;
  padding: 3px 6px;
  background: var(--gle-steel-100);
  color: var(--gle-navy-deep);
  font: 500 11px/1 var(--gle-font-mono);
  letter-spacing: .08em; text-transform: uppercase;
}
.phx-beta__frase {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phx-beta__frase time { font-family: var(--gle-font-mono); font-variant-numeric: tabular-nums; }
.phx-beta__link {
  flex: none; position: relative;
  color: var(--gle-steel-100);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
/* A larger target without reaching into the bar below (the /novo/ "Mais" sits right under it on a phone): up and to
   the sides only. */
.phx-beta__link::after { content: ""; position: absolute; inset: -16px -10px 0 -10px; }
.phx-beta__link:hover { color: #fff; text-decoration-thickness: 2px; }
.phx-beta__link:focus-visible { outline: 2px solid var(--gle-steel-100); outline-offset: 2px; }

/* The sign-in page is a full-screen fixed stage (login.css .lg-raiz): the strip takes the top and the stage starts
   below it. */
.phx-beta--fixa { position: fixed; top: 0; left: 0; right: 0; z-index: 130; }
.phx-beta--fixa ~ .lg-raiz { top: var(--phx-beta-h); }

/* The /novo/: the sticky bar, the sticky group heads and the layers that hang from the bar move down. */
.px-bar { top: var(--phx-beta-h); }
.px-cab-grupo { top: calc(var(--bar) + var(--phx-beta-h)); }
.px-semana, .px-sob-veu { top: calc(var(--bar) + var(--phx-beta-h)); }

.phx-beta__mini { display: none; }

@media (max-width: 760px) {
  .phx-beta { padding-inline: var(--fx, 16px); gap: 12px; }
  .phx-beta__rotulo { font-size: 12px; }
  .phx-beta__longa { display: none; }
  .phx-beta__mini { display: inline; }
}