/* ==========================================================================
   One active tab (js/components/active-tab-screen.js): the screen of a tab
   that is not the active one. Covers the whole page, above everything.
   ========================================================================== */

.active-tab {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--canvas); /* not --page: without the window ring (26.10) the light window needs the darker canvas around it */
  color: var(--text-1);
  font-family: var(--font-family);
}

.active-tab__window {
  width: 100%;
  max-width: 420px;
  /* A window (look stage 4): radius 22, recessed, a hairline instead of an edge. */
  background: var(--window);
  border-radius: 22px;
  box-shadow: var(--window-edge);
  padding: 28px 24px 24px;
  text-align: center;
  outline: none;
}

.active-tab__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-1);
}

.active-tab__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
}

.active-tab__button {
  margin-top: 22px;
  min-width: 160px;
  min-height: 44px;
  border-radius: 999px;
  background: var(--lead);
  color: var(--on-lead);
}

.active-tab__button[hidden] {
  display: none;
}

.active-tab__button:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .active-tab__window {
    padding: 24px 18px 18px;
  }

  .active-tab__button {
    width: 100%;
  }
}