/* css/components/status.css
 * App-wide async-action status region.
 *
 * Kept as a screen-reader-only live region so assistive tech announces async
 * results without creating a floating global toast that competes with the page.
 * The action itself already updates its own visible control state in most cases;
 * this is just a fallback for failures and background state changes.
 *
 * Markup: #app-status in includes/footer.php (role="status" aria-live="polite"
 * aria-atomic="true"). Content and .is-success/.is-error/.is-info tone class
 * are set only by setAppStatus() in js/app.js.
 */

.g-app-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.g-app-status:empty {
  display: none;
}

.g-app-status.is-success,
.g-app-status.is-error,
.g-app-status.is-info {
  /* Keep the live-region semantics but never paint a floating message. */
  display: block;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 620px) {
  .g-app-status {
    width: 1px;
    height: 1px;
  }
}