/* ══════════════════════════════════════════════════════════════
   Meetback — the SHELL's own chrome.

   Q52. The first thing in this app that belongs to the shell rather than to a
   screen: a notice that a new build has taken over. Every other stylesheet here
   is named after the screen it dresses, and putting this in one of them would
   mean the notice only looked right on that screen — it can appear on any of
   them, because a service worker takes over whenever it takes over.

   Not in tokens.css either: that file is the single place a colour is DECLARED
   (Q32, and one_palette enforces it), not a place components live. Everything
   below reads tokens and declares none.
   ══════════════════════════════════════════════════════════════ */

/* Above the tab bar (z-index 40 is the delete sheet's scrim, the highest thing
   in the app) but deliberately BELOW nothing — a build notice that a modal can
   cover is a build notice nobody reads. It sits at the foot rather than the
   head because the top of the screen is where the status bar and the safe-area
   inset already compete, and Q47 is unfinished evidence that the top edge of
   this app is not yet a settled place to put anything. */
.newbuild {
  position: fixed;
  left: 12px;
  right: 12px;
  /* ⚠ ABOVE THE TAB BAR, NOT ON IT. At 12px this sat directly over the share
     button, and share-fab-label.test.mjs caught it by name: tapping the word
     "Share" hit `newbuild`. A notice that eats the app's primary action is
     worse than no notice. 96px clears the bar (icon, label, and its own
     safe-area padding) with room to spare, and the number is asserted rather
     than trusted — new-build-notice.test.mjs requires the FAB to stay the
     topmost thing at its own centre while the notice is up. */
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 60;

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;

  background: var(--ink);
  color: var(--surface);
  border-radius: 16px;
  box-shadow: 0 8px 28px var(--sheet-shadow);

  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.4;

  /* §2.3 of LANGUAGE.md — one property, inside the 200ms budget. */
  animation: newbuild-in .2s cubic-bezier(.2, .8, .3, 1);
}

/* It must not push the tab bar's own controls out of reach on a short screen,
   so it wraps rather than growing. */
.newbuild span { flex: 1 1 auto; min-width: 0; }

.newbuild button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* "Load it" is the action, so it carries the weight. */
.newbuild [data-bind="new-build-load"] {
  background: var(--surface);
  color: var(--ink);
}

/* "Later" is not destructive and not the point — it recedes, but it is a real
   button with a real hit area, because a dismissal you cannot hit is a notice
   that will not go away. */
.newbuild [data-bind="new-build-later"] {
  background: transparent;
  color: var(--faint);
  padding: 0 6px;
}

@keyframes newbuild-in {
  from { transform: translateY(10px); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .newbuild { animation: none; }
}