/* Rolodex for features that are not in the tester build.
   Two tabs: not yet released, and not yet built. Without JavaScript both stacks stay visible. */

.rolodex__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
}

html:not(.js) .rolodex__tabs { display: none; }

.rolodex__tab {
  font: inherit;
  font-size: var(--t-subhead);
  font-weight: 650;
  color: var(--ink-1);
  background: var(--noir-2);
  border: 1px dashed var(--deco-gold-line);
  border-radius: var(--radius-1);
  padding: 0.55rem 0.8rem;
  cursor: pointer;
}

.rolodex__tab[aria-selected="true"] {
  border-style: solid;
  background: var(--noir-1, var(--noir-2));
}

.rolodex__tab:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
}

.rolodex.is-ready .rolodex__panel { display: none; }
.rolodex.is-ready .rolodex__panel.is-open { display: block; }

html.js .rolodex.is-ready .rolodex__fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.rolodex__fallback {
  margin: 0 0 var(--s-3);
  font-size: var(--t-title3, 1.25rem);
}

.rolodex__empty {
  margin: 0;
  max-width: 40rem;
  color: var(--ink-2);
}