/* Transient tablet notifications: a fixed top overlay shared by every tablet page that
   loads `tablet_notifications.js`.

   Independent of the host page's own tokens: a notification must look and sit the same
   everywhere, so this file reads only the shared `--industry-*` tokens from
   `industry/industry.css`, which every host page links first, plus its own sizes below.

   Zero-footprint contract (docs/context/tablet-design.md): the host is `position: fixed`
   and therefore outside normal flow, so showing a notification cannot resize, translate,
   or scroll the page underneath it. Nothing here may gain a layout-affecting property. */

.tablet-notifications {
  --tn-pad-y: 12px;
  --tn-pad-x: 18px;
  --tn-gap: 12px;
  --tn-label-size: 13px;
  --tn-message-size: 17px;

  position: fixed;
  /* Above every fixed-`div` tablet modal (1000). `<dialog>`s opened with showModal() are
     beaten by the host being a top-layer popover (tablet_notifications.js), not by this. */
  z-index: 1500;
  /* Reset the UA `[popover]` box: no inset centring, frame, padding, or canvas fill. */
  inset: auto;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
  transform: translateX(-50%);
  width: max-content;
  /* Bounded so a long Russian string wraps instead of widening the document. */
  max-width: min(
    calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)),
    720px
  );
  /* The host spans no more than its card; clicks outside it reach the page beneath. */
  pointer-events: none;
}

.tablet-notification {
  display: flex;
  align-items: baseline;
  gap: var(--tn-gap);
  padding: var(--tn-pad-y) var(--tn-pad-x);
  border-radius: 0;
  border: 1px solid transparent;
  font-family: var(--industry-font-body);
  text-align: left;
  opacity: 1;
  transition: opacity 160ms ease, transform 160ms ease;
}

.tablet-notification__label {
  flex: 0 0 auto;
  font-family: var(--industry-font-heading);
  font-size: var(--tn-label-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.tablet-notification__message {
  /* min-width: 0 lets a long unbroken token wrap instead of pushing the card wider. */
  min-width: 0;
  font-size: var(--tn-message-size);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Category is carried by the visible label text as well as by colour, so colour is never
   the only signal. Keep all three contrasts dark-on-light like the tablet pages. */
/* Industry has no danger colour: the error is the dark card, the warning a framed light one. */
.tablet-notification--error {
  background: var(--industry-neutral-900);
  border-color: var(--industry-neutral-900);
  color: var(--industry-bg);
}

.tablet-notification--warning {
  background: var(--industry-bg);
  border-color: var(--industry-text);
  color: var(--industry-text);
}

.tablet-notification--info {
  background: var(--industry-accent-100);
  border-color: var(--industry-accent);
  color: var(--industry-accent-800);
}


/* Enter/exit animate opacity and translation only — never a property that reflows. */
.tablet-notification[data-entering],
.tablet-notification[data-leaving] {
  opacity: 0;
  transform: translateY(-8px);
}

@media (prefers-reduced-motion: reduce) {
  .tablet-notification {
    transition: none;
  }

  .tablet-notification[data-entering],
  .tablet-notification[data-leaving] {
    opacity: 1;
    transform: none;
  }
}

/* Portrait: full width below the header strip, so the card never covers the page title. */
@media (orientation: portrait) {
  .tablet-notifications {
    top: calc(env(safe-area-inset-top, 0px) + 96px);
    /* 16 px gutters from insets, not `100vw`, which would count a page scrollbar. */
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
    transform: none;
  }
}