.tools-callout {
  position: absolute;
  z-index: 5;
  width: min(405px, 48vw);
  right: 3%;
  top: 8%;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-top: 5px solid #24295e;
  box-shadow: 0 17px 42px #17223831;
  border-radius: 7px;
  padding: 1rem 1rem .9rem;
}

.tools-callout .callout-pointer { left: 21%; }
.tools-callout .callout-kicker { color: #24295e; }
.tools-callout .callout-head button { background: #e9ebf2; color: #24295e; }
.next-stage { color: #24295e; font-weight: 700; }

.tool-list { display: grid; gap: .55rem; }

.tool-item {
  width: 100%;
  background: #fff;
  border: 1px solid #d8dce2;
  border-radius: 5px;
  padding: .7rem;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .65rem;
  align-items: center;
  cursor: pointer;
}

.tool-item:hover { border-color: #24295e; }
.tool-item.is-loaded { border-color: #5d997f; background: #f1f9f5; }
.tool-icon { color: #24295e; font-size: 1.25rem; width: 1.25rem; text-align: center; }
.tool-item strong, .tool-item small { display: block; }
.tool-item strong { font: 700 .8rem "DM Mono", monospace; }
.tool-item small { font: 400 .64rem "DM Mono", monospace; color: #667085; margin-top: .2rem; }
.tool-status { font-size: .69rem; color: #24295e; }
.tool-item.is-loaded .tool-status { color: #267960; }

/* Keep the learner icon's head centered over its torso. */
.person-icon {
  width: 43px;
  text-align: center;
}

@media (max-width: 900px) {
  .tools-callout { width: min(405px, 62vw); }
}

@media (max-width: 650px) {
  .tools-callout { left: 4%; right: auto; top: 8%; width: 92%; padding: .8rem; }
}